The 3-D Rapidweaver theme from Henk Vrieselaar.


The instructions are as follows:
Make your Bannerzest banner 463 pixels wide by 75 px tall. The banner I made was created with the theme's stock images.

Publish the site and reveal the HTML
Publish


Publish the Bannerzest theme to its place on your server and select "Show HTML" (see Publish at right)




Copy Bannerzest's code to the clipboard
Copy

When you click this button, you'll be presented with another window (see Copy at right)






Use Textwrangler to open index.html
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, create a new "div" to hold our banner 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 code here
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 create the div as shown in the picture and paste your code in the right spot. You need to create a div with an id of "mybanr"....LOOK AT the 'Paste here" image and insure yours looks the same! I cannot type the code on this page because it will NOT display! Create a blank line below the h2/site-slogan div. Place your cursor back up in the blank space you just created and type in the div information 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 BZ code is inserted, we are ready to add the CSS. In the Page Inspector > Header > CSS window of Rapidweaver, paste in the following:

#mybanr{
    margin-top:-2px;
    margin-left:-5px;
}



This will position the BannerZest banner in just the right location.

Remember, when you use this technique and publish your site, send me a link so I can put your site in the showcase!

A tiny banner image with a big impact!!