The process of creating a website with Rapidweaver is comprised of two distinct yet interwoven activities:
1) assembling your content into pages and organizing your pages in the site.
2) selecting and modifying your theme.

This tutorial is designed for newcomers to Rapidweaver to answer some common questions about themes and to serve as a framework for theme selection and modification.

If you are really new to Rapidweaver and feeling a bit lost, if you have general questions about basic Rapidweaver functionality, page types and other beginner topics, check out the Rapidweaver 101 tutorial first and view this one second.

You can follow along with this tutorial by first creating a small one page test site. The demo version of Rapidweaver is fine for this purpose.

1. Open Rapidweaver.
2. Choose File>new project.
3. At the lower left corner of your screen, hit the "plus" button to add a page.
4. Select the Page Type "Styled Text".
5. In the main body of the screen you see a large empty white page.
6. This is the Edit Pane.
7. Enter some nonsense text there...a small paragraph is fine.
8. Choose File>Save and save this website right onto your desktop for now, calling it what you wish.
9. Returning to your project, hit PREVIEW.

You will now see your content surrounded by the "Alpha" theme. Alpha is selected simply because it came with Rapidweaver and is the first theme in the theme drawer. To change the theme, you would open your Theme Drawer by selecting view>show themes or clicking on the theme drawer icon on the top menu bar in RW4 or at the lower right in RW3.6. Click on a theme to select it, close the drawer and hit Preview again.

But for now, let's return to the tutorial...

The Rapidweaver manual defines themes as “website page templates that include the basic layout and architecture of each page”. In short, the theme is the “look” of the site, dictating both aesthetic and structural design elements including the navigation system, size, content and placement of headers, sidebars, footers, borders, etc.

A theme is a set of files which includes CSS ( Cascading Style Sheet) documents, HTML documents, images, icons and various other elements which have been selected or authored by the Theme Developer.

A Theme is a tool which you can use repeatedly, applying it to more than one website. A fair analogy would be the templates you might use in Word, Excel or Powerpoint ( or Pages, Numbers and Keynote ) but a theme is not quite the same as a template - this is a critical point!

It is very important to make the distinction between a Rapidweaver theme and a more typical web “template” which you might be familiar with from other website creation programs and tools. Generally, templates are fixed, offering no, or at best, very limited variability: you select a template mostly for its appearance. Rapidweaver themes, in contrast, offer extensive variability & can be modified along many parameters, allowing you to customize your website. In fact, you can alter a theme so much that your final product bears little resemblance to the basic theme default style which you viewed when you initially selected the theme for use.

All themes can be modified, but some are easier to modify than others, because some theme developers offer pre-formatted theme styles & in-built variations (or options) which allow you to create your own theme styles. Think of themes as existing on a continuum : from the most flexible, professional themes with extensive variations in-built on one end, to the most basic themes on the other end, offering no built-in variations. These basic themes can be modified too, but you have to work a little harder to do it! Recognizing the different types of themes & understanding your options for theme modification will shape your approach to theme selection. I will go back to the topic of the “continuum of themes” and theme selection below....but first -

It would be helpful at this point to be sure you can find the Theme Styles Pane of the Page Inspector. Open a Rapidweaver site if you do not have one open, open the Page Inspector (in RW4 the button is labeled Page Info) and select the 4th pane of the Page Inspector. The official name for this Pane is the “Theme Styles” pane but for now I will call the "Color Wheel" Pane for clarity.

OK, now keep reading...

There are three basic mechanisms for theme modification:

• Modifying the Theme Style
• Inserting code in the CSS Panel
• Editing the Theme Files

You are likely to use all of these mechanisms in concert.

A “theme style” is a customized look for a given theme. Each theme comes with a "default theme style" which is what you see when you first view the theme, but alternative styles can be created typically using different colors and other varying options. These alternative styles can be named and saved.

An appropriate analogy is when a Home Builder offers one basic floor plan ( or theme ), but makes it available with various siding materials and color options, varying window styles, and even different facades: each house looks different, but everybody has essentially the same house!

A theme style literally is a “variation on a theme”.

You can modify your theme through the use and manipulation of theme styles in two ways:
1) by adopting and then possibly altering one of the "Pre-formatted Theme Styles" which the theme developer gives you or
2) by using the Theme Variations

Some themes come pre-packaged with a set of styles which the theme developer has put together for you. I call these “pre-formatted theme styles” to distinguish them from theme styles you will create yourself.

You can access the pre-formatted theme styles on the color wheel pane. The pre-formatted theme styles will either be listed
a) in the body of that pane as “styles” or
b) under the folder tab at the bottom of the same pane.

To try viewing some alternative theme styles,

• Open your theme drawer, select the Caribou theme which came with Rapidweaver, then close your theme drawer.
• Hit preview: you will see the theme default style for Caribou.
• Now open the page inspector and navigate to the color wheel pane.
• At the bottom of the page inspector is a little folder in which you will see additional styles for Caribou, such as “green-grey” etc. Preview these pre-formatted theme styles to see how your website changes.

It is important to note that once you have selected a pre-formatted theme style, you can then make additional changes using theme variations ( discussed next )....So any of these pre-formatted theme styles can serve as a starting point for your design.

Most ( again not all ) themes incorporate in-built variations or options. The theme variations menu is found right in the main body of the color wheel pane.

You can use these variations to create a custom look for your site, or vary the look of your site as needed from page to page.

You can save your custom styles ( look under the cog wheel at the bottom of the page inspector) - and you can also set a style as the Master Style for your project.

Returning to our example, the Alpha theme - shown in the illustration above - allows you to customize the width of your page, the location of the sidebar and certain colors. Playing around with these, you can begin to see how much variation you can easily achieve with this one theme.

The term CSS or “Cascading Style Sheet” refers to the programming document(s) which controls the look and structure of your site. Everything from the width of the page to the font selections available to the basic coloring of a theme style is dictated in the theme files by the CSS documents which the theme developer wrote.

However, in Rapidweaver, you can override the CSS built into a theme by inserting lines of CSS code into the CSS panel in the Header section of the Page Inspector.

The code you insert here can be simple or quite complex. A simple example would be: #pageHeader h1 {font-size: 4.2em; letter-spacing: 4.0px; }
This line in the CSS panel would make the Header Title of the website particularly large on that one page to really stand out.

Code added to the CSS panel is Page Specific.

Note here: my coding background is NIL: I have learned this by reading and asking on the forums.

This is the most complex level of theme modification: you are actually opening the contents/files of your theme and making changes, not just selecting among variations.

Theme modifications or edits can be made for many purposes, but are typically used to make more extensive theme changes or to make global changes ( since changes on the CSS panel will only apply to one page ). While some of these changes can be quite complex and require knowledge of CSS code, even a beginner can get the hang of this and find it handy for uses such as inserting customized header images into a theme.

If you want to have a look at your theme contents or play around with this, follow these steps:

• open the theme drawer
• right click on the theme
• select Duplicate Theme and give your new copy a useful/distinctive name and select this new copy as the active theme. ALWAYS WORK ON A COPY OF YOUR THEME IF YOU ARE MAKING MODIFICATIONS SO YOU CAN PRESERVE THE ORIGINAL.
• now right click on the (copy of the) theme and select Show Contents or Reveal Theme contents in Finder.

I am not going to use this tutorial to tell you how to make theme modifications, but felt it was important for you to know that it could be done and where you do it. If you want to learn more about editing your theme you can:

• Check out Karn’s tutorial on theme editing here
• Consider enrolling in Rapidweaver Classroom: this is an excellent - but fee based - visual learning site for Rapidweaver or check out Supportcasts.
• Finally, if you really want to dig into theme modification, here is a link to buy Sundog’s book on the topic ...a really comprehensive education on using CSS to modify themes.

and now, back to The Continuum of Themes!

Some themes come with no pre-formatted theme styles and no or few theme variations. Sometimes these are older themes... or themes from new developers who have just begun publishing... or hobbyists who do this for fun and give their themes away.

Sometimes they are the Realmac themes like Autumn, which has no pre-formatted theme styles and the theme variations are limited to sidebar placement. Of course, you can alter the Autumn theme using the CSS panel or by modifying the contents of the theme but you need to either be prepared to do that or know that this theme is the look you want “as-is”.

Some themes offer a “fair to moderate” amount of variability, with a few theme styles and some theme variations and as always, the ability to customize further through the CSS panel or theme editing. Most of the themes which come with Rapidweaver ( from Realmac) fall into this category.

You have already had a look at Alpha. Peruse some of the other themes which came with Rapidweaver; you will begin to see how some of them have fewer inbuilt options and some have more. Again, any theme can be modified, but the themes with greater inbuilt theme variation offer much greater ease in making modifications quickly.

Whenever you consider selecting a theme for use, examine it...look at MORE THAN just its default appearance... look at the available styles and variations so you know how easy modifications will be if you decide to make some.

Some themes are extremely variable, with extensive inbuilt flexibility. For purposes of this tutorial I am going to call these “pro themes”. These themes are ( by and large) created by third party developers, offer far more variability than the Realmac themes and can be purchased for between 10 and 20USD. I will point out that Realmac does not directly support third party products, but they do facilitate your obtaining support on the forums.

If you use the pro themes, your theme selection process will shift and you will find that you choose a theme based more on its structure and less on aesthetic issues, like colors, because often with the pro themes, all of the colors can be easily changed in the color wheel pane.

The pro themes are often very visually interesting and up to date with the latest web design trends, so you might choose to use them as they come; but they also can serve as a launch pad for your own creativity or as a bare framework for your own design. There are several themes for which you can “turn everything off” to achieve a simple solid colored page with just the barest navigation structure in place...or perhaps turn off several visual elements and just retain those specific design features which appeal to you. Many of the pro theme come with “empty” header slots on the presumption that you might want to insert your own header photo...so the possibilities really become limitless with the pro themes. In fact, endless obsessive theme tweaking could become a problem!

If you want to see what can be done with theme variations, or for inspiration, check out www.rapidweaved.com.

Here is a list of the major theme designers.

You can buy themes directly from the designers or through the Realmac Add-ons Page.

Some, though not all, of the Pro Theme designers allow you to download and try their themes before you buy them, which is enormously helpful. If this functionality is enabled, the "down arrow" button on the Realmac add-ons page will automatically download a demo copy of the theme. Two of my favorite theme makers, Rapid Ideas and Seydesign offers demos, so check them out when you're shopping for a theme!





Finally, here are two links for free themes with incredible flexibility & huge number of variations from 2 well regarded and talented pro developers. This will give you an idea of what it is like to work with a professionally crafted theme. Have fun playing with them!
Arrange from Henk Vrieselaar
Various Open Source themes from Seydesign.

COPY COPY COPY! ok, that is three words.

Remember, a theme can be used repeatedly. For this and other reasons too, it is important to keep a copy of your theme intact in its original state. If you are going to modify the theme, make a copy of it first and give the copy a memorable name incorporating the original theme name and the project or client name... such as “Alpha-Pet Grooming”.

In fact, when I start a new site and think I have settled on a theme, I ALWAYS start by making a copy of the theme for that specific project: you never know when you might decide to modify the theme! I find it cleaner/more organized to make copying the theme an early part of the process.

It is possible to build your own custom Rapidweaver theme. You can learn how by downloading the Rapidweaver theme SDK.

...or even as a novice, you can effectively build-a-theme using the Blocks plugin from YourHead Software together with the Blocksbox theme from Jonasthemes or the combination of Yourhead's Stacks plugin and the innovative Freestack theme from Blueball design.

Blocksbox and Freestack are “blank slate” themes, with not even the navigation menus in place, but they still offer you the convenience of theme variation functionality. Blockbox requires you to use Blocks as the plugin for every page and Freestack requires you to use a Stacks page for every page. Much more information on these two options can be found on the forums.

That's it!

I hope tutorial proves useful in providing a fuller understanding of how themes function within Rapidweaver and the ways in which you can modify the themes to fit your vision.

This is my first Rapidweaver Tutorial, so I really welcome any feedback, critique, input as to how it can be improved. Feel free to use the contact me link to pop me an email.