How to change the header picture in a RapidWeaver theme
All the RapidWeaver themes that use header images allow you to choose from a selection of predefined pictures. You will probably, at some stage, want to put your own pictures in the header.There are a couple of tools you can buy that make this really easy: RWMultiTool and RWThemeMiner. Both are excellent and work well, and both are inexpensive. They may well be all you need.
However, there is a way of altering the header image without 'going inside' the theme and saving new pictures in there. It requires a little CSS knowledge, or at least, the ability to copy and paste a snippet of code. I found out how from the excellent RapidWeaver forum and a little bit from the many CSS tutorials on the Web.
The first step is to make a copy of the Theme you're using. This is a good idea because it means you can't mess up the original theme; you can do what you like to the copy. If the worst comes to the worst and you mess it up beyond recognition, you can always throw away the copy you made and make another. This is how you do it: show the Themes drawer by clicking on the button next to the 'Publish' button at the bottom of the RapidWeaver window. Right-click or Control-click on the Theme itself, and choose 'Duplicate Theme' from the pop-up menu, as you see below:
When you choose 'Duplicate Theme' you'll get a dialog asking you to give the duplicate a name:
Call it whatever you like, and use it for this excercise.
Next step is to prepare the picture you want to use so that it's the same size as the one you're replacing, and you need to know what size that is. Pop up the Themes drawer at the bottom of the RapidWeaver window, and right-click or Control-click on the Theme icon, like we did above when we duplicated the Theme. In the contextual menu that you'll see, choose 'Show Contents'. A Finder window will open showing the contents of the Theme. Depending on who wrote the Theme, there will be a folder called 'images' or 'custom images'. Pick a header picture, and open it in something that will tell you its size; if you don't have Photoshop, Apple's 'Preview' will open it and you can hit Apple-I to Get Info, which will show you the size. Make a note of it, and make your replacement image the same size.
You have no folder structure for the site until you export it; when you do, RapidWeaver makes a series of folders which contain the site. Before you export it, your Finder folder will look like this:
After you export the site, the same folder will look like this
RapidWeaver has made a couple of folders and an HTML file. Now, to use the new header picture that you've made, you need to add it to the site. In RapidWeaver, go to the Page Inspector (Apple-Shift-I) and, in the top section, click the third tab from the left, and highlight the 'Assets' tab. It should look like this:
Click the 'Add Files...' button at the bottom, and in the resulting dialog box, choose the picture you made for your header. This will add your file to the site and RapidWeaver will then be aware of it. Export your site again, and have another look at the Finder folder structure. It will look something like this:
Notice that a folder called 'assets' has appeared inside the 'page1' folder; it contains your new header file.
So far so good. Now, you need to go back to the Page Inspector. Choose the third tab from the left again, and this time, click the CSS tab. Type into it the following:
#pageHeader {
background: url(assets/file.jpg) no-repeat top left
}
It should look like this picture:
