caribou



I'm in Alaska so I know 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
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 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 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)



caribou 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. 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:

#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?