more as time allows. If you have a theme you'd like to see here, drop me a line. If you've adapted
the technique to a theme that is not listed here, send me details and I'll add it so others may benefit.
I'll also credit you with the modification.
Silk
The Silk theme and its variations are available from Josh Lockhart.
The instructions are as follows:
Banner
height
Make your Bannerzest banner 40px narrower that the width of your theme. For example, if you've chose the 840 px width for your Rapidweaver project, make the Bannerzest banner 800 px wide (840 - 40 = 800) This is for this theme only. Other themes use the entire page width. The height of your banner will depend on the height that you've selected within the theme. (see Banner height at right)
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Place your cursor right before the div with the id of "breadcrumbsBackground". Hit the enter key once to create a blank line which will move "breadcrumbsBackground" down a space. Move your cursor back up to the blank space you just created and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Pretty snazzy, huh?
The instructions are as follows:
height
Make your Bannerzest banner 40px narrower that the width of your theme. For example, if you've chose the 840 px width for your Rapidweaver project, make the Bannerzest banner 800 px wide (840 - 40 = 800) This is for this theme only. Other themes use the entire page width. The height of your banner will depend on the height that you've selected within the theme. (see Banner height at right)
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Pretty snazzy, huh?
Spectrum
The Spectrum theme from Robbie White, generous sponsor of this site!
Note on 9-24-08.... discovered a slight display problem on IE7 with this modified theme only. Robbie has been contacted and we're looking for a solution. Stay tuned for more info.
The instructions are as follows:
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. For example, this site was created using the 686px width option so I made the banner 686 pixels wide. The default height for the image in the header in this theme is 250px.
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) You are going to scroll down a LONG ways. The code you're looking for is down near the bottom. The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Place your cursor right before the div that follows site_slogan. Hit the enter key once to create a blank line which will move div down a space. Move your cursor back up to the blank space you just created and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Add the CSS There is one more bit of business that is unique to this theme. You need to add some code to the Page Inspector>Header>CSS panel. (see Add the CSS at right)
the code you'll insert is:
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Pretty cool, huh?
Note on 9-24-08.... discovered a slight display problem on IE7 with this modified theme only. Robbie has been contacted and we're looking for a solution. Stay tuned for more info.
The instructions are as follows:
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. For example, this site was created using the 686px width option so I made the banner 686 pixels wide. The default height for the image in the header in this theme is 250px.
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
the code you'll insert is:
#navcontainer1{margin-top: -255px;}Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Pretty cool, huh?
Film
The Classic Rapidweaver theme from Henk Vrieselaar.
The instructions are as follows:
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. For example, the sample site was created using the 800px width option so I made the banner 800 pixels wide. The default height for the image in the header in this theme is 230px. I also added the "Ken Burns effect" to the banner so it appears that the camera is panning across the photos and zooming gently. Not necessarily my favorite effect but though I'd show some possible variations. The banner was created with the theme's stock images.
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Place your cursor right before the /div that follows site_slogan. Hit the enter key once to create a blank line which will move /div down a space. Move your cursor back up to the blank space you just created and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Pretty rad, huh, Dude? (that's surfer-speak)
The instructions are as follows:
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. For example, the sample site was created using the 800px width option so I made the banner 800 pixels wide. The default height for the image in the header in this theme is 230px. I also added the "Ken Burns effect" to the banner so it appears that the camera is panning across the photos and zooming gently. Not necessarily my favorite effect but though I'd show some possible variations. The banner was created with the theme's stock images.
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Pretty rad, huh, Dude? (that's surfer-speak)
Mondrian
A brand new Rapidweaver theme from Henk Vrieselaar.
The instructions are as follows:
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. For example, this site was created using the 900px width option so I made the banner 900 pixels wide. The default height for the image in the header in this theme is 250px. I also added the "Ken Burns effect" to the banner so it appears that the camera is panning across the photos and zooming gently. Not necessarily my favorite effect but though I'd show some possible variations. The banner was created with the theme's stock images.
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) You are going to scroll down a LONG ways. The code you're looking for is down near the bottom. The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Place your cursor right before the div that follows site_slogan. Hit the enter key once to create a blank line which will move div down a space. Move your cursor back up to the blank space you just created and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Not too shabby!
The instructions are as follows:
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. For example, this site was created using the 900px width option so I made the banner 900 pixels wide. The default height for the image in the header in this theme is 250px. I also added the "Ken Burns effect" to the banner so it appears that the camera is panning across the photos and zooming gently. Not necessarily my favorite effect but though I'd show some possible variations. The banner was created with the theme's stock images.
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Not too shabby!
Susurrus
The Susurrus theme is available from weaverthemes.
The instructions are as follows:
Banner
height
Make your Bannerzest banner 22px narrower that the width of your theme. For example, if you've chose the 800 px width for your Rapidweaver project, make the Bannerzest banner 778 px wide (800 - 22 = 778) This is for this theme only. Other themes use the entire page width. The height of your banner will depend on the height that you've selected within the theme. (see Banner height at right)
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Place your cursor right after the "div" with the id of "banner". Hit the enter key once to create a blank line which will create a blank line beneath "banner" . Move your cursor to the blank space you just created and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
That wasn't tough, was it?, huh?
The instructions are as follows:
height
Make your Bannerzest banner 22px narrower that the width of your theme. For example, if you've chose the 800 px width for your Rapidweaver project, make the Bannerzest banner 778 px wide (800 - 22 = 778) This is for this theme only. Other themes use the entire page width. The height of your banner will depend on the height that you've selected within the theme. (see Banner height at right)
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
That wasn't tough, was it?, huh?
Catalyst
The Catalyst theme is available from weaverthemes.
I've done something a bit different for this web page banner. All the images in the banner are the same. I've just added some text to each of the five images in a slightly different location. This allows the message to slowly appear one line at a time. Also, the static background image is an exact duplicate of the image used to create the banner so the transition from static to animated banner is invisible!!
The instructions are as follows:
Banner
height
Make your Bannerzest banner 22px narrower that the width of your theme. For example, if you've chose the 700 px width for your Rapidweaver project, make the Bannerzest banner 78 px wide (700 - 22 = 678) This is for this theme only. Other themes use the entire page width. The height of your banner will depend on the height that you've selected within the theme. (see Banner height at right)
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. I think this theme developer anticipated us coming here because there is a place made just for us! Place your cursor right in between "div" with the id of "banner" and the "/div". Just paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
This is getting easier each time I do it.
I've done something a bit different for this web page banner. All the images in the banner are the same. I've just added some text to each of the five images in a slightly different location. This allows the message to slowly appear one line at a time. Also, the static background image is an exact duplicate of the image used to create the banner so the transition from static to animated banner is invisible!!
The instructions are as follows:
height
Make your Bannerzest banner 22px narrower that the width of your theme. For example, if you've chose the 700 px width for your Rapidweaver project, make the Bannerzest banner 78 px wide (700 - 22 = 678) This is for this theme only. Other themes use the entire page width. The height of your banner will depend on the height that you've selected within the theme. (see Banner height at right)
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
This is getting easier each time I do it.
B Stealth
A very nice Rapidweaver theme from relative newcomer, Nick, at Rapid-Refills
The instructions are as follows:
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. For example, the sample site was created using the 800px width option so I made the banner 800 pixels wide. The default height for the image in the header in this theme is 202px. These theme also displays the header images with a slightly rounded corner. I matched that corner radius by applying a 5% corner radius in Bannerzest I chose a slightly different transition for this theme just to show another variation. the images slide from right to left. Not necessarily my favorite effect but though I'd show some possible variations. The banner was created with a few of the theme's stock images.
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Place your cursor right before the /div that follows site_slogan. Hit the enter key once to create a blank line which will move /div down a space. Move your cursor back up to the blank space you just created and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
A nice look for the B Stealth theme
The instructions are as follows:
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. For example, the sample site was created using the 800px width option so I made the banner 800 pixels wide. The default height for the image in the header in this theme is 202px. These theme also displays the header images with a slightly rounded corner. I matched that corner radius by applying a 5% corner radius in Bannerzest I chose a slightly different transition for this theme just to show another variation. the images slide from right to left. Not necessarily my favorite effect but though I'd show some possible variations. The banner was created with a few of the theme's stock images.
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
A nice look for the B Stealth theme
Vertical Image
The Vertical Image theme from Henk Vrieselaar
This is a very nice, customizable theme. It is also the only one I know of that has a vertical image in the header area, hence the name, Vertical Image. The demo page you can view of this modification has some very nice background textures displayed. All of these come standard with the theme! I'd like to thank Henk for his help in making this modification possible.
The instructions are as follows:
This theme is a bit different than most as the banner in the header is much taller than it is wide. Make your Bannerzest banner 178 pixels wide and 400 pixels tall. On this theme I used the Quadratto theme from Bannerzest. I also went with images of Olympic athletes for a change of pace.
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Place your cursor right after the "shadow" div and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Ok, there's a couple of additional steps for this modification:
1) right-click the following link and download a small zipped copy of an image called "shadow.png" Once you've downloaded it, double-click the zip file to expand it and you'll be ready for step 2.
shadow.png
2) navigate to the theme's Contents>images>bg folder and drop the new "shadow.png" file that you just unzipped here. There is already a "shadow.png" file here and you'll be asked if you want to replace it. Of course you do or we wouldn't have gone to all this trouble, right? Besides, since you are working with a duplicate copy of this theme, the original "shadow.png" file is still in the original copy of the theme.
Add the CSS
3) There is one more bit of business that is unique to this theme and this modification. You need to add some code to the Page Inspector>Header>CSS panel. (see Add the CSS at right)
the code you'll insert on each page is:
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
That wasn't so tough, was it?
This is a very nice, customizable theme. It is also the only one I know of that has a vertical image in the header area, hence the name, Vertical Image. The demo page you can view of this modification has some very nice background textures displayed. All of these come standard with the theme! I'd like to thank Henk for his help in making this modification possible.
The instructions are as follows:
This theme is a bit different than most as the banner in the header is much taller than it is wide. Make your Bannerzest banner 178 pixels wide and 400 pixels tall. On this theme I used the Quadratto theme from Bannerzest. I also went with images of Olympic athletes for a change of pace.
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Ok, there's a couple of additional steps for this modification:
1) right-click the following link and download a small zipped copy of an image called "shadow.png" Once you've downloaded it, double-click the zip file to expand it and you'll be ready for step 2.
shadow.png
2) navigate to the theme's Contents>images>bg folder and drop the new "shadow.png" file that you just unzipped here. There is already a "shadow.png" file here and you'll be asked if you want to replace it. Of course you do or we wouldn't have gone to all this trouble, right? Besides, since you are working with a duplicate copy of this theme, the original "shadow.png" file is still in the original copy of the theme.
3) There is one more bit of business that is unique to this theme and this modification. You need to add some code to the Page Inspector>Header>CSS panel. (see Add the CSS at right)
the code you'll insert on each page is:
#pageHeader { border: none; padding-top: 1px;}#shadow{ margin-top: -1px;}Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
That wasn't so tough, was it?
CA Sphere
The Sphere theme is available from rapid-ideas.
I want to publicly thank Rapidweaver forum-participant, David Hidding, (forum id: dhidding) for suggesting this theme and then, when finding out I didn't own it, for buying another copy of it just for this project and emailing me the download link. Rapidweaver users are the best!!
The instructions are as follows:
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. For example, the sample site was created using the 700px width option so I made the banner 700 pixels wide. The theme has a range of available banner heights through the page inspector and I chose 260 pixels. therefore, my Bannerzest banner was created at 700px wide by 260px tall.
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Just place your cursor in the spot indicated and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
That was a walk in the park!!
I want to publicly thank Rapidweaver forum-participant, David Hidding, (forum id: dhidding) for suggesting this theme and then, when finding out I didn't own it, for buying another copy of it just for this project and emailing me the download link. Rapidweaver users are the best!!
The instructions are as follows:
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. For example, the sample site was created using the 700px width option so I made the banner 700 pixels wide. The theme has a range of available banner heights through the page inspector and I chose 260 pixels. therefore, my Bannerzest banner was created at 700px wide by 260px tall.
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
That was a walk in the park!!
CA Diamond (revised 10-1-08)
The Diamond theme is available from rapid-ideas who graciously donated the theme for use in this project.
This modification is a bit tricky so pay close attention, ok? The default width shown in the style portion of the Page Inspector is 720px. However, that is a misprint and it is really 780px. (trust me on this one, ok?) Other page widths are correct. Also, I have been unable to find a way to have the static image "behind" the Bannerzest banner with this theme. Therefore, I've included a bit of code to enlarge the colored area that is behind the banner. This provides a nice backdrop that matches the theme's color scheme as the banner loads. This also allows the use of a slightly taller Bannerzest banner than would otherwise be possible.
The instructions are as follows:
Right-click the following link and download a small zipped copy of a text file called "CA_Diamond_code" Once you've downloaded it, double-click the zip file to expand. You'll need the code contained in this file in a few minutes.
CA_Diamond_code
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. (except make it 780px wide for the default size, remember?) For example, the sample site was created using a 780px width option so I made the banner 780 pixels wide. Make your banner 246 px tall. Therefore, my Bannerzest banner was created at 780px wide by 246px tall.
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right) You may want to hold off for a minute or two before copying that code as I'm going to have you copy something else first.
TextWrangler
The final step is to open the theme's index.html file with the text editor you've selected and paste some code I'll provide along with the Bannerzest code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here 1
Paste here 2
Scroll through the code until you find a place that matches that shown in the photo (see Paste here 1 at right) You have two pieces of code to paste in this modification. They are both located in the file you downloaded a few minutes ago. Copy the first bit of code shown in red from the text file and paste it as shown in "Paste here 1"
Now, go back to Bannerzest and copy the code for your banner. You want to paste the Bannerzest code in the right spot (see Paste here 2 at right). Just place your cursor in the spot indicated and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, there is one more task to accomplish. From the downloaded text file, copy the second bit of code shown in red and paste into Page Inspector>Header>CSS field (place on every page of your project). That oughtta do it! That was the toughest modification yet but I think you'll agree, the results are worth it!!
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
That was easy as pie!!
This modification is a bit tricky so pay close attention, ok? The default width shown in the style portion of the Page Inspector is 720px. However, that is a misprint and it is really 780px. (trust me on this one, ok?) Other page widths are correct. Also, I have been unable to find a way to have the static image "behind" the Bannerzest banner with this theme. Therefore, I've included a bit of code to enlarge the colored area that is behind the banner. This provides a nice backdrop that matches the theme's color scheme as the banner loads. This also allows the use of a slightly taller Bannerzest banner than would otherwise be possible.
The instructions are as follows:
Right-click the following link and download a small zipped copy of a text file called "CA_Diamond_code" Once you've downloaded it, double-click the zip file to expand. You'll need the code contained in this file in a few minutes.
CA_Diamond_code
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. (except make it 780px wide for the default size, remember?) For example, the sample site was created using a 780px width option so I made the banner 780 pixels wide. Make your banner 246 px tall. Therefore, my Bannerzest banner was created at 780px wide by 246px tall.
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right) You may want to hold off for a minute or two before copying that code as I'm going to have you copy something else first.
Now, go back to Bannerzest and copy the code for your banner. You want to paste the Bannerzest code in the right spot (see Paste here 2 at right). Just place your cursor in the spot indicated and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, there is one more task to accomplish. From the downloaded text file, copy the second bit of code shown in red and paste into Page Inspector>Header>CSS field (place on every page of your project). That oughtta do it! That was the toughest modification yet but I think you'll agree, the results are worth it!!
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
That was easy as pie!!
M Press
The M Press theme is available from relative newcomer, Nick Cates, at Rapid-Refills.
This modification is a bit tricky so pay close attention, ok?
The instructions are as follows:
Turn off the M Header feature in the page inspector. we don't want the banner images that change back and forth with a mouse-over for this technique.
Right-click the following link and download a small zipped copy of a text file called "M_Press_code" Once you've downloaded it, double-click the zip file to expand. You'll need the code contained in this file in a few minutes.
M_ Press_ code
Make your Bannerzest banner the same width as the default images, 806px. Make your banner 225 px tall. Therefore, my Bannerzest banner was created at 806px wide by 225 px tall.
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right) You may want to hold off for a minute or two before copying that code as I'm going to have you copy something else first.
TextWrangler
The final step is to open the theme's index.html file with the text editor you've selected and paste some code I'll provide along with the Bannerzest code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here 1
Paste here 2
Scroll through the code until you find a place that matches that shown in the photo Make a line beneath the --title-- line.(see Paste here 1 at right) You have two pieces of code to paste in this modification. They are both located in the file you downloaded a few minutes ago. Copy the first bit of code shown in red from the text file and paste it as shown in "Paste here 1"
Now, go back to Bannerzest and copy the code for your banner. You want to paste the Bannerzest code in the right spot (see Paste here 2 at right). Just place your cursor in the spot indicated and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, there is one more task to accomplish. From the downloaded text file, copy the second bit of code shown in red and paste into Page Inspector>Header>CSS field (place on every page of your project). That oughtta do it! That was one of the the toughest modification yet but I think you'll agree, the results are worth it!!
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
That was as easy as falling off a log!!
This modification is a bit tricky so pay close attention, ok?
The instructions are as follows:
Turn off the M Header feature in the page inspector. we don't want the banner images that change back and forth with a mouse-over for this technique.
Right-click the following link and download a small zipped copy of a text file called "M_Press_code" Once you've downloaded it, double-click the zip file to expand. You'll need the code contained in this file in a few minutes.
M_ Press_ code
Make your Bannerzest banner the same width as the default images, 806px. Make your banner 225 px tall. Therefore, my Bannerzest banner was created at 806px wide by 225 px tall.
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right) You may want to hold off for a minute or two before copying that code as I'm going to have you copy something else first.
Now, go back to Bannerzest and copy the code for your banner. You want to paste the Bannerzest code in the right spot (see Paste here 2 at right). Just place your cursor in the spot indicated and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, there is one more task to accomplish. From the downloaded text file, copy the second bit of code shown in red and paste into Page Inspector>Header>CSS field (place on every page of your project). That oughtta do it! That was one of the the toughest modification yet but I think you'll agree, the results are worth it!!
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
That was as easy as falling off a log!!
Caribou - I'm in Alaska so I know about caribou!!
This is a theme all of us have as it comes with the rapidweaver package! I'm also including some trivia in this tutorial. it's both Fun and educational! : 1) A reindeer is a domesticated Caribou!! 2) Both make tasty sausages!!
Swirls This theme is different that those we've tackled previously because it does not have a default image in the header and does not contain editable images. We won't let that slow us down. It just involves some extra steps. First, make sure you open the page inspector and under "styles", select "Banner Design" and choose "Swirls". (see Swirls at right) We're going use some code a bit later to tell browsers to ignore the "swirls" so it is important that you've selected it.
I am making the Bannerzest banner using photos I took at a local reindeer farm during one of my Mom and Dad's visits.
Make your Bannerzest banner 900px wide and 150px tall. In mine, I also added the "Ken Burns effect" to the banner so it appears that the camera is panning across the photos and zooming gently. Not necessarily my favorite effect but though I'd show some possible variations. The banner was created with some pictures I took at the local reindeer farm during a visit by my Mom and Dad. Since this theme's Title and Slogan are set to display in the center of the header image, I used Bannerzest's "iris" transition so that each new picture opens starting from a rectangle in the center of the banner, right below the Title and Slogan!!
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Place your cursor right after the /div that says id=logo. Paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save and we'll do a couple more items.
Our goal in previous tutorials has been to have a static image in place that matches the first image in the Bannerzest banner so that the viewer sees something while the banner loads that matches the banner. We'll have to import that image into our project using some CSS. I've called that image "img1.jpg" and so should you so that it matches the code we'll use later. Take that 900px X 150px image called "img1.jpg" and drop it into the theme's "images" folder. This folder should still be accessible from when you opened the theme's "contents" folder a few steps ago.
Now that the image is saved to our theme, we'll add some code to the Page Inspector>Header>CSS pane in Rapidweaver that will have our new image display instead of the orange background that this theme normally displays. We'll also add some code which turns off the orange swirls that we chose earlier under "styles". Paste the following into the Page Inspector>Header>CSS pane of every page in Rapidweaver:
background: #fff url(images/img1.jpg) no-repeat left top;
}
#pageHeader #overlay_swirls {
display: none!important;
}
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Not too difficult, right?
I am making the Bannerzest banner using photos I took at a local reindeer farm during one of my Mom and Dad's visits.
Make your Bannerzest banner 900px wide and 150px tall. In mine, I also added the "Ken Burns effect" to the banner so it appears that the camera is panning across the photos and zooming gently. Not necessarily my favorite effect but though I'd show some possible variations. The banner was created with some pictures I took at the local reindeer farm during a visit by my Mom and Dad. Since this theme's Title and Slogan are set to display in the center of the header image, I used Bannerzest's "iris" transition so that each new picture opens starting from a rectangle in the center of the banner, right below the Title and Slogan!!
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Our goal in previous tutorials has been to have a static image in place that matches the first image in the Bannerzest banner so that the viewer sees something while the banner loads that matches the banner. We'll have to import that image into our project using some CSS. I've called that image "img1.jpg" and so should you so that it matches the code we'll use later. Take that 900px X 150px image called "img1.jpg" and drop it into the theme's "images" folder. This folder should still be accessible from when you opened the theme's "contents" folder a few steps ago.
Now that the image is saved to our theme, we'll add some code to the Page Inspector>Header>CSS pane in Rapidweaver that will have our new image display instead of the orange background that this theme normally displays. We'll also add some code which turns off the orange swirls that we chose earlier under "styles". Paste the following into the Page Inspector>Header>CSS pane of every page in Rapidweaver:
#pageHeader #logo { background: #fff url(images/img1.jpg) no-repeat left top;
}
#pageHeader #overlay_swirls {
display: none!important;
}
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Not too difficult, right?
Designer Colors
This is the Designer Colors theme from Charlie Lockhart at Blueballdesign.
I got my inspiration for the Bannerzest banner I've used on this theme from one of the stock images. There is a beautiful sunset picture in the theme and I added additional sunset images for the banner. As is our goal, I made the theme's static image, the sunset, Custom_Img05, the first picture in my banner so there is a seamless transition between static and animated display.
Make your banner the same dimensions as the theme's stock images, 589 px wide X 171 px tall.
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Find the div with the id of content-logo. Place your cursor between the % and the < . Just paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
This one was a very easy modification!
I got my inspiration for the Bannerzest banner I've used on this theme from one of the stock images. There is a beautiful sunset picture in the theme and I added additional sunset images for the banner. As is our goal, I made the theme's static image, the sunset, Custom_Img05, the first picture in my banner so there is a seamless transition between static and animated display.
Make your banner the same dimensions as the theme's stock images, 589 px wide X 171 px tall.
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
This one was a very easy modification!
RWT Franchise
The Franchise theme is available from Gary Byrd at rapidweaverthemes.
I've created the Bannerzest banner for this project with the 5 stock, colored images from the theme. I've used Bannerzest's TextSlideShow theme which is available only in the pro version of the application.
The instructions are as follows:
Make your Bannerzest banner 834 pixels wide by 200 pixels tall. The reason the banner is 834 wide is that the Rapidweaver theme is 840 pixels wide and it has a 3 pixel wide border on each side so, 840 - 3 - 3 = 834!
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Place your cursor right after the "%" which follows "logo" and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
I can't believe how easy this one was!
I've created the Bannerzest banner for this project with the 5 stock, colored images from the theme. I've used Bannerzest's TextSlideShow theme which is available only in the pro version of the application.
The instructions are as follows:
Make your Bannerzest banner 834 pixels wide by 200 pixels tall. The reason the banner is 834 wide is that the Rapidweaver theme is 840 pixels wide and it has a 3 pixel wide border on each side so, 840 - 3 - 3 = 834!
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
I can't believe how easy this one was!
Theme 006
The Rapidweaver theme from theme-weaver.
The instructions are as follows:
I've enabled the sidebar in this theme which means the header image is 535 pixels wide. therefore, I made the bannerzest banner 535 pixels x 200 pixels tall. I used some photos I'd taken of some Alaskan Fireweed and also added the "Ken Burns effect" to the banner so it appears that the camera is panning across the photos and zooming gently. I chose these photos because the color of the flowers complement the colors I chose in the Rapidweaver theme's color-picker The banner was created with the theme's stock images.
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Place your cursor right after > symbol that follows header". Just paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Doesn't get much easier than that, right?
The instructions are as follows:
I've enabled the sidebar in this theme which means the header image is 535 pixels wide. therefore, I made the bannerzest banner 535 pixels x 200 pixels tall. I used some photos I'd taken of some Alaskan Fireweed and also added the "Ken Burns effect" to the banner so it appears that the camera is panning across the photos and zooming gently. I chose these photos because the color of the flowers complement the colors I chose in the Rapidweaver theme's color-picker The banner was created with the theme's stock images.
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Doesn't get much easier than that, right?
Pieces of Paper
The Pieces of Paper Rapidweaver theme from Henk Vrieselaar.
The instructions are as follows:
This modification is a bit tricky so pay close attention, ok? Make your Bannerzest banner 770 px wide by 150 px tall. I also used some of the "torn paper" image overlays inside the theme and Photoshop to make all the images in the banner look torn but you don't have to do that. The banner was created from some photos I took during a trip to Bryce Canyon National Park in Utah.
You'll need a bit of code for this modification. You can download a text file with it here. The instructions are as follows:
Right-click the following link and download a small zipped copy of a text file called "piecesofpaper" Once you've downloaded it, double-click the zip file to expand. You'll need the code contained in this file in a few minutes.
piecesofpaper
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right) You may want to hold off for a minute or two before copying that code as I'm going to have you copy something else first.
TextWrangler
The next step is to open the theme's index.html file with the text editor you've selected and paste some code I'll provide along with the Bannerzest code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here 1
Paste here 2
Scroll through the code until you find a place that matches that shown in the photo (see Paste here 1 at right) You want to create a blank line beneath h2 and slogan code and above that /div code. You have two pieces of code to paste in this modification. The first bit of code is called "code 1" and is in red in the file you've downloaded:
Now, go back to Bannerzest and copy the code for your banner. You want to paste the Bannerzest code in the right spot (see Paste here 2 at right). Just place your cursor in the spot indicated and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, there is one more task to accomplish. Next you need to copy the blue CSS code from the downloaded file and paste into Page Inspector>Header>CSS field (place on every page of your project).
That oughtta do it! That was one of the toughest modification yet but I think you'll agree, the results are worth it!!
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Pat yourself on the back for a job well-done!!
The instructions are as follows:
This modification is a bit tricky so pay close attention, ok? Make your Bannerzest banner 770 px wide by 150 px tall. I also used some of the "torn paper" image overlays inside the theme and Photoshop to make all the images in the banner look torn but you don't have to do that. The banner was created from some photos I took during a trip to Bryce Canyon National Park in Utah.
You'll need a bit of code for this modification. You can download a text file with it here. The instructions are as follows:
Right-click the following link and download a small zipped copy of a text file called "piecesofpaper" Once you've downloaded it, double-click the zip file to expand. You'll need the code contained in this file in a few minutes.
piecesofpaper
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right) You may want to hold off for a minute or two before copying that code as I'm going to have you copy something else first.
Now, go back to Bannerzest and copy the code for your banner. You want to paste the Bannerzest code in the right spot (see Paste here 2 at right). Just place your cursor in the spot indicated and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, there is one more task to accomplish. Next you need to copy the blue CSS code from the downloaded file and paste into Page Inspector>Header>CSS field (place on every page of your project).
That oughtta do it! That was one of the toughest modification yet but I think you'll agree, the results are worth it!!
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Pat yourself on the back for a job well-done!!
Theme 009
The Rapidweaver theme from theme-weaver.
This theme has three slots for images in the header location. We're going to place a simple Bannerzest banner in each of them. The theme has a few width options but I've selected 900 pixels. The width you select for the theme dictates the width of the three header images. Since I've selected 900 px for theme width, the three banners need to be sized as follows:
• left banner: 270 px wide X 155 px tall,
• center banner: 288 px wide X 155 px tall,
• right banner: 270 px wide X 155 px tall.
The instructions are as follows:
Create and publish your three banners with the sizes shown above.
Publish
Publish the Bannerzest themes to their places on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the codes in the correct locations. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Place your cursor right after > symbol that follows headerpos1" and paste the code for the left banner by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Place your cursor right after > symbol that follows headerpos3" and paste the code for the right banner. Place your cursor right after > symbol that follows headerpos2" and paste the code for the center banner. Now that your codes are inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Doesn't get much easier than that, right?
This theme has three slots for images in the header location. We're going to place a simple Bannerzest banner in each of them. The theme has a few width options but I've selected 900 pixels. The width you select for the theme dictates the width of the three header images. Since I've selected 900 px for theme width, the three banners need to be sized as follows:
• left banner: 270 px wide X 155 px tall,
• center banner: 288 px wide X 155 px tall,
• right banner: 270 px wide X 155 px tall.
The instructions are as follows:
Create and publish your three banners with the sizes shown above.
Publish the Bannerzest themes to their places on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
Doesn't get much easier than that, right?
Newzpaper
This is the Newzpaper theme from Charlie Lockhart at Blueballdesign.
I got my inspiration for the Bannerzest banner I've used on this theme from one of the stock images in another of Bluballdesign's theme's. There is a beautiful tropical beach picture in the theme and I added additional beach images for the banner. I used the theme's 850 px width and, according to the instructions packaged with the theme, made my custom image 755px x 124px. This is also the size of the Bannerzest banner you need to make.. If you choose another width for your project, consult the enclosed "readme" file for image sizing instructions. Also, you need to select a custom image from the "Styles" tab of the Page inspector.... otherwise your banner will hide behind the newspaper.
Also, since this theme looks like a newspaper, I decided to make my demo site a phony newspaper with articles about a get-together for Rapidweaver users on a small island. (As I type this, it is approximately 32 degrees F outside, there is snow on the ground and I'm entitled to fantasize about judging a bikini contest on a tropical island!!!)
NOTE: I turned off the sidebar on the demo page so no navigation is present. You'll obviously do it a bit differently.
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Find the div with the id of customimage. Place your cursor after the > . Just paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
This one was as easy as drinking a rum-laden drink on a warm, tropical beach! ;-)
I got my inspiration for the Bannerzest banner I've used on this theme from one of the stock images in another of Bluballdesign's theme's. There is a beautiful tropical beach picture in the theme and I added additional beach images for the banner. I used the theme's 850 px width and, according to the instructions packaged with the theme, made my custom image 755px x 124px. This is also the size of the Bannerzest banner you need to make.. If you choose another width for your project, consult the enclosed "readme" file for image sizing instructions. Also, you need to select a custom image from the "Styles" tab of the Page inspector.... otherwise your banner will hide behind the newspaper.
Also, since this theme looks like a newspaper, I decided to make my demo site a phony newspaper with articles about a get-together for Rapidweaver users on a small island. (As I type this, it is approximately 32 degrees F outside, there is snow on the ground and I'm entitled to fantasize about judging a bikini contest on a tropical island!!!)
NOTE: I turned off the sidebar on the demo page so no navigation is present. You'll obviously do it a bit differently.
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
This one was as easy as drinking a rum-laden drink on a warm, tropical beach! ;-)
Blendit
The Blendit theme is available from rapid-ideas.
The instructions for the modification of this theme were provided to me by a forum participant with the user name of Lyle. Thanks, Lyle!!
The instructions are as follows:
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. For example, the sample site was created using the 780px width option (the default size) so I made the banner 780 pixels wide. The theme has a range of available banner heights through the page inspector and I chose 240 pixels. therefore, my Bannerzest banner was created at 780px wide by 240px tall.
Publish
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
Copy
When you click this button, you'll be presented with another window (see Copy at right)
TextWrangler
Now we have the necessary code copied to our clipboard. The final step is to open the theme's index.html file with the text editor you've selected and paste the code in the correct location. To open this file, right click the theme in Rapidweaver's theme drawer, choose "Reveal Theme Contents In Finder...". This will present you with a folder called "Contents". Open it and you will find the index.html file. Right click on this file and navigate to your chosen text editor application. In this example I chose TextWrangler. (see Textwrangler at right)
Paste here
Scroll through the code until you find a place that matches that shown in the photo (see Paste here at right) The code you copied from Bannerzest is still on your clipboard. You want to paste it in the right spot. Just place your cursor in the spot indicated and paste in the code from Bannerzest by either choosing edit>Paste from TextWrangler's menu or simply by pressing the Apple-v key combination (command-v). Now that your code is inserted, save the file and view the results.
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
That was a walk in the park!!
The instructions for the modification of this theme were provided to me by a forum participant with the user name of Lyle. Thanks, Lyle!!
The instructions are as follows:
Make your Bannerzest banner the same width as the page width you've selected through the page inspector. For example, the sample site was created using the 780px width option (the default size) so I made the banner 780 pixels wide. The theme has a range of available banner heights through the page inspector and I chose 240 pixels. therefore, my Bannerzest banner was created at 780px wide by 240px tall.
Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)
When you click this button, you'll be presented with another window (see Copy at right)
Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!
That was a walk in the park!!