Theme configuration


Important note: Not all the theme configuration topics discussed on this page may be applicable to the theme you are using. Every theme has a unique set of theme functions, so the customisable options available to you may differ from the ones discussed and illustrated below. If you have questions about specific settings or customisable options in your theme, please get in contact.



ExtraContent

ExtraContent 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. Most premium ThemeFlood themes contain several ExtraContent 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 ExtraContent container, type the following into the sidebar:

<div id="myExtraContent3">Hello World!</div>

The number of the ExtraContent container can be changed, depending on which ExtraContent container you wish to use. In the above example for example, ExtraContent 3 is being used, but you could easily change the number to 7 if you wanted to place the content into ExtraContent container 7. 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 free ExtraContent 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 ExtraContent contains on a page as you see necessary. However each individual ExtraContent container should only be referenced the once. More information on ExtraContent (including free snippets and stacks) can be obtained from this website: http://extracontent.info.


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.


custom-images-finder-2

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.


RapidWeaver Multitool

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/ To use the basic functions of RapidWeaver MultiTool, follow these steps:

  1. Download and install RapidWeaver MultiTool if you have not done so already. It is best to keep RapidWeaver MultiTool in the Applications folder, so that it can easily find your themes and editable images. Launch RapidWeaver MultiTool and choose the same theme you are using in RapidWeaver. Themes are listed in the theme drop-down menu.

  2. Choose the image in a theme you want to edit from the drop-down menu. If you open the list of default themes, you can see a selection of the best images ready to be customised. If you open the complete list of themes, you have a wider selection of images. However, not all images in this list can be customised. When an image is selected, it opens in a new window.

  3. Open the folder containing your images. You can drag and drop in as many images as you want, into the window. So for example you could add several images to create a collage effect or a scrapbook effect. Normally the images automatically centre in the edit window.

  4. RapidWeaver MultiTool contains many options to edit your images. For example you can move, rotate or scale the image. The image colours can be adjusted using colour, contrast, transparency and shadow effects. Images can also be stretched to fill a canvas or set to tile. The pro version of RapidWeaver MultiTool does contain more special effects, compared with the free version. You can also add text to your images.

  5. Next you need to save the customised image, so that is becomes available for use in the theme. To do this, click the Save In Theme button. After saving, RapidWeaver automatically updates the current theme in preview, showing the changes. If theme update does not show automatically, refresh RapidWeaver preview manually (repeat Command + R twice). If you want to store a copy of the image on your computer, click the Save Image button. Likewise to restore an image in the theme back to its original state, click the Back To Original button.



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:

<img src="http://www.example.com/image1.jpg" alt="Background 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.


SS3 slideshows

SeyDoggy Slideshow (abbreviated to SS3) is a new theming technique, which enables you to generate basic slideshows within a theme banner or header container (in supported themes). Developed by Adam Merrifield at SeyDesign, this slideshow system is both easy to use and remarkably powerful. It is ideal if you want to quickly deploy a professional looking slideshow. SS3 falls somewhere between a rudimentary slideshow stack and a full slideshow plugin like WeaverPix. Themes with support for SS3 contain several style settings, enabling you to switch on and configure an SS3 slideshow without the technicalities of code or plugins. For advanced users, SS3 has an open API which enables you to inject your own code and configurations.

SS3 basic configuration
Themes with support for SS3 typically have 4 theme settings named SS3 Source, SS3 Duration, SS3 Animation and SS3 Transition. These settings are pretty much self explanatory with some experimenting, and would enable you to customise the source of slideshow images, effect timings and the animation effect between slides. SS3 can be set to read the first 20 placeholder images within a theme, and these images are intended to be swapped over with your own. See the section in the user guide above, for more information on how to customise theme images. As mentioned already, an open API enables you to add code snippets to your page and squeeze extra functionality out of SS3. Some examples of API usage are provided below.

SS3 slide numbers
This code snippet enables you to pick and choose exactly which images get shown in your slideshow. Because this code snippet comprises of Javascript code, it should be entered in the Custom JavaScript box within the RapidWeaver Page Inspector.

var sdSlideNum = [7,4,1,9,16];

Each number corresponds to the number of the header or banner image you wish to display in the slideshow. So for example, number 7 would denote image 7. The order of your numbers will correspond with the order of your slides. Numbers are presented in the form of a comma-separated list, with the exception being the final image number which does not have a comma appended. Only specify slide numbers in this code snippet - do not include file names, text or any other characters.

SS3 image warehousing
This technique allows you to pull in images from an offsite warehouse or another folder on your web server. It is particularly useful if you intend to update images remotely from outside of RapidWeaver, or allow others to publish images into the slideshow. This code snippet comprises of Javascript code, it should be entered in the Custom JavaScript box within the RapidWeaver Page Inspector.

var sdSlideWH = [
"http://www.example.com/images/header3.jpg",
"http://www.example.com/images/header5.jpg",
"http://www.example.com/images/header1.jpg",
"http://www.example.com/images/header9.jpg",
"http://www.example.com/images/header15.jpg"
];

You must use a full URL to the image, including either 'http://' or 'https://' at the start of the address. Only reuse images which you have permission to reproduce on your website. You can list an unlimited number of images, but remember that page load times will increase as you add more and more images. Ideally images for the slideshow must already be scaled to the correct dimensions and be presented in either JPG or PNG with a resolution of 72 DPI.

SS3 slide links
The SS3 system allows you to set slideshow images as links to anchors, resources or pages. For example you could have SS3 cycling through a set of images that relate to products you are selling on your website, and set the images as links through to those individual products for end users to click and visit. This code snippet comprises of Javascript code, it should be entered in the Custom JavaScript box within the RapidWeaver Page Inspector.

var sdSlideLinks = [
"http://www.example.com/hats/",
"http://www.example.com/coats/",
"http://www.example.com/shoes/",
"http://www.example.com/socks/",
"http://www.example.com/gloves/"
];

You must use a full URL for the links, including either 'http://' or 'https://' at the start of the address. The order you present these links in should match the number of slides in the slideshow and coincide with the relevant slides. For example if slide 3 showed pictures of shoes, you would want to ensure the link to your shoes page was third in the list.

SS3 SlideBox
This SS3 code snippet changes how the slideshow functions. Instead of cycling through a set of images, you can choose a single static image in the theme style settings. Then using this code snippet, text can be set to rotate over the static image. The normal slideshow animation and effect duration settings can be used. Paste this HTML code into any content area in RapidWeaver:

<div class="sdSlideBoxSnippet" id="mySdSlideBox1">
This content will appear as slide 1.
Some sample content. Add whatever you like here.
</div>

<div class="sdSlideBoxSnippet" id="mySdSlideBox2">
This content will appear as slide 2.
Some sample content. Add whatever you like here.
</div>

<div class="sdSlideBoxSnippet" id="mySdSlideBox3">
This content will appear as slide 3.
Some sample content. Add whatever you like here.
</div>

If you are pasting this code into a styled text region, remember to highlight the HTML code portions and go to Format > Ignore Formatting in the RapidWeaver menu. To add further slide containers, duplicate the final slide and rename it sequentially. So the following slide would be number 4, then 5, then 6 and so on. Again this code needs to be pasted into a content or sidebar region of your page and you would need to select the Slidebox option as the SS3 Source, within the theme style settings.

Slidebox Stack

SlideBox is a simple, effective stack that allows you to create a content-rich slideshow in any SeyDesign or ThemeFlood SS3 enabled theme. You can merge multiple content types together like text, links, images, code and styled content, and create a set of slides. Using the built-in SS3 settings in your theme, you can add flare to your content slideshow with speed settings, delays and special effects. The SlideBox stack is a free download, and more details including a video can be found here: http://seydesign.com/products/Stacks/Free/SlideBox/

Important - any questions relating to SS3 in ThemeFlood RapidWeaver themes should be directed to the ThemeFlood support page. Other companies like SeyDesign are unable to provide technical support for ThemeFlood themes. More details about the SS3 API can be sourced for this website: https://github.com/seyDoggy/SeydoggySlideshow


Creating a banner or header slideshow using WeaverPix

WeaverPix is a third-party plugin developed by Greg Barchard, for the creation of website slideshows in RapidWeaver. WeaverPix is the preferred add-on to use for the creation of advanced website slideshows, because it is regularly updated and has an excellent web browser and theme compatibility. The user interface in WeaverPix is also very pleasant to use. WeaverPix can be purchased separately from Greg's website. Start by adding a WeaverPix page to your project, and give this page a sensible name in the RapidWeaver sidebar. On your WeaverPix page, open the RapidWeaver Page Inspector and set the page so that it is hidden from the menu. Then setup the slideshow with your preferred images and slideshow settings. If you click on the preferences button in WeaverPix, you can choose from many different settings, sorted under the tabs at the top. Ensure that the slideshow width and height dimensions are set to the same size as your banner or header container.

Screen Shot 2011-09-03 at 16.18.27
You will need to find out which ExtraContent container is the designated container for banner or header slideshows in your theme. This can be done by using the 'Preview ExtraContent Containers' tick option in the theme settings. Look for an ExtraContent container located in the banner or header container, which sits flush with the container edge. In some themes, this container may actually say "for use with embedded slideshows" or words to that effect. Make a mental note of the ExtraContent container number. Switch back to WeaverPix and open the WeaverPix preferences. Under the Advanced tab (pictured right), tick the ExtraContent option and type the ExtraContent number in the box below. At this point the WeaverPix slideshow will always get loaded into that designated ExtraContent container.

A WeaverPix slideshow is not a lot of use if you cannot use it on multiple pages! So at this point you will need to add a PlusKit page to your website (if you have not done so already). Then use the standard @import call to pull in the WeaverPix page to any pages where you want the slideshow shown. Remember that the @import function is not compatible with all RapidWeaver page types, so if in doubt you should check the PlusKit documentation on the Loghound Software website. Likewise if you have never used PlusKit or the @import function before, it is well worth doing some background research and reading the introductory tutorials available.


Screen Shot 2011-09-03 at 16.23.23

Creating a banner or header slideshow using a Symfonip plugin

Symfonip develop several basic slideshow plugins like SymNivo and SymTuneSlider. Each one of these plugins uses a different set of Javascript libraries, and therefore different slideshow variants can be achieved. These plugins are each developed by Symfonip and therefore available for purchase separately. The setup of Symfonip plugin slideshows is not too dissimilar to the setup of a WeaverPix slideshow. Ultimately it requires you to add the Symfonip page style to your page, and setting this page to hide under the RapidWeaver Page Inspector. Setup the slideshow using your desired images and slideshow settings, available in the settings window in the plugin.

Ensure that the Symfonip slideshow width and height dimensions are set to the same size as your banner or header container. You will need to find out which ExtraContent container is the designated container for banner or header slideshows in your theme. This can be done by using the 'Preview ExtraContent Containers' tick option in the theme settings. Look for an ExtraContent container located in the banner or header container, which sits flush with the container edge. In some themes, this container may actually say "for use with embedded slideshows" or words to that effect. Make a mental note of the ExtraContent container number. Switch back to your Symfonip plugin and open the slideshow settings in the RapidWeaver Page Inspector. Towards the bottom, use the pull down menu to select the desired ExtraContent container (pictured right). At this point the Symfonip slideshow will always get loaded into that designated ExtraContent container.

At this point you will need to add a PlusKit page to your website (if you have not done so already). Then use the standard @import call to pull in the Symfonip slideshow page to any pages where you want the slideshow shown. Remember that the @import function is not compatible with all RapidWeaver page types, so if in doubt you should check the documentation on the Loghound Software website. Likewise if you have never used PlusKit or the @import function before, it is well worth doing some background research and reading the free introductory tutorials available.


Creating a banner or header slideshow using other plugins, stacks or code snippets

It is difficult to provide exact documentation that covers every slideshow solution. The company who have provided you with the slideshow plugin or code should be able to provide you with details of how to embed this slideshow within a page. Typically though you should lookup the designated slideshow ExtraContent container in your theme, by using the 'Preview ExtraContent Containers' option in the Miscellaneous theme settings. Look for an ExtraContent container located in the banner or header container, which sits flush with the container edge. In some themes, this container may actually say "for use with embedded slideshows" or words to that effect. Make a note of the ExtraContent container number, and then in the sidebar, enter the standard ExtraContent code snippet like this:

<div id=myExtraContent4>
Slideshow code goes here
</div>

In the area denoted 'slideshow code goes here', replace the text with your slideshow code. If for example you have created a Flash slideshow using BannerZest, you would enter the generated BannerZest code here. Likewise if you are using a slideshow stack or another slideshow solution, the code or the PlusKit @import call would need to go in this space. Change the ExtraContent number in the above code to match the number of the designated slideshow container in your RapidWeaver theme.


screen-shot-2010-02-04-at-19-1.30.46

Adding icons to links which open in a new window

If you have links which open in a new window, you can place a small icon next to these links to provide an indication for end users. To do this, when you create a link in RapidWeaver, add a class selector to the link (in the new link window pictured right) with a selector name of "external". All links with a class="external" attribute will have a small blue icon displayed next to them. This can be changed over to another icon in the theme contents if required. The icon is stored in images/editable_images/ within the theme contents.


Embedded Fonts

Embedded fonts have become a popular element in modern websites, and enable you to use some more 'exotic' font faces for text, instead of common web-safe font faces. Used correctly, embedded fonts can really empower a page design and give it a professional appearance. There are many services around which can be used for setting up embedded fonts in a RapidWeaver theme. Some of these services are free, whereas others are subscription based. You cannot simply just pull fonts off your computer and use them in a website - embedded fonts have to be presented in a special format and you need to obtain a license which permits you to reuse the fonts in your design. In effect, embedded fonts are fonts which people download from your website in the background, and enable them to view your content using a different font face.

Most RapidWeaver users have found that the new Google Fonts Directory service offers the best solution for embedding fonts within a website. All of the featured fonts are free to use in personal or commercial websites (subject to the terms and conditions outlined on the website), the fonts work well in the RapidWeaver environment and generally the embed process is much easier (compared with other services). Here are some guidance notes on how to embed fonts using the Google Font directory service:

  1. Go to Google Web Fonts and find a nice font you want to use: http://www.google.com/webfonts
    Some fonts work better than others. It is wise to choose something that would match the rest of your page and provide plenty of clarity. When you find a font you like, click on the blue Quick Use link.

  2. Choose the font styles you want (e.g. bold, regular, italicised etc.). Bare in mind that using many font styles can slow down your page, so only select the essential font styles that you need. Some fonts do not provide multiple font styles. A bandwidth meter gets displayed to illustrate the page load.

  3. In the blue box a little further down the page, copy the standard font embed code. It looks something like this:

    <link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>

    In RapidWeaver, open the Page Inspector and paste this code into the Custom Header box. Don't put the code anywhere else, because it is unlikely to work.

  4. At the bottom of the Google Fonts Quick Use page, copy the font stack to your clipboard. This is typically a string of font names that looks like this:

    font-family: 'Sansita One', cursive;

    Paste this code into the Custom CSS box in the RapidWeaver Page Inspector.

  5. At this point you will need to tell a web browser what elements need to have the custom font applied. If you have got Web Developer Tools enabled in RapidWeaver preferences, you should find that right-clicking an element in RapidWeaver preview mode and selecting inspect from the menu will tell you the name of the element. For example 'header h1'. So the code you entered in the Custom CSS box can be modified to include the element (selector) name and a pair of open and close brackets like this:

    #siteTitle h1 {
    font-family: 'Sansita One', cursive;
    }

    Class selector names start with a period (.) character and ID selectors start with a hash (#) character. The same code would need to be repeated on each page, unless you open the theme contents and paste the above code into the custom.css file. Often you may find that the font only previews correctly after the page is exported or previewed outside of RapidWeaver. If you don't see the font rendering correctly in Safari, use the Activity Window or WebKit Inspector to identify broken file links or view the console.



Photogenic body background images

Stretched Background Images

This topic applies to themes like Photogenic and Studio, which support fullscreen, stretched background images. If your theme uses normal background images, please refer to the section on editing theme background images. Setup of stretched background images differs somewhat to other themes (which tend to use tick options under the Page Inspector to choose which background image is loaded). The ExtraContent 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. ExtraContent 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:

<div id="myExtraContent1"><img src="%pathto(images/editable_images/2.jpg)%" alt="background" /></div>

The image number (in this instance 2) can be changed for any number between 1 and 25 if you are experimenting with the demo images supplied with this theme. If you want to use your own images, these can be dragged and dropped directly into this standard ExtraContent 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.


Mega Menu Setup

Mega Menu's are a relatively new concept in web design, and have proved particularly popular as an alternative to conventional drop-down menu's. They are often favoured from a usability perspective, as more links are displayed to end users and organised by category for easier selection. For example, a single drop-down panel may contain several headings with sets of links presented underneath in columns. This may be easier for end users to navigate, rather than having to drill down through a long set of drop-down menu's.

Flood is the first ever RapidWeaver theme to properly implement support for mega-menu's. Setup is comparatively easy, and the theme will do all the hard work and coding for you. The first stage is to open the Page Inspector in RapidWeaver and switch the navigation style to a Mega Menu style. There are several Mega Menu settings available – each one has a different column width for the drop-down panels. Normally the 125px or 150px are the best settings to use.

The Flood theme will look at how your website is structured in RapidWeaver and build the mega menu around this structure. In essence, you must have three levels of pages in order to create a Mega Menu. Parent pages (like a drop-down menu) will be presented horizontally in a line at the top. Second level child pages will act as category (sub headings) within the menu. Third level child pages will form page links under each sub heading. If you stick to this site structure, you wont have any problems. Use the image below as a guide for setting up your pages. You can easily resort pages in RapidWeaver by dragging them and nesting them in the webpages panel on the left.



Depending on how many second level child pages you have determines how many columns you have in the drop-down panels. This gives you great flexibility to build a mega-menu with varying numbers of links. If a parent page does not have any sub-pages under it, the link will still be displayed at the top, but there will be no drop-down panel when the link is hovered over.

By their nature, Mega Menu's generate large drop-down panels which are aligned immediately under parent links. Care should be taken that drop-down panels on the righthand side do not overflow outside of the screen when hovered over. Other than reducing the number of sub headings in these rightmost panels, you could use singular parent links (without panels) to pad the menu away from the right, or change the site title alignment to right, so that your mega menu is aligned on the left instead for more space.

< Previous Chapter - Style & Colour Settings
Next Chapter - Theming Techniques >