How to change the header using CSS
Safari Developer tools
There are a few ways to put your own custom picture in the header of a RapidWeaver theme. This method doesn’t require you to duplicate the theme, open any folders within the theme, or to replace any of the theme’s original contents. All you need is a replacement picture the same size as the header area.
Finding the size
You’ll need to know how big the header picture is to start with. If you know already, you can skip this bit and move to the next section. If you don’t, you can use either the excellent and free Firebug plugin for Firefox, or the Developer tools in Safari. You may need to turn on the Developer tools in Safari; to do this, go to the Safari Preferences, Advanced tab, and check the box marked ‘Show Develop menu in menu bar’. Once you have this turned on, you can preview your site in Safari, then right-click on the header image and choose ‘Inspect Element’ from the contextual menu. If you’ve clicked accurately, you should see the image size in the resulting text as shown in the screenshot. If you don’t, click the ‘Resources’ tab at the top of the Developer pane in the bottom half of your screen; there you can see a thumbnail of every image in the site and if you click on it, it will tell you the size. Make a note of it, as it’s the size you need your own custom picture to be. In the screenshot here, I right-clicked on a picture in Safari, chose ‘Inspect Element’, and you can see the code for that picture highlighted in blue, with the size clearly visible. See that ‘Resources’ tab above the code window? That’s where all the images can be seen, and examined. Try it and see!
If you’re using iPhoto, the easiest way is to export one of your pictures at the correct size. In iPhoto, you can crop your picture to the right size and proportion and then, when you export, you can specify what the longest side should measure in pixels.
You can also use Apple’s ‘Preview’ application which comes included with OS X; this will allow you to crop and resize a picture to fit in your header.
So: you have the image that you want to be your custom header. It’s the exact same size of the one that it’s replacing. The first thing you need to do is to put it somewhere RapidWeaver can make use of it, and that is the ‘Resources’ section in the RapidWeaver application sidebar. Just drag the image you intend to use into Resources. For this example, I’m using a file called ‘file.jpg’. Yours will be called something else, of course.
When you have your file in Resources, it’s time to put the CSS code into the custom CSS pane of the Page Inspector. It’s pretty simple code, and it is this:
All it is really saying is: “The URL for the background image of the page header is Resources/file.jpg”
As you can see, CSS is often pretty much like plain English, and once you realise that, you will soon get the hang of it. And that should be it; if you preview your site in RapidWeaver now, your custom header should have replaced whatever was there before.
If it hasn’t, then double-check everything; filenames, CSS, the lot. It’s easy to make a mistake while typing, and leaving off a curly bracket on the CSS, for instance, will stop it working altogether.
The other thing that would stop any of this working properly is if the site’s page header is not called ‘pageHeader’ in the theme’s CSS. This sometimes happens; if it’s a third-party theme, and not one of the ones built into RapidWeaver, then it’s up to the theme’s author what the various parts of the theme are called, and while RapidWeaver make recommendations, not every theme author sticks to them. Even if the header was called ‘pageheader’ instead of ‘pageHeader’, it’d stop it working. Luckily, using either Firebug or the Safari Developer tools as described above, you can tell exactly what the header part is called by simply previewing in Firefox or Safari and right-clicking on the header portion in Safari, or clicking the Firebug icon in Firefox.
The information on this page is completely free, but if you want to make a small donation it will be greatly appreciated …