Index

Theme Compatibility

Wilderness 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. Wilderness is compatible with both RapidWeaver 3.6 and RapidWeaver 4.0, but some theme features like search bars rely on plugins not supported in older versions of RapidWeaver. An effort will be made to update Wilderness when newer versions of RapidWeaver become available.

Plugin Compatibility

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

Wilderness 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

Wilderness offers you two types of navigation in the theme settings. Block navigation (default) creates a simple block of page links within the sidebar container. Split navigation positions parent page links inline within the title bar, with sub pages nested below within the sidebar. There is also an option in the navigation settings to replace the normal breadcrumb links in the footer with navigation (parent page) links, which may be more useful. There are a wide choice of colour settings for both split navigation and block navigation layouts, so you can carefully customise colour schemes.

Sidebar Settings

Wilderness 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 existi for a single sidebar floated left or right, or a double sidebar which utilises extra contact. 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.

Extra Content

Extra content is a jQuery (Javascript) function which enables you to position text and other basic content in other parts of a page. Use the ‘Preview Extra Content Containers’ setting to view where each extra content container is rendered. Then enter the following in a sidebar:
<div id=”myExtraContent4”> </div>
Between the open and close tags, enter your content. Within the extra content theme settings, tick to select which containers you wish to use -- this in turn will automatically render borders, padding and backgrounds. You may use as many different extra content containers as you prefer, but an extra content container may only be used once. More information on extra content (including downloadable snippets and stacks) is available from this website: http://extracontent.info/

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. Wilderness has been tested and will work very well on devices such as the iPhone and iPod Touch.

Header Height

To cater for different users' requirements, a selection of header height settings are provided. These control the header (slogan container) height. Some users prefer narrower header heights to fit more content within a page, whereas others prefer taller headers to display photographs or other artwork. Header heights are specified in increments of 50px.

Header Background

Wilderness comes with a selection of stock photo images and patterns which can be used in your projects. You can set a header background under the theme settings. There are also placeholders for 50 custom background images, so you can include your own background images within the theme. Custom images go in the 'editable_images' folder, contained within the 'images' folder inside the theme contents. Replace any of the placeholder images in this folder with your own images. Wilderness is also compatible with third-party utilities such as RapidWeaver MultiTool and RapidWeaver Theme Miner, which aim to make the process of editing theme images easier. If you already have a selection of images published on the internet or want to update header images remotely, custom CSS code can also be used.

#headerContainer {
    background: url(http://www.example.com/image5.jpg);
}

This custom CSS code can either be entered into the custom CSS box under the page inspector, or it can be added to the custom.css file contained within the theme contents. In this instance, a background image will be loaded from an external URL. Only use background images you have permission to reuse and ensure images are optimised for the internet (ideally in JPG or PNG format with a file size less than 50KB). Images supplied with this theme were all created by myself and may be reused in your own projects with this theme.

Integrating Flash Content into the Header

When working with any form of Flash content, it is normally best to publish it from your preferred software (e.g. BannerZest) and upload it separately to your web server. Flash embed code can be pasted directly into the ‘Custom Header’ box under the page inspector in RapidWeaver. Your Flash is then loaded from the internet. Sometimes additional code may be required (e.g. WMODE parameter) to make elements layer over Flash in browsers such as Internet Explorer. A comprehensive guide on setting up BannerZest Flash banners in RapidWeaver can be found here: http://shukapaw.com/rw_bnr_hdr/

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.

Search Function

Search bars are a common feature in larger websites and offer users a quick and effective method of searching a website to find the goods or services they are looking for. The search function in Wilderness is powered by the RapidCart plugin (not included) making setup easy. All that you need to do is to create a new RapidSearch page in your project, with a filename of search.html in the page inspector. Set the folder to / (forward slash) so that the RapidSearch page is stored in the top level of your website. Because the search function is powered by Google, your search results are based on those harvested by Google during indexing sessions. Therefore if your website is new or has been changed recently, search results may initially be poor. Search results can be improved using SEO (search engine optimisation) tactics, for which there is much information on the RapidWeaver forums. Search bar colours can be changed under the theme colour settings. Title and button names within the search bar can be edited in the index.html file, within the theme contents.

Important Code Details

In this theme, jQuery is sourced from Google API's. This reduces your bandwidth (page size) by about 50KB. There are other benefits of using hosted versions of jQuery which are outlined on this website: http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

To support the use of Flash banners, the Custom Header tag within the index.html file has been moved from the head section down into the theme header to facilitate the use of embedded Flash headers. If you are adding special effects or code to a web page like modal windows (e.g. lightbox), you may not be able to use the custom header box within the page inspector. To overcome this issue, you can either embed your code directly into the index.html file within the theme contents, or move the custom header tag back to it's original position (again within the index.html file).

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 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 modifcation serice is also avilable.