Storm Theme for RapidWeaver

A description of features and general setup information

This user guide can be viewed online, printed and saved as a PDF or iBook. It is compatible with Reader in Safari 5. Go to www.themeflood.com and click on the support link. Choose Storm from the user guide list.

System And User Requirements

This theme is developed and tested to work with the latest version of RapidWeaver. The theme is also backwards compatible with RapidWeaver 3.6. You will need to already have a licensed version of RapidWeaver installed on your computer before installing Storm. It’s assumed that users of this theme have a good understanding of how RapidWeaver works, in relation to aspects such as creating a new projects, changing theme settings, adding pages, changing website settings and publishing sites to the internet. Some third-party RapidWeaver plugins are mentioned in this user guide, but generally no extra plugins are required to build basic websites using this theme. Advanced features like search bars may require the purchase of additional plugins.

Theme Compatibility

Storm has been extensively tested across numerous web browsers, including IE6, IE7, IE8, Safari 4, Opera 10.5, 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. Storm is compatible with both RapidWeaver 3.6 and RapidWeaver 4.0. An effort will be made to update Storm when newer versions of RapidWeaver become available. Some settings may not work in IE6, and the theme will safely ‘degrade’ in this browser, ensuring the basic theme remains intact and content is still fully accessible.

Plugin Compatibility

Storm has been extensively tested with all of the standard plugins (page styles) included with RapidWeaver. In addition, testing has also been done with a wide range of third party plugins by various developers including Loghound, Cosculture, Yourhead, YabDab, Weaverplugins and SymphonIP. It should be assumed that Storm 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 Storm are available for free download, so you can test and fully evaluate specific plugins yourself before purchasing the theme. Plugin developers also have access to the demo version.

Theme Colour Settings

Storm 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 'Colors' disclosure tab. Other groups of theme settings may also include colour settings, relating to that particular element. 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.

Body Background Settings

These settings provide you with options to customise the body (page) background. You can choose between a solid colour fill (default), a PNG vertical gradient, coloured textures or one of ten custom background images. The gradient option is compatible with all web browsers, accept Internet Explorer 6 which will render the gradient with a solid grey colour. Ten placeholders exist for you to insert your own custom background images or textures. See details below on how to load custom images into the theme.

Header Height Settings

Header height settings don't really play an important role in this theme. But you can use header heights to increase the amount of padding between the content and top of the screen. This is especially useful if you plan on using a content background effect, or you are simply seeking more whitespace for a cleaner page layout. Settings are available between 100px and 400px. The auto setting will make the header grow in height as the site title or slogan are increased in size.

Content Background Settings

These optional settings allow you to apply a solid colour fill or an image background to the content container. There are 10 placeholders available for you to embed your own custom content backgrounds. If creating your own custom background image, ensure there is plenty of clarity between the image and content. This is best achieved by using a washed-down or subtle background pattern, something quite light in appearance. You can look at the example content background images supplied with Storm for inspiration, or use any of these examples in your projects.

Header Font Settings

A choice of 20 web-safe and semi web-safe font face options are provided in the theme. Header font settings are applicable to the site title, site slogan, sidebar title, blog entry titles, photo album titles, video album titles and header tags. A font stack is used for each font setting, ensuring that if a person viewing a site does not have a particular font installed, their web browser will default to a close alternative. For example, if Palatino is not available, Times New Roman will be used instead.

Navigation Font Settings

A choice of 20 web-safe and semi web-safe font face options are provided in the theme. Navigation font settings are applicable to the block navigation links within the sidebar. A font stack is used for each font setting, ensuring that if a person viewing a site does not have a particular font installed, their web browser will default to a close alternative. For example, if Palatino is not available, Times New Roman will be used instead.

Content Font Settings

A choice of 20 web-safe and semi web-safe font face options are provided in the theme. Content font settings are applicable to all elements of a page not covered by header font settings. Again, a font stack system is used for the font settings, ensuring that if a person viewing a site does not have a particular font installed, their web browser will default to a close alternative. For example, if Palatino is not available, Times New Roman will be used instead.

Note: Some RapidWeaver plugins will force their own font settings into a page. Sometimes these may not match your preferred fonts. In such cases, you may need to change plugin settings or use custom CSS to obtain a more desirable style. Contact the plugin developer for further information. In addition, some web browsers do not permit elements like form fields or buttons to have their font face changed. This is more noticeable in PC web browsers.

@import Via GFD

This theme has support for embedding your own fonts using the Google Fonts Directory service, or your own custom code. Embedded fonts are supported in each set of font settings within the theme (e.g. header and content). Typically embedded fonts have an advantage of looking more attractive compared with some standard web fonts, and can really improve the professionalism of a website. Unlike image text, all lettering can be selected or printed as normal with no detrimental effects on search engines.

Setting up embedded fonts requires some minor modifications to the theme. To use embedded fonts in this theme, open the theme contents and open the css folder within. Open the desired font setting folder (e.g. header-font), depending which set of font settings you want to add an embedded font face to. Open the import.css file in your preferred code editor. You will need to refer to the Google Font Directory online, to choose a suitable font face. On the "Get Code" page, make a note of the font name (short name and full name).

The first stage is to import the font into the stylesheet using the @import CSS declaration. This is somewhat similar to the function in PlusKit, but is designed specifically for importing other stylesheets or fonts (as a result it does not use PlusKit). You can modify the example code already provided. Next you need to add your font name to the 'font-family' settings. Again you can use the existing code as a point of reference and modify it accordingly. Save changes to the import.css file when done. Select the '@import' theme setting to use your newly embedded font face. Please note that you often need to preview or export a website outside of RapidWeaver, to see the embedded font working. It should also be pointed out that using embedded fonts may slow down page rendering.

Line Height and Font Size Settings

These 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. Letter spacing controls the distance between individual letters or character. Line height controls the distance between lines of text. Font size controls the height of lettering. Some web designs recommend that light text on a dark background should be presented in a slightly larger font size and line space than normal to help aid clarity. Larger text sizes can look particular effective in some designs.

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. Storm supports multiple logo placement options including fixed screen badges, header container and sidebar.

Note: In Internet Explorer 6, logo images which are placed using the ‘fixed’ options will instead behave as absolutely-positioned elements. This is because this browser has limited CSS support and does not support fixed placement for objects. In addition, semi-transparent PNG logo images are non-supported in IE6 and will be rendered with a solid grey background instead.

Sidebar Settings

The sidebar in Storm can be positioned either left or right of the content container. In addition, the width of the sidebar can be changed, to suit the type or quantity of sidebar content to be displayed. All sidebar settings can be accessed under the theme settings. 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.

Width Settings

Several theme width settings exist in this theme, enabling you to customise the main container width. Some users prefer narrower widths, whereas others 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. Theme width settings are specified in increments of 50px and a couple of other specialist widths are included for those familiar with the concept of grid systems. A custom theme width option is also included -- this can be edited in the css/width/ folder within the theme contents to include your own width setting.

”Go To Top” Link (Miscellaneous Settings)

Ticking this option will place an anchor link in the bottom of the navigation container. When a website visitor clicks this link, the page will scroll smoothly back up to the top. This function is particularly useful on long web pages or single-page websites. To change the text displayed in the website, open the theme contents and open the index.html file in a code editor. Scroll down to the point commented “Anchor for top link”. Change the text as required and save changes. The “Go To Top” link adopts a fixed position, so will float over other content.

Last Updated Stamp (Miscellaneous Settings

This option will display the date a page was last updated. This is very useful for readers of your website to gauge when content was last updated and is an essential requirement in educational or informational websites. RapidWeaver will automatically write the date into the footer when this option is ticked. If you are using RapidWeaver 4.4 or less, the date will always be presented in mm/dd/yy format. In RapidWeaver 5.0 and later, the date will be localised to that of your computer. So for example outside of the US, the date may be shown as dd/mm/yy. If you need to change the 'Page last updated' text, this can be done by opening the theme contents and opening the index.html file in a code editor. Scroll down towards the bottom and make the necessary change.

Bookmark Bar (Miscellaneous Settings)

A growing number of websites feature a horizontal bar at the top of a page, containing special links, announcements or icons to popular bookmarking or social networking services. Storm is one of the first RapidWeaver themes to include this functionality, and it’s a great feature for artists or photographers looking to promote products or services organically. Either EC1 or EC2 (Extra Content) can be used to place content into the bookmark bar -- depending on whether you want content left or right aligned (or both). Text or images in this bar can be assigned links if required. Several web design websites and blogs like Smashing Magazine host a number of free icon collections which may be used.

Parent Page Links Replace Breadcrumbs (Miscellaneous Settings)

Normally breadcrumb links will be placed in the bottom left of a footer container within Storm. But on smaller websites, the use of breadcrumb links may seem rather pointless. Instead, this theme option can be used to replace the standard breadcrumb links with a list of your parent pages. In some websites this may be a more practical solution and give end users another method of navigation -- particularly useful after they have scrolled down to the bottom of a page.

Fixed Navigation Links (Miscellaneous Settings)

Use this setting to apply fixed positioning to navigation links. When the page is scrolled up or down, the navigation links will remain in a fixed position and will not move. This setting is also applied to both Extra Content container 4 and Extra Content container 5. It is important that this setting in only used on smaller sets of links or Extra Content - any content which expands outside the viewable web browser window will not be visible.

Note: This setting is not compatible with IE6 which will render the navigation links the same as if this setting is not used. This is because IE6 does not support the CSS code used to achieve this effect.

Fixed Body Background (Miscellaneous Settings)

If you are using a textured or image body background, selecting this option will set the background attachment to fixed. When the page is scrolled up or down, the body background will remain in a fixed position and will not move. This is quite a useful setting if you are using photographs or other non-tilable images as a body background.

Note: This setting is not compatible with IE6 which will continue to scroll the body background and repeat it. This is because IE6 does not support the CSS code used to achieve this effect. On older computers or web browsers, parts of the page may ‘flicker’ when the page is scrolled and may not scroll quite as smoothly when this setting is on.

Hide Standard Navigation Links (Miscellaneous Settings)

This theme setting will hide navigation links normally displayed within the navigation container. Selecting this option is particularly useful if you are building a single-page website using anchor links instead.

Preview Extra Content Containers (Miscellaneous Settings)

Storm has support for several EC (Extra Content) containers. EC is becoming a popular method in third-party RapidWeaver themes for allowing the placement of content outside of the normal editable regions of a page. See details below for further information on how to use EC. This option to preview EC containers offers RapidWeaver users an excellent insight into where EC containers will be rendered. The names and numbers of each EC container are displayed for easier reference.

Extra Content

Storm includes basic support for EC (Extra Content). Eight EC containers are available in this theme -- their positions and placement can be seen by using the Preview Extra Content Containers option under the theme settings. To embed content within your EC containers, use the standard EC code snippet or the Stacks plugin. Text colour settings for all ten EC 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/

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.

Duplicating Themes

If you are planning on making any modifications to the Storm 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. Duplicated themes will not be effected by future theme updates.

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 Storm.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.

Adding Custom Background Images Using Finder

Background images used by the theme are stored inside the theme contents. This ensures that the images become an embedded part of the theme and can be selected for use under the theme settings. For example, you may want to have a different image displayed on different pages of your website to add some variety.

The theme contents can be accessed by CTRL + Clicking (or right clicking) on the theme preview icon in RapidWeaver (the small picture of Storm which appears in your theme drawer). From the popup menu, select the 'Reveal theme contents in Finder' option. A new Finder window opens which contains a selection of files and folders. Open the folder marked 'images'. Then inside, open the folder marked 'editable_images'. This editable_images folder contains all of the images used by the theme, including placeholder images. Placeholder images are typically blank and named or numbered sequentially like content1.jpg, cotnent2.jpg, content3.jpg for example.

Any of these placeholder images can be replaced using your own images. When you add new custom images, name them so that they replace placeholder images. By replacing the placeholder images supplied in the theme, your custom images will be available for selection under the theme settings. When creating new images, it is advisable that these are optimised for the internet – typically this means they should not have any specific colour profiling applied and be of 72 DPI with a file size no greater that 75KB.

Adding Custom Background Images Using RapidWeaver MultiTool

RapidWeaver MultiTool is a third party application which runs separate to RapidWeaver. Both a free and premium version of this software is available. When open, RapidWeaver MultiTool presents a list of themes installed on your computer. Themes which are compatible with RapidWeaver MultiTool store all of their images inside a folder called editable_images. RapidWeaver MultiTool enables you to edit any of these images. The original images are safely backed-up within the theme so they can be retrieved at a later date if required.

It is recommended you start by editing placeholder images. Placeholder images are typically blank and named or numbered sequentially like bg1.jpg, bg2.jpg, bg3.jpg for example. Using RapidWeaver MultiTool, you can drag and drop new images onto the canvases. Many basic image editing techniques can also be performed on these images and text can be applied. Use the save button in RapidWeaver MultiTool to apply the customised image to your theme. RapidWeaver MultiTool is developed by a separate software company and support documentation is provided on the website.

Adding Custom Header Images From A Warehouse

If your images are already scaled to size and stored on the internet, it is possible to import them into the theme using CSS or jQuery Javascript. To use CSS, copy and paste this code into the Custom CSS box in the page inspector:

#header {
background-image: url(http://www.example.com/image1.jpg);
}

Change the URL to point to your image stored on the internet. There are other CSS attributes you can add to this code to change image alignment and background repeat. Search on the internet for further details of this.

Animate Anchor Tags

A popular trend in modern showcase and portfolio website designs is to condense a whole website onto a single page or to create a series of pages hosting different content or galleries. Anchor links (internal page links) can then be used, enabling a visitor to navigate larger webpages and jump to particular sections. The Storm theme contains a short jQuery (Javascript) script which will animate anchor links and scroll the page smoothly.

Ideally you should start by creating a menu or table of contents (TOC) somewhere in the page, normally at the top, an Extra Content container or in a sidebar. Each link should be formed using code similar to this:

<a href="#about" class="anchorLink">About</a>
<a href="#gallery" class="anchorLink">Gallery</a>
<a href="#contact" class="anchorLink">Contact</a>

To assign the point in a page where link should 'jump' to, use this HTML code as an anchor:

<a name="contact">Contact</a>

The link address and anchor name should always match. The link must contain a class selector of "anchorLink" in order for the smooth-scroll effect to work. If a user viewing the page does not have Javascript enabled, the links will still work, but will not be animated. Speed settings for the animation can be found in the javascript.js file within the theme contents. To prevent anchor links being animated, omit the class selector name from your code. As well as scrolling users down a page, you can also include anchor links to scroll them back to the top of a page - this is quite useful on longer pages. More information on using anchor tags can be found online.

Making Theme Customisations Using CSS

All elements in the Storm theme have either class or ID names. These names can be used as selectors, to apply custom CSS code to. The best method is to preview your website in a web browser such as Firefox or Safari. With developer tools installed or enabled, right click a particular element and choose to open or inspect it. This will give details of the element such as its selector name and and CSS code already applied to it. From this point, you can use the selector name and custom CSS code to change the style or appearance of an item. For example, padding can be changed, borders applied or background images added onto element. CSS gives you the potential to make many style changes to a theme. Storm has been designed and structured to make this as easy as possible. Some third-party RapidWeaver plugins also come supplied with details on how to modify styles using CSS. A lot of information regarding CSS can be sourced from the internet.

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.

Upgrading From Previous Versions Of Storm

The latest version of Storm will install itself alongside any older versions of Storm you already have installed on your computer. RapidWeaver treats each version as a separate theme, so you can gradually migrate individual projects from one theme to another without destructive results. To apply a new theme to a project, select the theme under the theme chooser in RapidWeaver. It is wise to mark all pages as changed and perform a complete re-upload of your website after changing themes. Some users also take advantage of a theme change to delete existing files on a web server using FTP software and starting from afresh again. Saved theme styles are non-transferable to new themes unfortunately. Renewed sets of saved theme styles can be created instead, taking advantage of new features in the theme.

Note: Existing purchasers of this theme can upgrade to the latest version for free at no extra charge. See the ThemeFlood website for details about obtaining your theme update.

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 don't hesitate to 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 on request.

© Copyright 2010. All Rights Reserved. No part of this documentation may be copied, photocopied, reproduced, translated or otherwise duplicated on any medium without written consent. Use of ThemeFlood themes, plugins and documentation is subject to the EULA (End User License Agreement) which can be viewed on the ThemeFlood website. All trade names referenced herein are either trademarks or registered trademarks of their respective companies.