WebKarnage.com

Working on great projects with cool people...

Editing RapidWeaver Themes - The Basics

Hi one and all! We have written this little tutorial to help those newer RapidWeaver users get to grips with the basics of theme editing. It is a question much asked on the RealMac Forum, and holds the answer to many other questions indirectly. We were using RapidWeaver 4.3.1 (from now referred to as RW) on MacOS 10.6.2, but this should hold fine for many other versions too.

Our Quick Do's and Don'ts.

a) When editing a theme, always work with a duplicate (instructions on duplicating right). This is especially important with default RapidWeaver themes (ones that come with the app) as they are kept inside the app and will be replaced if you update RapidWeaver.
b) Name it according to the intended project (or maybe look) to make things easier in the long run. Using the same edited theme for more than one project can have you undoing your own work!
c) Edits done to the styles.css if put at the end, can be copied into an updated theme's styles.css easily rather than repeating all the work again. Some edit the index.html to point at a replacement stylesheet, but this doesn't make it as easy to take advantage of a theme upgrade, as many of the upgraded elements might be in the styles.css
d) If all you are looking at is adding CSS styles, look at Code Cutter by Varsis Studio. This has the ability to carry your styling edits over to an updated version of a theme with minimal effort, and makes it easy for theme developers to give you support if you think there is an issue with a theme.

Themes vs Plugins

Themes are pre-constructed looks for RW websites, and RW comes with several built in. Visit the Add Ons section of the Realmac site to get yourself a large list to choose from, quite a few of them free! Themes control the look of many components and can have extras built in (dual/split navigation, 3 columns and many more) but must not be confused with Plugins. These give RW different page types, which add ways RW can generate and control content.

Theme Choice

This could have us all putting forward different views for a month! Our main objectives in theme choice are driven by what we can change easily and what takes more work.

We don't choose a theme as the colour choice on the demo site was what we were after, but the navigation is in the sidebar and we want it horizontal across the top of the page. The colours are generally easy to change (many themes let you change some colours in the Page Inspector now) but restructuring the navigation is a complicated and sometimes frustrating task.

After a few bits of theme editing, you will get a feel for which tasks you want to take on, and which you want sorted from the start.

Duplicate The Theme

As in the first steps of the 'Quick Start' section, we need to duplicate our chosen theme. Start RW and open a project (maybe a 'test' or 'working' project). Open the theme selector by clicking on the button in the top toolbar in RapidWeaver 4.x or in RapidWeaver 3.6.7 next to the Publish button (shown on the right here) in the bottom-right hand corner of the main edit window. We now choose the theme we want to edit, right (control) click on it, and from the menu select 'Duplicate Theme'.

Choose your name carefully. We rename our themes with abbreviations of the project and the theme.

Going Deeper...

Now we can right click on the new copy of the theme, and select 'Show Contents'. We now have a finder window open with the theme's contents on show. You will see several files and folders, we will now describe some of what can be achieved editing some of these.

styles.css (or style.css)

This is often people's first target inside the theme. Open this with CssEdit (double click if you have it installed and it will usually open in that), Simple CSS (free), TextWrangler (also free) or similar. Note that if you want to use Text Edit, you will need to select plain text mode. Looking down the file you will see all the areas it addresses. In CSSEdit it will give you Classes on the left, code in the middle, and selectors and menus to change the code on the right. Simple CSS is similar to CSSEdit without live overides and previews.

#pageHeader h1 will define your site title look in most themes, while #pageHeader h2 will be for the slogan. #content will change the look of the content (well I never!) and there are plenty more. Not all themes have all the same classes and ids. In CSS a class is targeted by a period followed by a name (like .image-right for all images with the 'Align Right' HTML format applied in RapidWeaver) and can apply to many things on one page, and an id is targeted with a # followed by a name (like the #pageHeader above) which should be used only once on a page. W3Schools have a great set of online tutorials to get you through the basics of css, Better than that is a book (electronic download) by the awesome Sundog called RWcss. We have our copy, and it's well worth the price. Those of you from the Realmac Forum will be familiar with his great attitude and knowledge. There is also a new free ebook by Jonathan Head from Nimblehost called Theme Easy, a great trip through these ids and classes.

Please remember when editing this file that it is not the onlt CSS file in a theme, and most styles you can apply in the Styles part of the Page Inspector in RapidWeaver rely on loading one of several CSS files. These files are loaded after the styles.css file and therefore take precedence.

index.html

Open this with TextWrangler, TacoHTML or Espresso (right click and chose 'Open With'). This is the html template for each page. There are 'placeholders' or 'tags' in this file with % signs around them, RapidWeaver then replaces each one with the parts of your project. %breadcrumb% for the breadcrumb container, %custom_header% for things placed in the header section of the Page inspector and so on. Moving these components inside the index.html will move these components around your final web page document. A bit of 'trial and terror' can teach you a lot. W3Schools tutorials on html can help too. The recommended editing apps can write a lot of tags for you from menu choices and/or using auto complete, and this can help you learn more of them too. For a free program, we are very impressed with Text Wrangler, but we usually use MacRabbit's Espresso for most hand coding tasks these days.

Theme.plist

Open this with the free PrefSetter or your favourite equivalent. These are the preferences of the theme, showing the options it has available inside RW and more. Near the bottom you will notice the 'short name' of the theme. This will also be the folder name inside the rw_common > themes folders in your published website.

css folder

The css folder contains the small css documents included when certain theme options are employed. They supersede (override) the style.css as mentioned earlier and might move the sidebar to the right or hide it for example. Edit these to change what the relevant theme options achieve.

Images Folder

This houses the images used in the theme, such as buttons, header images, background images and sometimes more. RWMultitool and RWMultitool Lite are used by many for an easy way to get your own images to replace those in the theme by matching them in size and type with the original before replacing.

That's it for now!

There are many other things that can be done with theme editing (construction of your own themes), but this is only a basics tutorial we have tried to keep reasonably brief (not sure we did). Many thanks to the people who have helped us learn on the RealMac Forum, particularly Larry aka Sundog, Ed Brenner, Warrender (Phil), John @ Loghound, John @ AOIMedia, Isaiah @ Yourhead, Mike @ YabDab, kbbrux and many more.