Tituli

1

Theme Easy
A RapidWeaver CSS Reference
Based upon the Official RapidWeaver Theme SDK Jonathan Head NimbleHost.com Initial Release 12/2009

All content, except as noted within this guide, is Copyright © 2009 NimbleHost.com. All rights reserved.
1

2

Table of Contents
Preface ! !
! ! ! What this guide does (and doesnʼt) cover.! ! ! ! ! ! ! ! 3

Web Design Basics ! !

! ! ! ! !A brief introduction to HTML, CSS, and how the two are connected."

"

!

!

4

RapidWeaver Global Styles
HTML elements that can be used on any type of page" " " " " " 6

RapidWeaver Page Types
HTML elements created by RapidWeaver specifically for certain page types ! ! ! ! ! " " Blog! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! 8 11 14 15 16 18 19 20

Photo Album! Contact Form! File Sharing!! Movie Album! Quicktime! !

Frequently Asked Questions! ! Resources! ! ! ! !

2

3

Preface
If youʼre reading this guide, that means you know about RapidWeaver and what a great piece of software it is. With a vibrant and thriving community of theme and plugindevelopers, RapidWeaver really is one of the best options when you want to upgrade from iWeb.

How this guide will help you
Regardless of the theme you are using to create your website, RapidWeaver uses a variety of standard CSS selectors that do not change, even if you switch from one theme or plugin to another. This guide goes over these items, using easy to understand visual “maps” that point outwhich selector refers to a particular item on the page. If youʼre not familiar with HTML and CSS, then be sure to go over the quick tutorial explaining how the two are related and used. Despite what you may have heard or seen in the past, these concepts really are quite easy to understand.

The Unknown Factor
There are a large number of great theme and plugin developers. Each one is different,and brings something unique and special to the RapidWeaver Community. Due to the nature of web design, and how web pages are created and styled, there are parts of every theme and plugin that are unique to each developer. Since these parts are separate from the “standard” items that RapidWeaver creates there is no way for this guide to know what the CSS selectors for those unique items are.Fortunately, this guide will give you a basic understanding of HTML and CSS, and specifically in how they are put to use in RapidWeaver. Using this knowledge, with a little more effort youʼll quickly realize you know how to customize even the unique parts of each theme or plugin.

3

4

HTML & CSS Made Easy - A Tutorial
Introduction
Many people, when first trying to create a website, feel thatHTML and CSS code is the realm of “professional” web designers, and donʼt understand how the two work together. When using RapidWeaver and everything is working great, this isnʼt a problem - but there comes a time when you realize that thereʼs this one little thing youʼd like to change on your site. Except you donʼt know how to do so and RapidWeaver doesnʼt seem to have any specific setting thathelps.

Modern Web Design
Say hello to the HTML document - for RapidWeaver based sites this is where web design starts, and itʼs this file that tells your web browser everything it needs to know to display your site properly. It tells the browser, “Hey, this here is an image.” or “This is a bit of text.”, “That over there is a list of items.”, and so forth this is what gives your site structure. Italso tells the browser, “Hey, thereʼs another file you need to know about, and itʼs going to tell you how to make things look pretty.” Enter the CSS document - imagine this file as your own personal Art Director, for here is where you can tell the browser, “You know, Iʼd like this section here to have a red border.” or “Letʼs make the size of the text here a stand out from the rest.”, and even...