Theme Colour Settings
This theme has a wide range of theme colour settings, available for use under the style tab in the RapidWeaver page inspector. Most main colour settings are listed under the Colours disclosure tab. Other groups of theme settings may also include some 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.
Extra Content
Extra content is a popular technique used by many third-party theme developers as a method of embedding content outside of the normal editable regions of a theme. This theme contains several Extra Content containers, and you can see where they are located by using the Preview Extra Content Containers option in the Miscellaneous theme style settings. To use an Extra Content container, type the following into the sidebar:
The number of the Extra Content containers can be changed, depending on which Extra Content container you wish to use. Where you see the words 'Hello World', this can be replaced with your own content. If you are using the Stacks plugin, there is also the option of using the Extra Content Stack, instead of the code snippet above. When the page is previewed, you should see your content rendered in the correct region. You can use as many Extra Content contains on a page as you see necessary. However each individual Extra Content container should only be referenced the once. More information on Extra Content (including free snippets and stacks) can be obtained from this website: http://extracontent.info.Hello World!
Theme Contents
The theme contents is the folder that contains all of the theme parts - a mixture of Javascript, property lists, HTML and CSS files and graphics required by the theme. The easiest way to access the theme contents is to right-click on the theme icon in the theme panel within RapidWeaver. In the popup menu, select Reveal theme contents in Finder. The Finder window that opens is a listing of the theme contents. From here you can open or edit any of the theme files. If modifying a theme, is is strongly recommended you duplicate the theme to preserve an original, unedited version.
Editing code files requires the use of a code editor. There are several free and paid code editors available for the Mac, such as Smultron, TextWrangler, Coda, Espresso and Flux. You may find that files like the index.html try to open in your normal web browser like Safari. You can force a file to open in a different application by right-clicking the file and selecting Open with… in the popup menu. Choose your code editor from the list of applications.
Custom CSS Code
If you are customising the style or appearance of a theme, the chances are that you will be using custom CSS code. If you only want a change to occur on a single page, CSS code can be entered in the Custom CSS box under the RapidWeaver Page Inspector. If you want to apply styles to all pages using the theme, it would be quicker to open the theme contents and paste the code into the custom.css file.
CSS Customisation
Nearly all elements in a RapidWeaver theme have either class or ID names applied. 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 any CSS code already applied to it. From this point, you can reuse 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 RapidWeaver theme. 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.
Duplicating RapidWeaver Themes
If you are planning on making any modifications to a RapidWeaver theme, it is highly recommended that you duplicate the theme. You will often hear experts in the RapidWeaver forums suggest that you duplicate a theme, prior to editing it. Duplication means that a copy of the theme is made, preserving the original version in RapidWeaver. Working from a duplicated theme ensures you can always return back to the original version at anytime. Themes can be easily duplicated by right-clicking (or control and clicking) the theme preview icon in RapidWeaver (in the theme pane) 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. There are no limits on how many times you duplicate a theme, and indeed some users prefer using separate named themes for each project they're working on.
Duplicating RapidWeaver Themes
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 not easily 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 Search Bars
Optional search bars are powered using the RapidSearch plugin (not included with the theme) 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. If the page is missing or not named correctly, the search function will not work and will likely return an error 404. 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. Likewise there is also a new 'pro' version of RapidSearch available, which works from an SQL database.
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. Some RapidWeaver themes contain more than one search module (depending on where you choose to have it displayed) so edits may need to be made more than once.
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. CSS consolidation options in RapidWeaver may need to be turned off.
Stretchable Body Background Images
Body background images form the main focal point in this RapidWeaver theme. However, the setup of background images in this theme differs somewhat to other themes (which tend to use tick options under the Page Inspector to choose which background image is loaded). In this particular theme, the Extra Content method is used to embed background images. This gives you precise control over image size, image source and the ability to have different images on different pages. Extra Content also enables more advanced elements to be applied as a body background, such as slideshows.
In essence, applying body background images is easy. Copy the code below and paste it into your Sidebar container (without formatting) in RapidWeaver:
The image number (in this instance 2) can be changed for any number between 1 and 15 if you are experimenting with the demo images supplied with this theme. Some themes include up to 25 demo images. If you want to use your own images, these can be dragged and dropped directly into this standard Extra Content code, replacing the image tag. Likewise you can also source background images via a URL – such as images already uploaded or those stored in a warehouse online.
%)
The target file size of background images should be 100KB - 72 DPI. Image which measure approximately 1000px square tend to give the best results across a wide range of web browsers. It is normal to expect some distortion of images if they are stretched to fill a window. Typically some images like generic landscapes, places or patterns will work better compared with images of people or animals etc. Also remember that some devices like the iPad and iPhone handle image scaling differently to desktop web browsers.
There are also two Stacks available for this theme which enable you to use the Stacks plugin by YourHead Software (not included) to easily embed background images. Use stack 1 to drag and drop an image straight in. Use stack 2 to source an image via a URL. Please note that if you use stack 1, Stacks will automatically convert the image to PNG which may result in very large image sizes, if dealing with photographic quality images. You could also embed images straight in the theme (like the existing 25) and call them via the above code.
Editing theme images using Finder
Background images used by most RapidWeaver themes 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 the theme which appears in the theme pane). 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 blank placeholder images. Placeholder images are typically white or grey in colour, and named or numbered sequentially like bg01.jpg, bg02.jpg, bg03.jpg, header-01.jpg, header-02.jpg, header-03.jpg as an example.
Any of these placeholder images can be exchanged for your own images. Swapping images like-for-like means that your images become available for section in the theme style settings. When you add new custom images, name them so that they overwrite 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 100KB.
Editing theme 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 bg01.jpg, bg02.jpg, bg03.jpg, header-01.jpg, header-02.jpg, header-03.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 additional support documentation is provided on the website: http://www.rwmultitool.com/
Editing theme images using RapidThemer
RapidThemer is a third party application which runs separate to RapidWeaver. It is free to download and use. When open, RapidThemer presents a list of themes installed on your computer. Start by selecting the theme from the theme list at the lefthand side. Next select the image set from the first drop down list in the Editable Images section. Finally select the image you want to edit from the Images drop down list next to the Image Set list. To make changes to an image, you can perform any of the following:
- Double-click the image to bring up the Edit Panel and make your adjustments
- Scale your image by inserting a new value in the width or height fields
- Crop your image by clicking on the Crop button, select the cropping area and clicking on the crop button again
- Open the selected image in an external tool to further adjust the image. Remember to save the image after completing your changes
Editing theme images using a warehouse technique
In some instances, the images you want to set as a body background or banner background may already be available to you on the internet. Some people prefer using 'warehoused' images, because they have complete control over the size and format of images. It can also enable images to be updated remotely, so for example a client may be able to change the background image in a banner container, without having access RapidWeaver itself or republish the website. Remember to respect copyright and only use images that you have permission to reuse in your website design! To embed images from a warehouse, use some custom CSS code like this:
#header { background-image: url(http://www.example.com/image1.jpg); }
The selector name (in this case 'header') may need changing to reflect the theme you're using and the name of the element you are applying the background image to. The image gets called via a URL, and this will need updating to point to the location of the image. Always use a full URL, remembering to include 'http://' or 'https://' at the start of the address. The CSS background image property is very powerful and other properties can be added to control image position, fixture and repeat. Searching online for 'CSS background image' will reveal many more informational websites and tutorials covering the use of CSS background images.
It should be pointed out as well that HTML image tags can also be used in some circumstances to embed images within a page, This is particularly useful if the area where you want the image displayed (such as a banner container) contains an Extra Content container absolutely-positioned in the top left of the region. Typically some basic HTML code like this (embedded into the corresponding Extra Content container) can be used to pull in an image:
Much alike the CSS technique, the image gets called via a URL, and this will need updating to point to the location of the image. Always use a full URL, remembering to include 'http://' or 'https://' at the start of the address. An ALT attribute (alternative text) must be provided in order for the page to validate.
Customising Fade-In Animations
These optional animations on elements like the body background, navigation bar or content container are generated using the jQuery .fadeIn() property. 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: 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) or the main content container (#main). Exact animation effect vary from theme to theme. 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.
© 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.