Developer - RapidWeaver Classic Theme Introduction

Documentation RapidWeaver Classic
1

So you’re interested in designing your own theme for RapidWeaver Classic? You’ve arrived at the right place!

Before you start developing or modifying a classic themes, you need to make sure you have RapidWeaver Classic installed. You can download the latest version of RapidWeaver here.

You’ll also need a text editor, Nova from Panic is great and provides syntax highlighting which makes reading large amounts of code infinitely easier.

Requirements

Anyone can build or modify a theme for RapidWeaver. You’ll just need a basic understanding of HTML and CSS to get going.

  • RapidWeaver Classic
  • A code editor
  • A JSON/Plist editor (optional)

Getting Started

To get started download example.rapidweavertheme. Once downloaded you can double-click to install it. If RapidWeaver is running, you’ll need to restart it for the theme to become active.

Once you have the theme installed, open RapidWeaver and create a new project. Find the Example theme in the Theme Browser, right-click on the theme preview and select “Show Contents”.

Tip: You can right-click any theme in the Finder and choose “Show Package Contents”.

This will reveal a Contents folder in the finder, inside are all the files required to construct a RapidWeaver theme. You should have the following files:

  • Theme.plist - an XML file containing the name and details of the theme
  • index.html - layout template file (HTML)
  • styles.css - base stylesheet (CSS)
  • colourtag.css - colour style variations stylesheet (CSS)
  • js Folder - contains the required javascript for the theme
  • images Folder - where all images for the theme are placed
  • css Folder - theme variations CSS files are located here
  • preview_large.jpg - 800x950px image/logo of your theme displayed in the theme drawer.

theme-developer-rapidweaver
theme-developer-rapidweaver2128×1072 207 KB

Understanding the index.html Template

The index.html file contained in the theme folder is the framework for all your other pages to be generated from.

A themes index.html file follows a familiar structure that is common in nearly all modern web pages. This section aims to familiarise you with the template document.

The basic layout of the theme index.html should look familiar to you:

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
   <html xmlns=”http://www.w3.org/1999/xhtml”>
       <head>
          <title>This is the Page Title</title>
          <link href=”styles.css” rel=”stylesheet” type=”text/css”
media=”screen” />
       </head>
       <body>
          <div id=”container”>
              <div id=”pageHeader”>
                 <h1>%site_title%</h1>
                 <h2>%site_slogan%</h2>
               </div>
               <div id=”contentContainer”>
                 <div id=”content”>
                     Content
                 </div>
              </div>
              <div id=”sidebarContainer”>
              <div id=”navcontainer”>
                 %toolbar%
              </div>
              <div id=”sidebar”>
                 %sidebar%
              </div>
          </div>
          <div id=”footer”>Footer</div>
       </div>
   </body>
</html>

Setting a language

RapidWeaver will automatically set the language of the template index.html file based on the user’s preference. Your Template file should not include the lang attribute.

<html lang="en">

Instead, it should just include the opening HTML tag, like this:

<html>

Using Syntax Tags

The Syntax Tags found in the template file will be replaced with actual content when the page is published of exported by RapidWeaver.

The main content areas are distinguished by elements, each open and close tag contains a Syntax Tag. For example.

<div id=”content”>%content%</div>

The majority of the relate directly back to a text area in RapidWeaver, it should be obvious which tag corresponds to which area.

The tags can be placed anywhere within the template. To recap a RapidWeaver looks like this:
%content%

This is the tag for the main content of the page anything in the main window in RapidWeaver will be inserted here.

%sidebar%

This tag refers to the Sidebar Window in the Page Inspector, again any text or images entered into the Sidebar in RapidWeaver will be converted to HTML and will replace this tag in the .html file. A full list of tags can be found in the file .

The %pathto(…)% Tag

All RapidWeaver Syntax Tags, with one exception, look exactly the same. The exception is the %pathto(file.extension)% tag. This tag is used for site consolidation, essentially meaning that RapidWeaver will automatically generate links to files located in the theme folder.

When exporting a site RapidWeaver places all of the theme files in a folder called rw_common and generates the links to the files in this folder. This should be used when linking to any file in your theme file including stylesheets, javascript files and images.

Examples:

Linking to the styles.css file in your theme directory.

%pathto(styles.css)%

the published code will look something like this:

../rw_common/themes/theme_name/styles.css

Folders can be included before the image name:

%pathto(images/image_name.jpg)%

The published code will look something like this:

../rw_common/themes/theme_name/images/image_name.jpg

Tip: All tags can also be used inside styled text areas in RapidWeaver. The %pathto(…)% tag is particularly useful should you want to include images or links to files inside your theme.