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.
Theme Compatibility
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.
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.
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. You can also opt to use an 'embedded' font which can be sourced from the Google Font Directory service (details below).
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
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.
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.
Banner 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.
Banner 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 Extra Content container 2. 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. The Flash animation should already be made to the correct size to fit the header container. Remember that Flash is not currently supported on mobile devices like the iPad, iPhone or iPod Touch. If you need to create slideshows or animations which are fully compatible with mobile devices, it is recommended you investigate using a Javascript method and user plugins like SymNivo or WeaverPix.
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.
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.
Fade In Slogan Container (Miscellaneous Settings
Ticking this option will fade in the slogan container displayed within the banner container. The code to control this special effect can be found at the top of the index.html file. It would be possible to edit the animation speed to make the slogan container fade in faster or slower than it currently does.
Capitalise Site Title, Slogan, Navigation and Titles (Miscellaneous Settings
When ticked, any one of these capitalisation options will convert normal text to uppercase using CSS. This can be useful to help increase the boldness of certain page elements. The advantage of using CSS to capitalise text is that the original format of the text is preserved - this is very useful for search engines crawling your website.
Underline Inline Links (Miscellaneous Settings
This theme setting will underline links in the content container and sidebar container within a page. Some people prefer to have underlining turned on to aid website accessibility. Others prefer to haver underlining turned off in certain projects.
Footer Navigation Links (Miscellaneous Settings
Normally breadcrumb links will be placed in the bottom left of a footer container within Wilderness. 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.
Title Bar Gradient (Miscellaneous Settings
This option will place a semi-transparent PNG image over the title bar to create a gradient effect. From a functionality perspective, this adds very little to the theme. But from a cosmetic perspective, some users may find this option adds a nice finishing touch to the theme.
Hide Slogan Container (Miscellaneous Settings
If a slogan is not required, ticking this option will remove the site slogan and clear away the semi-transparent bar at the top of the banner container.
Preview Extra Content Containers (Miscellaneous Settings)
Wilderness 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
Search Function
Embed Fonts Via Google Font Directory
Each of the main theme font face settings in this theme includes an option to use embedded fonts hosted by Google. Embedded fonts have become a popular trend in modern web design, as a method of breaking away from standard web-safe fonts and styling text with more attractive fonts. Google has recently launched a free service which hosts a wide and growing collection of embedded font faces. These can be used in both personal and commercial projects, subject to your acceptance of the license agreement: http://code.google.com/webfonts
Any of these fonts you see listed on the Google Font Directory can be used with this theme. All that is required is a minor code edit to pull in the correct font from the directory and embed it within your theme. Start by opening the theme contents and then the CSS folder in Finder. If you want to apply an embedded header, content or navigation font, open the relevant folder. Then open the import.css file in your code editor. You'll see that there is already comments and code in this file.
In your web browser, navigate to the Google Font Directory website and click on a font you want to use. In the next window, you are presented with previews of the font and links to embed it. Click onto the blue 'Use this font' tab and tick any available font variations like bold or italic you want to use. One of the code snippets presented is the font stack - a list of fonts which includes your embedded font and a couple of other generic font faces like Arial and serif. Copy this font stack and paste it into the import.css file, replacing the font stack already there. Do not change the element (selector) names that the font is to be applied to (e.g. body, #siteTitle, #nav). Just replace the list of font names. The completed code would look something like this if your were embedding Reenie Beanie:
body {
font-family: 'Reenie Beanie', arial, serif;
}
Back on the Google Font Directory page, click the 'Advanced techniques' link at the bottom of the 'Use this font' panel. Copy the @import code snippet which looks like this:
@import url(http://fonts.googleapis.com/css?family=Reenie+Beanie);
Again, paste this code into your import.css file, replacing the code already there. When you are finished, save and close the import.css file. Go back to RapidWeaver and select the 'Import Via Google Font Directory' option. This will then call your modified import.css file and pull it into the theme.
There are other techniques available for embedding fonts in the theme. You can use free plugins like the Font Getter Stack which work in the Stacks plugin and can pull in embedded fonts from Google. Please note that sometimes you cannot preview embedded fonts in RapidWeaver, and you may have to preview your website in a normal web browser to see the embedded font faces take affect. In addition, be aware that some fonts can be quite large in size (sometimes over 100KB) which may affect page loading speeds.
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 Photogenic 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, content2.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 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:
body {
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.
Customising Fade-In Animations
These optional animations on elements like the body background, navigation bar and content container are generated using the jQuery .fadeIn() attribute. The code which controls the animation effects is conveniently located in the index.html file within the theme contents, so it is possible to customise the fade-in speed without digging too deeply into the theme code. Open the theme contents and then open the index.html file in your preferred code editor. In the head section of the page at the top, you will see some code like this:
<script type="text/javascript">
var $fi = jQuery.noConflict();
$fi(document).ready(function(){
$fi('#header').delay(0).fadeIn(2000);
$fi('#slogan, #nav-bg').delay(0).fadeIn(2000);
});
</script>
By default the animation speed is set to 2000 milliseconds (2 seconds). This effect duration is specified individually for the body background (#myExtraContent1), the navigation bar (#navBar, #nav-bg) and the main content container (#main). The effect duration can either be increased or decreased here. It is advisable not to edit other code here, unless you are familiar with jQuery Javascript and have the facilities to test your modifications. Changing the effect duration is the safest and easiest edit to make.
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/
Theming Basics
Using Code Snippets
A range of code snippets are supplied for use with this theme. This gives you additional options on top of normal theme settings to customise the theme to your liking. The latest pack of snippets for Wilderness can be downloaded from the ThemeFlood website (under the Wilderness theme information). These snippets can be merged with your existing snippets. CSS snippets can either be entered into the custom CSS box under the page inspector on a page-by-page basis, or entered into the custom.css file to be applied to all pages. Most of the code snippets should be fairly self-explanatory as to what they do.
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:
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/
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
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.
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 modification service is also available.
© 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.