Black & White Theme for RapidWeaver

A description of features and general setup information

Theme Compatibility

Black & White has been extensively tested across numerous web browsers, including IE6, IE7, IE8, Safari 4, Opera 10, Firefox 3.5, Google Chrome and lesser-used web browsers including Flock, Camino, Stainless, Maxthon and Lunerscape. No IE6 PNG fix is included with this theme to keep page sizes and bandwidth to an absolute minimum, but it is possible to add a PNG fix to the theme if one is essentially required -- see the ThemeFlood website for more details and to obtain the free download. Black & White is compatible with both RapidWeaver 3.6 and RapidWeaver 4.0. An effort will be made to update Black & White when newer versions of RapidWeaver become available.

Plugin Compatibility

Black & White has been extensively tested with the following RapidWeaver plugins:
Styled Text, Blog, HTML Code, Styled Text+, Carousel, Collage 1, Collage 2, Stacks, PlusKit, Accordion, Columns, Photo Album, Movie Album, Rapid Album, WeaverPix, WeaverFM, Kwix, Rapid Blog, FAQmaker, Partitions, Sitemap, Tabloom, TabMate, EasyTube Gallery, ContentPager, Formloom, PayLoom, GoogleLoom and CartLoom.
It should be assumed that Black & White will work with other third-party plugins as well. However, some third-party plugins do not use valid XHTML or CSS code and may not be compatible with certain web browsers. In such instances, you will need to contact the plugin developer for updates or support or use alternative plugins. Demo versions of Black & White are available for free download, so you can test and evaluate specific plugins yourself before purchasing the theme.

Applying Custom CSS

This theme features a very useful 'custom.css' file within the theme contents. Into this file, you can enter custom CSS code. Unlike the Custom CSS box under the Page Inspector in RapidWeaver, code entered into the custom.css file gets applied to all pages and enables you to edit CSS using a preferred editor like CSSedit or Text Wrangler. These types of editors often feature useful features like syntax colouring, auto-completion and validation, which combined make CSS editing much easier and safer. There are many free resources on the internet which cover CSS in detail. To open the custom.css file, right click (or CTRL + Click) the theme preview icon in RapidWeaver and select 'Reveal Theme Contents in Finder'. Open the custom.css file in your preferred code editor. If you only need to apply custom CSS code to a single page, enter this code under the Page Inspector custom CSS box as normal.

Saving Styles

After customising your theme, you may wish to apply the same set of styles to other pages. By far the easiest way to do this is to open the page inspector and click onto the styles tab. At the bottom, click the cog button and select 'Save Style As'. From now on, this saved style can be applied to other pages. Please note that saved styles are non-transferrable between other themes or theme versions, but you can share styles between other theme users and projects. More details on applying styles and saving styles can be found in the RapidWeaver user manual. Most users normally find it easier to use this above method to save styles, rather than relying on the 'Applied to this page only' or the 'Is the master style...' settings under the page inspector.

Theme Contents

Code, settings, files and graphics required by a theme live inside a package called Black & White.rwtheme or similar. If you are planning to modify the theme or add new elements to it, the 'theme contents' (package) is where you normally need to go. RapidWeaver themes are stored in ~/Library/Application Support/RapidWeaver/ where "~" is the name of your home directory. But you can also easily access the theme contents from within RapidWeaver. Just right-click (or control and click) the theme preview icon and select 'Reveal theme contents in Finder' from the pup window. The theme contents is revealed in a Finder window, from where you can access all the files which make-up the theme.

Duplicating Themes

If you are planning on making any modifications to the Black & White theme, it is highly recommended that you duplicate the theme -- that means making a copy of the theme to customise, leaving an original version in RapidWeaver unedited. Working from a duplicated theme ensures you can always return back to an original version at anytime. Themes can be easily duplicated by right-clicking (or control and clicking) the theme preview icon in RapidWeaver and selecting 'Duplicate' from the popup menu. Give the duplicated theme a new name and work from that version.

Theme Colour Settings

Black & White has a wide range of theme colour settings, available for use under the style tab in the theme settings. Most main colour settings are listed under the 'Colours' disclosure tab. Other groups of theme settings may also include colour settings. Clicking on a coloured square reveals the Mac OS X colour picker window, where you can select new colours using a range of different palette tools.

Letter Spacing, Line Height and Font Size

These settings (accessed under the theme settings) allow you to carefully customise the appearance of text within the theme. This enables you to customise text in areas such as content or sidebar.

Navigation Settings

Black & White contains a selection of basic navigation settings which enable you to have site navigation links positioned in different parts of the page, depending on your preference. By default, top-level links are listed in the site title bar and subpages are listed in the sidebar container. This type of layout is commonly referred to as a 'split navigation' layout, as the links are split and displayed in different parts of a page. In the theme settings, you can also opt to have the parent page links displayed in a line above the site slogan, below the site slogan or above the footer container. Again, subpages will be listed in the sidebar whenever a split navigation layout is used. The third and final option is to display links in the form of a table. This looks distinctly different to normal theme navigation layouts and renders page links in a columned layout (see details below for further setup instructions).

Colour settings are provided so that you can change the colour scheme of navigation links. Horizontal link colours refer to links in the title bar at the top of a page. Vertical link colours enable styling of subpage links within the sidebar. If you are using another variant of split navigation layout or one of the table navigation layouts, use the table link colour settings. Colour settings for breadcrumb links are also provided in this list.

Configuring a Table Navigation Layout

To get the best results from a tabled navigation layout, it is necessary to perform a small modification to the theme. Under normal circumstances. RapidWeaver will only display sub-page links when you are on the parent page. Other links get hidden from view and are not accessible. To overcome this issue, a small modification needs to be made. You will need to use a Preference List editor -- for which there are several available to download (search Google for "preference list editor mac os x"). A free preference list editor is available with Apple developer tools, or you can download a third-party one such as PlistEdit Pro. Open the theme contents and then open the theme.plist file in your preference list editor application. Open the RWTextToolbar disclosure and then change RWAlwaysDisplayFullNavigation from NO to YES (pictured above). This will tell RapidWeaver to always display the full list of navigation links, regardless of what page a user is on.

Sidebar Settings

Black & White has numerous sidebar options, making the sidebar region easily customisable to your requirements. All sidebar settings can be accessed under the theme settings. Alongside some colour settings, you can pick a sidebar width or position based on the type of content you wish to display. Settings exist for a single sidebar floated left or right. All sidebar position settings are available in a choice of widths. Care should be taken that any wide items inserted into a sidebar or extra content container do not extend outside the sidebar boundary -- which could potentially cause layout problems (container wrapping) in Internet Explorer.

Theme Width

Several theme width settings exist in this theme, enabling you to customise the main container width. Some users prefer narrower widths, whereas other prefer wider page widths to fit more content in. Your choice of theme width should be governed by the type of content you wish to display and plugins you want to use (plugins such as WeaverPix and RapidAlbum require wider pages). When designing your website, remember that quite a large proportion of internet users have screen sizes of no more than 1024px by 768px. This is a trend which has stabilised since the introduction of new devices such as netbooks and tablet PC's. Black & White has been tested and will work very well on devices such as the iPhone and iPod Touch.

Title Bar Height

To cater for different users' requirements, a selection of title bar height settings are provided. These settings work by applying an increased or decreased line height setting on the site title. For this reason, it is important your website has a site title, otherwise no title bar may get displayed. If you do not need a site title, enter the following code into the site title field under the Site Setup window or Page Inspector:
 
A non-breaking space will apply line height and title bar height settings still, but no site title will be shown.

Fixed and Scrolling Title Bars

Black & White can support both fixed and scrolling title bars. When a fixed title bar option is used, the title bar will remain in a static position and will not scroll. Instead, content will scroll underneath the title bar which will be permanently displayed. A scrolling title bar remains in a relative position and will scroll up when the rest of the page is scrolled. Please note that due to limited CSS support in Internet Explorer 6, a fixed title bar will scroll -- Internet Explorer 6 does not support fixed containers. Also be aware that some RapidWeaver plugins and add-on effects such as lightboxes will still display a title bar, even if an attempt is made to hide the title bar as part of an effect.

Logo and Logo Links

Logo images can be inserted into the site setup window as normal in RapidWeaver. Logo images will automatically link back to your homepage. The homepage address is the same address you provide in the ‘Web Address’ box within the Site Setup window. If you need a logo to link somewhere else, open the index.html file within the theme contents and find the logo tags. Change the ‘base_url’ tag to a URL of your choice. Black & White just supports a single logo placement option -- the logo is placed above the site slogan and will automatically push content down if you opt to use a larger logo image.

Adding icons to external links

If you have links which open in a new window, you can place a small icon next to these links to provide an indication for end users. To do this, when you create a link in RapidWeaver, add a class selector to the link (in the new link window) with a selector name of "external". All links with a class="external" attribute will have a small blue icon displayed next to them. This can be changed over to another icon in the theme contents if required. The icon is stored in images/editable_images/ within the theme contents.

Styling Header Tags

The header tags can be styled using CSS. You can ether style individual levels of headers, or style them all collectively as a group. To style individual headers, the CSS code you would use would look like this:
h3 {
    text-transform: lowercase;
    font: 200% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    color: #5e5e5e;
}
This code above would convert all h3 tags to lowercase, increase the font size to 200% and convert the font face to a Helvetica font family with an iron grey colour. If you wanted to style all of your header tags the same, multiple selector names can be used in the CSS code, separated by commas like this:
h1, h2, h3, h4, h5, h6 {
    text-transform: lowercase;
    font: 200% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    color: #5e5e5e;
}
The text size of header tags will still vary in size, depending on the specific header tag used. But all header tags would have lowercase lettering, a standardised font face and the same colour throughout. This custom CSS code can either go into the custom.css file within the theme contents, or you can enter it in the normal custom CSS box within the page inspector in RapidWeaver.

Extra Content

Black & White includes basic support for extra content. Eight extra content containers are available in this theme -- their positions and placement can be seen in the online demo version of Black & White. The code required to make extra content work is already provided in the theme, but extra content is not loaded by default in order to conserve bandwidth. To enable extra content in this theme, copy and paste the following code into the Custom Header box under the page inspector, on every page where you wnat to use extra content:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="%pathto(js/extracontent.min.js)%"></script>
This HTML code will load jQuery from Google API's and loads the extra content script from within the theme contents. To embed content within your extra content containers, use the standard extra content code snippet or the Stacks plugin. It is recommended that extra content 1 is only used when there are no links to display in the title bar, and it is recommended that extra content 3 is only used when the breadcrumb links are switched off. Text colour settings for all three extra content containers can be found under the theme colour settings. More information on using extra content (including free snippets and stacks) can be obtained from this website: http://extracontent.info/

Customer Support

You can find links to various resources on the ThemeFlood website. Official RapidWeaver support resources such as the user manual, help desk and forums are available under the help menu in RapidWeaver. For issues relating to this theme or other problems, please get in contact via the ThemeFlood website. Unlike some other theme companies, customer support is free and is extended to cover themes which have been customised or modified. Facilities are available for you to upload customised themes and RapidWeaver sandwich (project) files. A custom theme and modification service is also available.