The Plasma Pro theme from Robbie White, original sponsor of this site!

Robbie's themes are very javascript-heavy and there always exists a potential for conflicts with the code generated by BannerZest. However, this modification seems to work quite swimmingly!

The instructions are as follows:
Make your Bannerzest banner the same width as the page width you select through the page inspector. For my demo site I chose an 800 px wide page so my banner is 800 px wide.. The default height for the image in the header in this theme is 160 px.

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 next 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)



Plasma Pro code
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. Paste your code right beneath the pageHeader div . 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.




Plasma Pro CSS
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:

#collapsiblesidebarlink{
    margin-top:-160px;
}
#pageHeader h1{
    margin-top:-30px;
}



NOTE: The " collapsiblesidebarlink " code brings the collapsible sidebar link back up to its proper position. It will align quite nicely in Safari but will be a tad off in other browsers. You can learn how to add a custom sidebar link graphic by visiting my demo site which you can access through the "Showcase" Page. My custom graphics will do away with that non-exact-alignment issue. The " pageHeader " code will reposition the Title and Slogan back in their proper spots. You may adjust the numbers in either piece of code to nudge things up or down.



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

An awesome theme made even awesomer... yeah, I know that's not a real word!