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 support.themeflood.com/monsoon/
Important Information - RapidWeaver 5 Compatibility
This theme is fully compatible with RapidWeaver 5. New aspects like last published dates, consolidation of files and CSS compression are very well supported by this theme. However, RapidWeaver 5 doesn't have support for HTML5 syntax yet, this will be added shortly in a .0 update in early 2011. For the time being, you will need to make sure your page output is set to 'Default' under the page inspector (which it should be already). If tidied or optimised is used, this may result in layout breakage, due to tags being stripped out.
If validating the HTML code of your website using the W3C validator, make sure you select HTML5 - Experimental as the DOCTYPE and UTF-8 as the encoding.
Introduction
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 Monsoon. 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.
Theme Compatibility
Plugin Compatibility
Monsoon 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 Monsoon 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 Monsoon 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 Style Settings
Theme Colour Settings
Monsoon 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, 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.
Margin Top Settings
These settings control the margin (gap) between the top of the header and the top of a page. By default, a 30px margin is applied above the header. But this margin can be increased or decreased to suit personal requirements. If 'none' is selected, the top of the header will be flush with the top of a page. If the 'None / No Header Margin' option is selected, all margins above the header will be cleared.
Body Background Settings
The body (page) background in Monsoon can be customised with either a solid colour fill, one of several supplied example images or you can embed up to 15 of your own background images for selection. You can either choose to have the same body background image on every page, or have different body background images across different pages to add some variety to your website. Example header images supplied with the theme were all produced by myself, and you are welcome to reuse any of them in your own web site.
Header Background Settings
The large image container at the top of the theme is referred to as the header. This container hosts the site title, site slogan, optional logo images and the sidebar. You can customise the image background of this container using any one of the example images supplied with the theme. Or you can import your own images -- Monsoon has 40 placeholders for standard JPG images. You can either choose to have the same header image on every page, or have different header images across different pages to add some variety to your website. Alternatively there is a solid colour fill option or the possibility of using Flash (SWF) or a slideshow via another plugin. Example header images supplied with the theme were all produced by myself, and you are welcome to reuse any of them in your own web site.
Header Height Settings
Monsoon gives you a broad range of header height settings, enabling you to carefully customise the header height. Header heights available range between 100px and 300px. Users familiar with code also have the option to specify a custom header height. Some users prefer a smaller header container, whereas other may want a much taller container. Height settings available are specified in increments of 25px. The height of the header container does not include the horizontal navigation bar.
Title Slogan Layout Settings
In Monsoon, the site title and slogan are nested inside a small drop-down container. The title slogan layout settings enable you to change the width of this box and also choose as to whether the box is left or right aligned within the header container. The width setting you choose should largely be governed by the length of your title or slogan text.
Title Slogan Background Settings
These settings allow you to customise the background behind the title / slogan box in the header container. You can use any one of the example images supplied with the theme, such as a semi-transparent filter. Or you can import your own images -- Monsoon has 5 placeholders for standard JPG images and 5 placeholders for semi-transparent PNG images. Alternatively there is a solid colour fill option, which is selected by default. Title slogan background images measure 400px wide and 150px tall. If the container is larger than these dimensions, the background will repeat (tile).
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.
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.
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. Monsoon supports multiple logo placement options including fixed screen badges, title block and header container.
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.
Search Bar Settings
The optional search bar is powered using the RapidSearch plugin (not included) by Josh Lockhart. RapidSearch uses Google to fetch and display search results. When a user enters search keywords and presses return, they are forwarded onto the RapidSearch page within your website. This RapidSearch page should be named search.html and stored in the top level ( / ) of your website directory. Make sure the web address for your project is correct under the Site Setup window in RapidWeaver. If the page is missing or not named correctly, the search function will not work. The quality of the search results you get back depends on how well Google has previously indexed your website. New websites may take several weeks to index fully, updates to existing websites may take several days. The page which search keywords are forwarded to can be changed in the index.html file (within the theme contents) if required. If a more advanced search function is required, the required code can be added into the index.html file. Some web host control panels used to administrate web servers may include the option for page indexing and site search ability, without relying on Google or other outsourced services.
If you need to change the label on the search button, this can be done in the index.html file contained within the theme contents. Open this file in your preferred code editor and scroll down to the point commented 'Search Function'. The submit input label can be changed here. It is recommended you keep the search button label roughly the same size as it currently is, to avoid breakage of the search form field.
In Monsoon, you can choose to have the search bar positioned in one or four positions within the header container. The search bar container is automatically resized to match the size of your title slogan container. Under the search bar settings, you can also change the colour of text displayed in the search field. The background of the search bar container is permanently a semi-transparent black colour. It is possible to change this by opening the theme contents and navigating to images > editable_images and editing or replacing the image called searchbar-bg.png. This edit can either be done manually or using a utility such as RapidWeaver MultiTool.
Sidebar Settings
The sidebar in Monsoon 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. A custom sidebar option is also included -- this can be edited in the css/sidebar/ folder within the theme contents to include your own width and positioning settings.
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.
Borders Below Headings (Miscellaneous Settings)
This setting will display a 1px horizontal border line below HTML headings. The colour of this border can be changed under the main colour settings within the theme. It may be desirable to switch off this setting if using plugins like Kwix which have a heavy reliance on HTML header tags.
Remove Page Stripe (Miscellaneous Settings)
Ticking this option will remove the 6px border line that runs horizontally at the top of a page.
Site Title, Slogan, Navigation, Heading Uppercase Options (Miscellaneous Settings)
Ticking any one of these options (or a combination) will convert normal lowercase text to uppercase text. This is very useful if you want to enter text normally in RapidWeaver for the benefit of search engines, but you would prefer this text to be converted to uppercase. The text conversion is done automatically using some basic CSS code stored in the theme.
Remove Sidebar Border & Padding (Miscellaneous Settings)
Ticking this option will remove the 1px border line that runs around the sidebar container. It will also reset the sidebar padding from 15px back to 0px, giving a more condensed appearance.
Remove Sidebar Navigation (Miscellaneous Settings)
This is a useful option to tick if you are not using the block navigation container in the sidebar. When ticked, the space above the sidebar title is closed, and the sidebar title and content are rendered slightly higher than before.
CSS3 Rounded Corners On Title Slogan (Miscellaneous Settings)
Ticking this option will render the bottom left and bottom right corners of the title slogan box with rounded corners. By default, the corner radius is set to 10px. This can be amended if required by opening the theme contents and opening css > misc > rounded-corners.css in a code editor. CSS rounded corners are only presently supported in CSS3-compliant web browsers like Safari, Chrome, Opera and Firefox. In other browsers lacking support for CSS rounded corners, the corners will be rendered square as normal. Using this setting may inadvertently give CSS validation errors due to the use of propriety browser code, prefixing the properties.
CSS3 Box Shadow On Title Slogan (Miscellaneous Settings)
Ticking this option will apply a drop-shadow effect to the title slogan container. By default, the colour is set to black. This can be amended if required by opening the theme contents and opening css > misc > titleslogan-boxshadow.css in a code editor. CSS drop shadows are only presently supported in CSS3-compliant web browsers like Safari, Chrome, Opera and Firefox. In other browsers lacking support for CSS box shadows, the container will be rendered square as normal without a shadow effect. Using this setting may inadvertently give CSS validation errors due to the use of propriety browser code, prefixing the properties.
CSS3 Box Shadow On Container (Miscellaneous Settings)
Ticking this option will apply a drop-shadow effect to the main theme content container. By default, the colour is set to black. This can be amended if required by opening the theme contents and opening css > misc > box-shadow.css in a code editor. CSS drop shadows are only presently supported in CSS3-compliant web browsers like Safari, Chrome, Opera and Firefox. In other browsers lacking support for CSS box shadows, the main content container will be rendered square as normal without a shadow effect. Using this setting may inadvertently give CSS validation errors due to the use of propriety browser code, prefixing the properties.
Footer Links (Miscellaneous Settings)
Normally breadcrumb links will be placed below the footer content in Monsoon. 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 end of a page.
Fixed Body Background (Miscellaneous Settings)
This theme setting will keep the body background in a fixed position, with the main content container allowed to slide over the background. This is quite a good setting to use in conjunction with a pattern or image body background. Please note that fixed background images are not supported in Internet Explorer 6, which will ignore this setting. On older computers or web browsers, a fixed body background can be quite resource-thirsty, and as a result the page may not scroll quite as smoothly.
Preview Extra Content Containers (Miscellaneous Settings)
Monsoon 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.
Configuration
Extra Content
Monsoon includes basic support for EC (Extra Content). Five 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/
Removing Extra Content Placeholders To Improve SEO
If your pages are particularly sparse of text, there is a risk that search engines will start to index parts of the page which are normally unseen. In particular, the Extra Content preview names may start to show up in search results. Sometimes this can happen if search engines are unable to gather a true page description. If you want to prevent this from happening, open the theme contents and open the index.html file in your preferred code editor. Slowly work through the file and delete all of these tags:
<div class="ecName">myExtraContent7</div>
In some instances these tags wrap around a word like 'myExtraContent7' and in other instances they are wrapped around some HTML entities and code. Although removing these tags will break the 'Preview Extra Content Containers' option in the theme, it will prevent search engines from mistakenly indexing these preview names. Leave the other Extra Content code intact. Save changes and close the index.html file when done. Mark all pages as changed and republish your site. You should also consider renaming images to give them more meaningful names and ALT tags or titles. This is particularly relevant if you are using plugins like Stacks.
Adding icons to external links
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.
Adding Custom Header Images Using Finder
Header 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 Monsoon 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 header-01.jpg, header-02.jpg, header-3.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 that should not have any specific colour profiling applied and be of 72 DPI with a file size no greater that 75KB.
Adding Custom Header 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 header-01.jpg, header-02.jpg, header-3.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 using Extra Content
Extra Content enables you to place content outside the normal editable regions of a RapidWeaver website. In this theme, you can add EC to the header container, making this perfect for adding custom images. Start by creating your images in an external editor and use a utility like PixelStick to measure the size of your header container. Create the custom images to this size of your header container. You will need to apply aspects of styling like rounded corners in your image editor. Images should be optimised for the internet - typically this means that should not have any specific colour profiling applied and be of 72 DPI with a file size no greater that 75KB.
Drag and drop your image into the code, placing it between the opening and closing tag. When you website is previewed, the image will be added to the header. You may need to use the 'Preview Extra Content Containers' option under the theme settings to check you're using the correct EC container. EC also has some support for the @import function in PlusKit, so it may be possible to import images, Stacks or slideshows from other pages.
More information on using EC, including downloads of free Stacks and Snippets can be found here: http://extracontent.info/
Adding custom header images using plugins
If you are using plugins such as SYMnivo, there is an option to move generated content in EC containers. Similar, to the approach above, you should use the 'Preview Extra Content Containers' option under the theme settings to check you're using the correct EC container. Then in the plugin, select the correct EC container from the menu.
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.
If you are using Stacks like the XML Randomiser Stack, this can be used to pull in warehoused images at random to display within a page. You would need to use the @import function in PlusKit (not included) to import the Randomiser Stack code into your header container using Extra Content. There are other Stacks and code snippets available for RapidWeaver to import images into a page.
Embedding Flash Banners Within The Header
The header container in Monsoon can accept Flash banners generated using software such as Bannerzest. Bannerzest is arguably the best application available on Mac OS X for creating basic Flash slideshows and other animations made from images and text. After you have created and published a Flash banner from Bannerzest, copy the embed code and paste it into the designated Extra Content container. The animation will then be shown within the header container. RapidWeaver needs to be listed as a trusted application before a Flash file can be previewed -- this is an option found under the preferences in Bannerzest and similar software.
Note: The images inside an animation are an integral part of the Flash file and cannot be modified by RapidWeaver or a theme. You will need to make sure the images used in a Flash animation are already scaled to the correct size. You may also wish to apply rounded corners to your images and save them as PNG images if rounded corners are desired. If embedding Flash generated by another application, follow the same instructions as above, but use the standard HTML Flash embed code.
You may need to add the WMODE attribute when using custom code. This will enable other elements like a site title, slogan, logo or sidebar container to be layered over a Flash file. It is recommended that the Flash files are published separately to the RapidWeaver project, rather than trying to embed one within the other.
Theming Basics
Duplicating Themes
If you are planning on making any modifications to the Monsoon 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
Theme Contents
Code, settings, files and graphics required by a theme live inside a package called Monsoon.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.
Making Theme Customisations Using CSS
All elements in the Monsoon 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. Monsoon 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 Monsoon
The latest version of Monsoon will install itself alongside any older versions of Monsoon 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.
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.
Support
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 2011. 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.