Theme Installation

PLEASE NOTE: If you have a previous version of the same theme already installed on your computer, it will be overwritten. Be sure to make a backup copy of your theme first, before proceeding with the directions below.

Installing Your Theme:
  1. Once your purchase is complete and you've downloaded the theme disk image, your Mac should automatically expand and mount the file for you. If not, search your Downloads folder (or wherever the file was downloaded to) and double click on the file (e.g., Gravity-v1.2.dmg, Phelix-v2.0.dmg, etc.) to mount it.
  2. A window displaying the contents of the file you downloaded should now be open on your screen. Double click the .rwtheme file to install your brand new theme.
That's it, you're done! You will need to restart RapidWeaver before using your new theme.

*If you have any problems using the directions above, you can also manually install your theme. To do this, just drag and drop the .rwtheme file to the ~/Library/Application Support/RapidWeaver folder on your Mac.

The tilde "~" represents your Home folder, and will be unique to your computer. This process will also work for updating a currently installed theme, but will overwrite the previous version, so please backup your theme file first.

Upgrading Your Theme to a New Version

Before Upgrading/Updating


As always, we highly recommend backing up your data first, before installing the updated version of your theme. If you're unsure how to do this, here's the process we recommend:
  1. Theme: Right-click on the theme from within RapidWeaver (via the Theme Drawer) and select "Duplicate". Then rename it to something like "Your_themes_name Backup". You should also save the original version in a completely separate location, such as a USB Flash drive or online backup service like Dropbox.
  2. Styles: Open the Page Inspector -> Styles tab, click on the gear icon in the lower right, and select "Save style as...". You'll most likely want to do this for all the various pages and sites you're using with the theme, so that you don't have to reselect the colors and theme options again.
  3. Project file: Just make a copy like you normally would for any regular file.
Once you've backed up all your data (don't skip these steps), then download the update (via the link sent to your email address) and follow the instructions below for the version of RapidWeaver you are using.

RW5 Users:

  1. Download the theme via the link send to your email address
  2. Open the DMG file
  3. Double-click the .rwtheme file to install
  4. Restart RapidWeaver

RW4 Users:

  1. From within RapidWeaver, delete the currently installed version of your theme (you backed up your theme, right?)
  2. Close RapidWeaver
  3. Download the theme via the link send to your email address
  4. Open the DMG file
  5. Double-click the .rwtheme file to install
  6. Restart RapidWeaver
After updating, you may need to reapply styles on some pages. To do so, open the Page Inspector and select the "Styles" tab, then click on the folder icon in the lower right corner and choose from the styles you saved in Step 2 above. If you need more detailed information on saving/updating theme styles, see the section on this page labeled "Saving & Updating Theme Style (.rwstyle) files."

Saving & Updating Theme Style (.rwstyle) files

NimbleHost themes provide you with many different theme options to choose from. Chances are you spend a lot of time carefully selecting those options, and would like to save them for use with another project. You may also need to update those saved styles when we release theme updates.

To save theme settings for a particular page in your project

1. In RapidWeaver®, select the page you want to save the settings for.

2. Open the Page Inspector, and select the Styles tab.

3. Click on the gear-icon button in the lower right, and select "Save Style As..."

4. Name your saved style whatever you like. RapidWeaver® will then save your settings as an ".rwstyle" file.

To update a saved style for use with an updated theme

1. On your Mac, navigate to the "~/Library/Application Support/RapidWeaver/Theme Styles" folder. The tilde "~" represents your Home folder.

2. Inside the Theme Styles folder are all the theme styles you've saved through RapidWeaver's Page Inspector.
*NOTE: If you have not saved any theme styles through the Page Inspector before, the Theme Styles folder may be empty, or may not even exist. In that case, follow the directions in the section above for saving theme settings.

3. Select the .rwstyle file you want to update, right-click on it, and a contextual menu will pop up. Select "Duplicate" - this will make a copy of your .rwstyle, which you can keep as a backup.

4. Again, select the .rwstyle file you want to update, right-click on it, and a contextual menu will pop up again. Hover your mouse over the "Open With" option, and then select "Other".

5. A new window will open where you can choose the program to open the .rwstyle file. Any basic text editor will work fine, such as TextEdit (which is included with every Mac), or the free TextWrangler from Bare Bones Software.
*NOTE: DO NOT SELECT RapidWeaver® - if you select RapidWeaver®, you will not be able to open and edit the .rwstyle file

6. When the .rwstyle file is open, you will see a bunch of code that looks similar to the screenshot below:
Mirage - Blue Maroon.rwstyle1
6. Scroll to the bottom of the file (if necessary), and you'll see a section similar to that highlighted with a red box in the screenshot above. Note the line

<key>Theme Name</key>

and below that, the actual name of the theme

<string>Mirage</string>


7. To update your .rwstyle file, simply change the name of the theme listed in this section to match the theme you want to use the .rwstyle with.

For example, if you were using Unity v2.0, then the original theme name for the .rwstyle file would be

<string>Unity v2.0</string>

To update such an .rwstyle file to use Unity v2.4 change the theme name to

<string>Unity</string>

Depending on the theme you are using, it may or may not have a version number as part of the theme name. If you're not sure what the correct theme name should be when updating your .rwstyle, please contact us. Please note, for more consistency, we will be removing version numbers from all theme names in the future.

8. Once you've entered the correct theme name, save and close the file. You should now be ready to select and use the saved styled with the updated theme.

Custom Header/Background Images

Use these links to jump to the appropriate section:

Desktop:   Atlas   |   Gravity   |   Flexture   |   Dexture   |   Qube   |   Phelix   |   Mirage   |   Glide   |   Unity

Mobile:   SmartDock Mobile   |   MobileFusion


RapidWeaver®® 5 Users

Some steps below refer to the page assets feature available in RW4. Page assets have been changed to Sitewide Resources in RW5 - see our blog post about this for more information about how to switch from "assets" to "resources".


 
Atlas:
  1. Once you've installed Atlas, open RapidWeaver®, and then open the Theme Drawer (select "Show Themes" from RapidWeaver®'s View menu).
  2. Select the Atlas theme, and then right-click on it once. A contextual menu will appear - select the "Show Contents in Finder" option.
  3. In the following window navigate to the /images/editable_images folder. Place your custom header images here, in either png or jpg format, and rename them like so:
  • Header images should be labeled: image1.jpg, image2.jpg, etc. up to image25.jpg - images 26-50 are for png files, e.g. image26.png, image27.png, and so forth.

That's it, you're done! (Be sure to select the image you added in theme options.)

To add your own custom theme background images to Atlas - Follow the same directions above, but when renaming use the following:
  • background1.jpg, background2.jpg, etc. up to background10.jpg - backgrounds 11-20 are for png files, e.g., background11.png, background12.png, and so forth.

ExtraContent Area background images in Atlas - All the ExtraContent areas in Atlas use the same background images specified above (background1.jpg - background10.jpg, and background11.png - background20.png).


If you're having problems with the above directions, try these alternative methods.

RapidWeaver®® 5:
  1. Open your project in RapidWeaver®® and make sure you're in Edit mode.
  2. Drag and drop your custom image into the Resources section of RapidWeaver®®'s left sidebar.
  3. When you've done that, open the Page Inspector, click on the "Header" tab, then select the "CSS" tab inside that window.
  4. Paste this css code into the Custom CSS field:
.header-image {
    background-image: url(
%resource(yourcustomimage.jpg)%);
}


RapidWeaver®® 4:
  1. Open your project in RapidWeaver®® and make sure you're in Edit mode.
  2. Open the Page Inspector and click on the “Header” tab.
  3. Select the “Assets” tab on that window (about halfway down).
  4. Add your custom image by clicking on the "Add File" button at the bottom, then choosing a file on your Mac.
  5. When you've done that, select the “CSS” tab (to the left of the “Assets” tab)
  6. Paste this css into the Custom CSS field:
.header-image {
    background-image: url(assets/
yourcustomimage.jpg);
}

***Make sure to change the image file name (highlighted red above) to match what you added to Resources/Assets.

That will give you a custom banner graphic of your choosing on every page you like. 



 
Gravity:
Our Gravity theme doesn't have a traditional header image area like that in many RapidWeaver®® themes. However, adding a header image is as simple as drag and drop. Just add your header image to the Sidebar area in the Page Inspector, and it will appear in the Feature Content area, similar to the Blog page of our Gravity Preview site. For more info visit the Gravity product page, scroll down to the bottom, and see the section called "What about header images? Header slideshows?".

Keep in mind, RapidWeaver®® may automatically resize images you add to the sidebar. If your image appears smaller than you expect, simply double-click on it (in Edit mode) and the Media Editor window will appear. Make sure the "Scale" checkbox is checked, and that the percentage is 100%.

Background images/textures
A subtle texture is applied to the background in Gravity by default (using a transparent PNG file). If you'd like to replace this image with your own texture/image, follow these directions:
  1. Once you've installed Gravity, open RapidWeaver®®, and then open the Theme Drawer (select "Show Themes" from RapidWeaver®®'s View menu).
  2. Select the Gravity theme, and then right-click on it once. A contextual menu will appear - select the "Show Contents in Finder" option.
  3. In the following window navigate to the /images/editable_images folder. Place your custom background texture/image here, in either png format, and rename it to siteBackground.png.
If you'd like to remove the background texture, simply select the appropriate option in the "Feature Content Background Gradient" section of Gravity's theme options.


 
Flexture:
  1. Once you've installed Flexture, open RapidWeaver®®, and then open the Theme Drawer (select "Show Themes" from RapidWeaver®®'s View menu).
  2. Select the Flexture theme, and then right-click on it once. A contextual menu will appear - select the "Show Contents in Finder" option.
  3. In the following window navigate to the /images/editable_images folder. Place your custom header images here, in either png or jpg format, and rename them like so:
  • Header images should be labeled: image1.jpg, image2.jpg, etc. up to image25.jpg - images 26-50 are for png files, e.g. image26.png, image27.png, and so forth.

That's it, you're done! (Be sure to select the image you added in theme options.)

To add your own custom theme background images to Flexture - Follow the same directions above, but when renaming use the following:
  • background1.png, background2.png, etc. up to background5.png - backgrounds 6-10 are for jpg files, e.g., background6.jpg, background7.jpg, and so forth.

To add your own custom ExtraContent Area 6 background images to Flexture - Follow the same directions above, but when renaming use the following:
  • custom1.png, custom2.png, etc. up to custom5.png - backgrounds 6-10 are for jpg files, e.g., custom6.jpg, custom7.jpg, and so forth.


If you're having problems with the above directions, try these alternative methods.

RapidWeaver®® 5:
  1. Open your project in RapidWeaver®® and make sure you're in Edit mode.
  2. Drag and drop your custom image into the Resources section of RapidWeaver®®'s left sidebar.
  3. When you've done that, open the Page Inspector, click on the "Header" tab, then select the "CSS" tab inside that window.
  4. Paste this css code into the Custom CSS field:
.headerImage {
    background-image: url(
%resource(yourcustomimage.jpg)%);
}


RapidWeaver®® 4:
  1. Open your project in RapidWeaver®® and make sure you're in Edit mode.
  2. Open the Page Inspector and click on the “Header” tab.
  3. Select the “Assets” tab on that window (about halfway down).
  4. Add your custom image by clicking on the "Add File" button at the bottom, then choosing a file on your Mac.
  5. When you've done that, select the “CSS” tab (to the left of the “Assets” tab)
  6. Paste this css into the Custom CSS field:
.headerImage {
    background-image: url(assets/
yourcustomimage.jpg);
}

***Make sure to change the image file name (highlighted red above) to match what you added to Resources/Assets.

That will give you a custom banner graphic of your choosing on every page you like. 

 
Dexture:
  1. Once you've installed Dexture, open RapidWeaver®®, and then open the Theme Drawer (select "Show Themes" from RapidWeaver®®'s View menu).
  2. Select the Dexture theme, and then right-click on it once. A contextual menu will appear - select the "Show Contents in Finder" option.
  3. In the following window navigate to the /images/editable_images folder. Place your custom header images here, in either png or jpg format, and rename them:
  • Page banner images should be labeled: image1.jpg, image2.jpg, etc. up to image25.jpg - images 26-50 are for png files, e.g. image26.png, image27.png, and so forth.

That's it, you're done! (Be sure to select the image you added in theme options.)

To add your own custom theme background images to Dexture - Follow the same directions above, but when renaming use the following:
  • background1.png, background2.png, etc. up to background5.png - backgrounds 6-10 are for jpg files, e.g., background6.jpg, background7.jpg, and so forth.

To add your own custom ExtraContent Area 6 background images to Dexture - Follow the same directions above, but when renaming use the following:
  • custom1.png, custom2.png, etc. up to custom5.png - backgrounds 6-10 are for jpg files, e.g., custom6.jpg, custom7.jpg, and so forth.


If you're having problems with the above directions, try this alternative method:

RapidWeaver®® 5:
  1. Open your project in RapidWeaver®® and make sure you're in Edit mode.
  2. Drag and drop your custom image into the Resources section of RapidWeaver®®'s left sidebar.
  3. When you've done that, open the Page Inspector, click on the "Header" tab, then select the "CSS" tab inside that window.
  4. Paste this css code into the Custom CSS field:
.headerImage {
    background-image: url(
%resource(yourcustomimage.jpg)%);
}


RapidWeaver®® 4:
  1. Open your project in RapidWeaver®® and make sure you're in Edit mode.
  2. Open the Page Inspector and click on the “Header” tab.
  3. Select the “Assets” tab on that window (about halfway down).
  4. Add your custom image by clicking on the "Add File" button at the bottom, then choosing a file on your Mac.
  5. When you've done that, select the “CSS” tab (to the left of the “Assets” tab)
  6. Paste this css into the Custom CSS field:
.headerImage {
    background-image: url(assets/
yourcustomimage.jpg);
}

***Make sure to change the image file name (highlighted red above) to match what you added to Resources/Assets.

That will give you a custom banner graphic of your choosing on every page you like. 

 
Qube:

  1. Once you've installed Qube, open RapidWeaver®®, and then open the Theme Drawer (select "Show Themes" from RapidWeaver®®'s View menu).
  2. Select the Qube theme, and then right-click on it once. A contextual menu will appear - select the "Show Contents in Finder" option.
  3. In the following window navigate to the /images/editable_images folder. Place your custom header images here, in either png or jpg format, and rename them:
  • Page banner images should be labeled: image1.jpg, image2.jpg, etc. up to image25.jpg - images 26-50 are for png files, e.g. image26.png, image27.png, and so forth.

That's it, you're done! (Be sure to select the image you added in theme options.)

To add your own custom theme background images to Qube - Follow the same directions above, but when renaming use the following:
  • background1.jpg, background2.jpg, etc. up to background10.jpg - backgrounds 11-20 are for png files, e.g., background11.png, background12.png, and so forth.


If you're having problems with the above directions, try this alternative method:

RapidWeaver®® 5:
  1. Open your project in RapidWeaver®® and make sure you're in Edit mode.
  2. Drag and drop your custom image into the Resources section of RapidWeaver®®'s left sidebar.
  3. When you've done that, open the Page Inspector, click on the "Header" tab, then select the "CSS" tab inside that window.
  4. Paste this css code into the Custom CSS field:
.headerImage {
    background-image: url(
%resource(yourcustomimage.jpg)%);
}


RapidWeaver®® 4:
  1. Open your project in RapidWeaver®® and make sure you're in Edit mode.
  2. Open the Page Inspector and click on the “Header” tab.
  3. Select the “Assets” tab on that window (about halfway down).
  4. Add your custom image by clicking on the "Add File" button at the bottom, then choosing a file on your Mac.
  5. When you've done that, select the “CSS” tab (to the left of the “Assets” tab)
  6. Paste this css into the Custom CSS field:
.headerImage {
    background-image: url(assets/
yourcustomimage.jpg);
}

***Make sure to change the image file name (highlighted red above) to match what you added to Resources/Assets.

That will give you a custom banner graphic of your choosing on every page you like. 

 
Phelix: - Updated for v1.7+
  1. Once you've installed Phelix, open RapidWeaver®®, and then open the Theme Drawer (select "Show Themes" from RapidWeaver®'s View menu).
  2. Select the Phelix theme, and then right-click on it once. A contextual menu will appear - select the "Show Contents in Finder" option.
  3. In the following window navigate to the /images/editable_images folder. Place your custom page banner images here, in either png or jpg format, and rename them:
  • Page banner images should be labeled: image1.jpg, image2.jpg, etc. up to image25.jpg - images 26-50 are for png files, e.g. image26.png, image27.png, and so forth.

That's it, you're done! (Be sure to select the image you added in theme options.)

To add your own custom theme background images to Phelix - Follow the same directions above, just be sure your image is labeled correctly - custombg1.jpg, custombg2.jpg, custombg3.png, or custombg4.png (the correct labels are also listed in Phelix's theme options under the 'Theme Background' section).


If you're having problems with the above directions, try this alternative method:

RapidWeaver® 5:
  1. Open your project in RapidWeaver® and make sure you're in Edit mode.
  2. Drag and drop your custom image into the Resources section of RapidWeaver®'s left sidebar.
  3. When you've done that, open the Page Inspector, click on the "Header" tab, then select the "CSS" tab inside that window.
  4. Paste this css code into the Custom CSS field:
#headerImage {
    background-image: url(
%resource(yourcustomimage.jpg)%);
}


RapidWeaver® 4:
  1. Open your project in RapidWeaver® and make sure you're in Edit mode.
  2. Open the Page Inspector and click on the “Header” tab.
  3. Select the “Assets” tab on that window (about halfway down).
  4. Add your custom image by clicking on the "Add File" button at the bottom, then choosing a file on your Mac.
  5. When you've done that, select the “CSS” tab (to the left of the “Assets” tab)
  6. Paste this css into the Custom CSS field:
#headerImage {
    background-image: url(assets/
yourcustomimage.jpg);
}

***Make sure to change the image file name (highlighted red above) to match what you added to Resources/Assets.

That will give you a custom banner graphic of your choosing on every page you like. 



 
Mirage: - Updated for v2.3+
  1. Once you've installed Mirage, open RapidWeaver®, and then open the Theme Drawer (select "Show Themes" from RapidWeaver®'s View menu).
  2. Select the Mirage theme, and then right-click on it once. A contextual menu will appear - select the "Show Contents in Finder" option.
  3. In the following window navigate to the /images/editable_images folder. Place your custom images here, in either png or jpg format, and rename them:
  • Page banner images should be labeled: image1.jpg, image2.jpg, etc. up to image20.jpg - images 21-30 are for png files.
  • Theme background images should be labeled: pattern1.png, pattern2.png, etc. up to pattern5.png - patterns 6-10 are for jpg files.

That's it, you're done! (Be sure to select the image you added in theme options.)


If you're having problems with the above directions, try this alternative method:

RapidWeaver® 5:
  1. Open your project in RapidWeaver® and make sure you're in Edit mode.
  2. Drag and drop your custom image into the Resources section of RapidWeaver®'s left sidebar.
  3. When you've done that, open the Page Inspector, click on the "Header" tab, then select the "CSS" tab inside that window.
  4. Paste this css code into the Custom CSS field:
#headerImage {
    background-image: url(
%resource(yourcustomimage.jpg)%);
}


RapidWeaver® 4:
  1. Open your project in RapidWeaver® and make sure you're in Edit mode.
  2. Open the Page Inspector and click on the “Header” tab.
  3. Select the “Assets” tab on that window (about halfway down).
  4. Add your custom image by clicking on the "Add File" button at the bottom, then choosing a file on your Mac.
  5. When you've done that, select the “CSS” tab (to the left of the “Assets” tab)
  6. Paste this css into the Custom CSS field:
#headerImage {
    background-image: url(assets/
yourcustomimage.jpg);
}

***Make sure to change the image file name (highlighted red above) to match what you added to Resources/Assets.

That will give you a custom banner graphic of your choosing on every page you like. 



 
Glide: - Updated for v3.0+
  1. Once you've installed Glide, open RapidWeaver®, and then open the Theme Drawer (select "Show Themes" from RapidWeaver®'s View menu).
  2. Select the Glide theme, and then right-click on it once. A contextual menu will appear - select the "Show Contents in Finder" option.
  3. In the following window navigate to the /images/editable_images folder. Place your custom header images here, in either png or jpg format, and rename them:
  • Header images should be labeled: image1.png, image2.png, etc. up to image10.png - images 11-20 are for jpg files.

That's it, you're done! (Be sure to select the image you added in theme options.)


If you're having problems with the above directions, try this alternative method:

RapidWeaver® 5:
  1. Open your project in RapidWeaver® and make sure you're in Edit mode.
  2. Drag and drop your custom image into the Resources section of RapidWeaver®'s left sidebar.
  3. When you've done that, open the Page Inspector, click on the "Header" tab, then select the "CSS" tab inside that window.
  4. Paste this css code into the Custom CSS field:
#pageBanner {
    background-image: url(
%resource(yourcustomimage.jpg)%);
}


RapidWeaver® 4:
  1. Open your project in RapidWeaver® and make sure you're in Edit mode.
  2. Open the Page Inspector and click on the “Header” tab.
  3. Select the “Assets” tab on that window (about halfway down).
  4. Add your custom image by clicking on the "Add File" button at the bottom, then choosing a file on your Mac.
  5. When you've done that, select the “CSS” tab (to the left of the “Assets” tab)
  6. Paste this css into the Custom CSS field:
#pageBanner {
    background-image: url(assets/
yourcustomimage.jpg);
}

***Make sure to change the image file name (highlighted red above) to match what you added to Resources/Assets.

That will give you a custom banner graphic of your choosing on every page you like. 



 
Unity: - Updated for v2.4
  1. Once you've installed Unity, open RapidWeaver®, and then open the Theme Drawer (select "Show Themes" from RapidWeaver®'s View menu).
  2. Select the Unity theme, and then right-click on it once. A contextual menu will appear - select the "Show Contents in Finder" option.
  3. In the following window navigate to the /images/editable_images folder. Place your custom page banner images here, in either png or jpg format, and rename them:
  • Page banner images should be labeled: banner1.png, banner2.png, etc. up to banner15.png - banners 16-30 are for jpg files.

That's it, you're done! (Be sure to select the image you added in theme options.)


If you're having problems with the above directions, try this alternative method:

RapidWeaver® 5:
  1. Open your project in RapidWeaver® and make sure you're in Edit mode.
  2. Drag and drop your custom image into the Resources section of RapidWeaver®'s left sidebar.
  3. When you've done that, open the Page Inspector, click on the "Header" tab, then select the "CSS" tab inside that window.
  4. Paste this css code into the Custom CSS field:
#pageBanner {
    background-image: url(
%resource(yourcustomimage.jpg)%);
}


RapidWeaver® 4:
  1. Open your project in RapidWeaver® and make sure you're in Edit mode.
  2. Open the Page Inspector and click on the “Header” tab.
  3. Select the “Assets” tab on that window (about halfway down).
  4. Add your custom image by clicking on the "Add File" button at the bottom, then choosing a file on your Mac.
  5. When you've done that, select the “CSS” tab (to the left of the “Assets” tab)
  6. Paste this css into the Custom CSS field:
#pageBanner {
    background-image: url(assets/
yourcustomimage.jpg);
}

***Make sure to change the image file name (highlighted red above) to match what you added to Resources/Assets.

That will give you a custom banner graphic of your choosing on every page you like. 



 
Adding custom header and background images to SmartDock Mobile:
  1. Once you've installed SmartDock Mobile, open RapidWeaver®, and then open the Theme Drawer (select "Show Themes" from RapidWeaver®'s View menu).
  2. Select the SmartDock Mobile theme, and then right-click on it once. A contextual menu will appear - select the "Show Contents in Finder" option.
  3. In the following window navigate to the /images folder. Place your custom header and background images here, in either jpg or png format, and rename them:
  • For header images: image1.jpg, image2.jpg, etc. up to image5.jpg - images 6-10 are for png files.
  • For background images: background1.jpg, background2.jpg, etc. up to background5.jpg - background images 6-10 are for png files.

That's it, you're done! (Be sure to select the image you added in theme options.)



 
Adding custom header and background images to MobileFusion:
  1. Once you've installed MobileFusion, open RapidWeaver®, and then open the Theme Drawer (select "Show Themes" from RapidWeaver®'s View menu).
  2. Select the MobileFusion theme, and then right-click on it once. A contextual menu will appear - select the "Show Contents in Finder" option.
  3. In the following window navigate to the /images folder. Place your custom header and background images here, in gif format only, and rename them:
  • For header images: image1.gif, image2.gif, etc. up to image5.gif
  • For background images: background1.gif, background2.gif, etc. up to background5.gif

That's it, you're done! (Be sure to select the image you added in theme options.) We recommend using images that are as small as possible to reduce page loading times and to minimize the cost to your mobile users.


How to Use ExtraContent

ExtraContent - All the How To goodness you need

If your purchased theme is ExtraContent enabled then your download includes several extras to help you take full advantage of the features EC offers. Among these are some RW snippets and possibly a custom Stacks library item provided by the developers of ExtraContent. Our thanks go out to Adam Merrifield, Gary Byrd, and Guiseppe Caruso for making ExtraContent a reality.

First things first - To get started you'll need to install the ExtraContent snippet(s).
  1. Open the disk image file you downloaded from NimbleHost. In it should be a folder called "Extras" or "Tutorials & Extras".
  2. Open the "Extras" folder and locate the extracontent.rwsnippet file (depending on your theme there may be another folder called ExtraContent that holds a number of snippets) - double click the snippet file to install.
  3. You may need to restart RapidWeaver® before using the snippet.

Using in a Styled Text Page
Also applicable for use in the Sidebar, Blog posts, the customizable Header and Footer text areas of a Contact page, etc.

  1. With your Styled Text page open and in Edit mode, open your Snippets library (select "Show Snippets" from the View menu) and find the ExtraContent snippet you installed earlier.
  2. Drag and drop the snippet onto your Styled Text page. It doesn't matter where, but we tend to keep EC content at the bottom of the page.
  3. The snippet will add some simple HTML code to your page, and includes directions for where to insert your content.
  4. To make sure the HTML code is properly interpreted by web browsers, highlight the div tags and apply the "Ignore Formatting" option from RapidWeaver®'s Format menu. After doing so, your page should look similar to the following:


Note the light pink background that appear in the areas where you highlighted text and
chose "Ignore Formatting" from the RapidWeaver® "Format" menu.


The last step is to enable the ExtraContent area in theme options that you want displayed. That's it, you're done!

All the text, content, and images placed between those two pink areas will be dynamically placed into the ExtraContent area you decide. One final note - we have noticed that there are times when RapidWeaver® "forgets" to apply the Ignore Formatting option properly. In these cases, even though the background may be highlighted pink, you may need to select that area again and repeat the process a couple of times to ensure the code is interpreted properly. Also, keep in mind that the designated ExtraContent areas you choose may have limited dimensions - there's a possibility some of your content will be cut off or display improperly if there is too much of it to fit into the ExtraContent "box".


Using in an HTML Code Page

  1. Follow the same steps listed above, except there is no need to highlight any portions of the code and "Ignore Formatting".
  2. That's it, you're done! Any code you insert between the ExtraContent tags will be dynamically inserted into the ExtraContent area of your choosing.


Using the ExtraContent Stacks Plugin

There is a great video tutorial about how to use the Stacks plugin here. Many thanks to Adam Merrifield, the creator of this plugin, for making this available.

ExtraContent plugin for Stacks - Thanks to Adam Merrifield of SeyDesign for making this available to the RapidWeaver® community.

How to use fancyBox

The versatile and responsive fancyBox script is built into select NimbleHost themes (currently Atlas and Phelix). Using fancyBox is quite simple:

1. Select the text or image you want to turn into a link
2. Create a link using RapidWeaver's standard link creation tool
3. In RW's link dialog box click the sideways triangle next to "Custom Attributes"
4. Use the round plus button to create a new custom attribute. Make the "Name" column "class" (minus quotes) and the "Value" column "fancybox"
5. Finish creating your link by clicking on the "Set Link" button

You link should now activate fancyBox and display your linked content in a responsive popup window.

How to Use FancyZoom

FancyZoom Snippet - No longer needed if you're using the most recent version of any NimbleHost theme.

Please Note: The Atlas RapidWeaver theme does not use FancyZoom, and the directions explained here do not apply to Atlas. To use the Atlas lightbox, visit the Atlas product page, scroll down the page and view the "fancyBox Integration" section.

How to use FancyZoom

Having trouble following this tutorial? Let us know so we can make it better! You can also watch a FancyZoom video tutorial from the Video Tutorials section below.

This tutorial assumes you are working in a Styled Text area such as a Styled Text page, the sidebar (when not in html mode), the custom text fields on a Contact page, etc.

1. First create the content that you want FancyZoom to display

2. On the line directly above that content type in this code:



*Note: you can change the red-colored text to what you like, but you will need to remember it later. Additionally, if you want to have more than one link on the page, with each link opening up different content in FancyZoom, you will need to make sure the "ID" is unique for each div container you add to the page.

3. Highlight what you just inserted and choose Ignore Formatting from the RapidWeaver® -> Format menu

4. On the line directly below your content type in this code:



5. Highlight that code and choose Ignore Formatting as well.

6. Now we just need to create the link that, when clicked, will activate FancyZoom to display your content. Select the link text/image/whatever and click the Add Link button.

7. A window pops up where you can edit the link. Make sure the drop down menu on the left says URL. Then type in this for the link:

#zoomContent

*Again, change the red-colored text to whatever you entered above in step 2, and make sure you don't forget the # (pound sign).

8. Almost done! Click the triangle to the right of "Custom Attributes"

9. Click the round (+) button at the bottom. Double click the name field and type in "class" (without quotes).

10. Double click the Value field and type in "zoom" (without quotes).

11. If you're using the most up-to-date version of Unity/Glide/Mirage, that's it - you're done!

Everything in RapidWeaver®'s Edit window should look similar to the screenshot below when you're finished. Save and preview within RapidWeaver® to see the animation - keep in mind that neither the shadow border or close button graphic surrounding the zoomed area will be displayed in the preview within RapidWeaver®, but will when your site is published (that's a limitation in RapidWeaver® we don't have control over).

Video Tutorials

FancyZoom | CrossSlide | Pulse



FancyZoom - Give your site some extra oomph with this open source lightbox clone that comes built into all our desktop themes.


CrossSlide - Add smooth javascript slideshows to any page, anywhere on your site. *Please note, Qube uses a different slideshow plugin from CrossSlide. See the Qube User Guide for more info.

NOTE TO RW5 Users: This video tutorial refers to "page assets", which is a RW4 specific feature. In RW5 you'll need to use Site Resources, and more information on the difference between "assets" and "resources" is on our blog here: http://www.nimblehost.com/blog/2010/12/rapidweaver-page-assets-vs-sitewide-resources/


Pulse - Have something you want to make sure you're visitors see? Use this to draw their attention there.

Adding a Search Box

*Note: Though this tutorial was written specifically for Unity, the process is also the same for our other themes.

Adding a search box to Unity

This is an advanced tutorial that will involve changing Unity's core files, so please make sure you have a backup of all your data before continuing. If you haven't already, make sure to download the SearchBox snippet set. This comes courtesy of Ed Brenner, thanks Ed!

1. From within RapidWeaver®, open the theme selector, choose Unity, right click and select the option to "Reveal Theme Contents in FInder..."
2. Copy behaviour.js and search.js (from the SearchBox snippet set) into the Finder window displaying Unity's theme files.
3. Open the Theme.plist file in your favorite text editor, and look for this section near the top of the file:



4. After the line <string>ie.css</string> add these two lines:

<string>behaviour.js</string>
<string>search.js</string>

This portion of the file should now look like this:



5. Save and close the file, then open index.html. Look for a section of code that looks similar to this near the top of the file (the exact code you see may be different than what's shown below):



6. After the line that includes jquery.nimblehost-scripts.js add these two lines:

<script type="text/javascript" src="%pathto(behaviour.js)%"></script>
<script type="text/javascript" src="%pathto(search.js)%"></script>

This section of the file should now look like this:



7. Save and close the file. Unity is now ready to use the SearchBox HTML snippet included in the download link posted above. Double click to install the searchbox-osxstyle-html.rwsnippet (you don't need the other snippet).

8. From within RapidWeaver® open the snippets library, then drag and drop the SearchBox - OSX Style - HTML snippet wherever you want on the page. Look through the snippet for two sections that say this:

value = "yourdomain.com"

Make sure to change "yourdomain.com" to the domain of the site you want to be searched.

9. That's it, you're done!

If you want to include the search box on all pages of your site without having to use the snippet every time, then you'll need to copy and past the snippet HTML directly into the index.html file (similarly to how is described in steps 5-7 above.) Where you choose to do so is a matter of personal preference, but above the sidebar is a good option. Look for this code in the index.html file:



To place the SearchBox above the sidebar, paste the snippet HTML directly after the <div id="sideContent"> line.

Enjoy!

Creating Menu Section Labels

Some NimbleHost RapidWeaver® themes (currently just Gravity and Atlas) include a feature that allows you to easily create labeled sections in your drop-down menus, to make them easier to read and navigate. Follow these steps to create a menu section:

1. In RapidWeaver®'s left sidebar select/create the page you want the label to appear on top of.

RapidWeaver

2. Double-click the page name, and insert this code at the very beginning:

<span class='menuSection'>Type in Your Label Here</span>


RapidWeaver2

3. That's it! Be sure that you used single quote marks ( ' ), not double quotes ( " ), in the code snippet. Then preview in RapidWeaver® to see the menu label in action.

RapidWeaver1

Creating Slideshows with the built-in Cycle plugin

Most NimbleHost RapidWeaver® themes come with the jQuery Cycle plugin built-in. We also include code snippets to help you more easily create slideshows with Cycle. Follow these steps to create your own slideshow (if you're using Phelix v3.0 click here):

1. First, make sure the Cycle option is turned on. For most NimbleHost themes, this option is located in the "Advanced Site Options" section in the Page Inspector --> Styles tab.

Page Inspector- Hiking in Maui (Photo Album)

2. If you haven't already, install the Cycle code snippet you want to use. These code snippets are included with your original download file, in a folder called "Extras". To install them, just double-click on the snippet file, and RapidWeaver® will automatically install it for you. Please note, make sure you install the correct code snippet for the version of RapidWeaver® you are using (version 4 or version 5).

3. Add the images you want displayed in the slideshow to RapidWeaver®. If you are using RW5, drag and drop your images into the Resources section of the sidebar. If you are using RW4, add your images to the Page Inspector --> Header --> Assets tab. Please note, make sure your images do not have spaces in the file names - in other words "image_1.jpg" is okay, but "image 1.jpg" is not. You may need to remove spaces in the image file names before adding your images to RapidWeaver®.

4. Open the Snippets browser (from the RapidWeaver® View menu, select Show Snippets), and find the snippet you want to use.

5. Make sure you are in Edit mode, then drag and drop the code snippet onto the page, or into the sidebar area of the Page Inspector.

Page Inspector- Hiking in Maui (Photo Album)

6. Now switch to Preview mode, and the slideshow should start playing. If it doesn't, make sure you've turned on the Cycle option in the Page Inspector, and also double-check that the file names for your images in the code snippet are correct. If you've added the snippet to the sidebar, then you may need to highlight the code, and apply the "Ignore Formatting" option from RapidWeaver®'s Format menu.

Header Slideshows: To use a Cycle slideshow in the header image area, just follow the steps above, but add the code snippet to the appropriate ExtraContent area. Each NimbleHost RapidWeaver® theme (except our mobile themes) includes an ExtraContent area that fills the header image area. Adding the code snippet to that ExtraContent area will display the slideshow in the header image.

Advanced Slideshow Options: If you would like to change the time between slide transitions or similar options, you can do so by altering the last three lines of the code snippet to look like this:

<script type="text/javascript">
jQuery('#slideshow').cycle({fx: 'fade',speed: 1000,timeout: 4000});
</script>

The "fx" option controls what type of animation effect to use. The "speed" option controls how fast the transition between images happens, and the "timeout" option controls how long an image is displayed.

For more info on the options available with the Cycle plugin, see this page on the main project site:

http://jquery.malsup.com/cycle/options.html



Using Cycle 2 in Phelix v3.0.0


Phelix includes the latest version of Cycle (version 2) which works differently from the previous version.

To make a slideshow with Cycle 2 simply drag and drop a Cycle snippet (included with your Phelix v3.0.0 download) onto the page, and enable the Cycle option in theme settings. That's it! (Of course, be sure to specify your own images for the slideshow in the code snippet.)

For more details about how to customize the options for Cycle 2, see this page on the main project site:

http://jquery.malsup.com/cycle2/api/

SEO Guide

This guide is geared towards users of our RapidSearch plugin, however it contains useful information for anyone interested in SEO.

Because our RapidSearch plugin uses the Google web search API, your website must be indexed by the Google search engine before RapidSearch will return search results. Therefore, it is in your best interest to use search engine optimizations in your RapidWeaver® website.

This is a brief guide that explains how you can optimize your RapidWeaver® website for the Google search engine, and how to submit your website to Google for indexing.

Submit Your Website to Google

If you do nothing else, you should submit your website to Google for indexing. Go to http://www.google.com/addurl/ and submit your RapidWeaver® website's URL using the provided form.

Basic Search Engine Optimization

Page Titles
Each page in your RapidWeaver® website should have a unique and descriptive page title. This is the <title> element in the <head> portion of the HTML document. This is also the title that will appear at the top of a Web browser window and at the top of a Google search result. The page title should be no longer than 64 characters. To set the title of a RapidWeaver® page:
  1. Open your website file in RapidWeaver®
  2. Open the Page Inspector General tab for a given page
  3. Enter your title into the Browser Title field

Page META Descriptions
Each page in your RapidWeaver® website should have a unique and descriptive META description. This description should summarize what the page is about while prudently incorporating select keywords. This description is used by Google when your website is indexed. This description will also appear below the page title in a Google search result. The META description should be no longer than 170 characters. To set the META description of a RapidWeaver® page:
  1. Open your website file in RapidWeaver®
  2. Open the Page Inspector Header tab for a given page
  3. Click the + icon beneath the Meta Tags list
  4. The new meta tag's Name is “description”
  5. The new meta tag's Content should be your page's description

Advanced Search Engine Optimization

Create a Google Webmasters account
Google Webmasters is an online web application provided by Google that allows you to view and manage how the Google search engine indexes your website. You can see which pages on your website have been indexed, which pages have not be indexed, and which pages have duplicate titles or descriptions. Google Webmasters also shows you which pages could not be indexed due to HTTP errors, like 404 Not Found. Go to http://www.google.com/webmasters/ to create your account.

Create a “sitemap.xml” file
Wouldn't it be nice if you could tell Google about every page on your website? You can with a sitemap file. A sitemap file is an XML file that contains information about every page on your website, including the URL, when the page was last changed, how often the page changes, and the importance of the page.

RapidWeaver® 5 includes a built-in page type called "Sitemap" which will create a basic sitemap.xml file for your RapidWeaver® website. This is a good option to get you up and running, but lacks the features required to maximize your SEO results.

LogHound Software provides a RapidWeaver® plugin called SiteMap that automatically generates a sitemap.xml file for your RapidWeaver® website and submits it to Google on your behalf. LogHound's SiteMap plugin also provides a convenient single interface to modify titles and descriptions for every page on your RapidWeaver® website. For those serious about RapidWeaver® search engine optimization, we recommend that you to purchase and use the SiteMap plugin from Loghound Software.

RapidSearch


With the release of v5.0 RapidSearch now uses the newer "Custom Search Engine" API from Google. This new API is quite different from the old one, and requires many changes to how you may be used to using RapidSearch.

Ads in Search Results

When using the "free" custom search version of Google's API (which RapidSearch uses by default) there will now be ads shown among your search results. These ads are shown by Google and cannot be removed.

If you don't want ads displayed among your search results, Google has a "Custom Site Search" (referred to as CSS) service which, as of December 2013, costs $100 USD. This is in addition to the cost of RapidSearch itself. If you decide to purchase this service, you will not be able to use RapidSearch to configure your search engine and create the search box for your RapidWeaver site. This is due to restrictions in Google's CSS service.

Custom Search Engine ID

Google now requires that you create a "Custom Search Engine" (referred to as CSE) when adding Google search to your site. This can only be done on the Google website, and RapidSeach now includes a button to the Google site where you can create your CSE.

RapidWeaver



Once you have created your CSE, click on the Search Engine ID button in the Google interface (see screenshot below), then copy and paste it into RapidSearch.



Safari


At that point, you can add the sites that you want to be searched, and publish your website.

Please Note: Due to changes in Google's API the search box will not work in RapidWeaver's Preview mode until you have first published your site.

Also, if you make changes to the list of sites to be searched in RapidSearch, and publish your changes, it may take some time before those changes are actually reflected on your website. This is because Google caches the configuration file that RapidSearch creates for you, and only refreshes it periodically.

RapidSearch Pro

The documentation for RapidSearch Pro is located on our dedicated website here:

http://rapidsearchpro.com/documentation

How to use Hijax

Please Note: When updating Hijax v1 to v2 via the built-in updating mechanism in the Stacks plugin, you will need to restart RapidWeaver for the HijaxGrid and HijaxBlock stacks to appear in your library.

The Basics

The concept behind Hijax is quite simple - it will try to display any content you link to, on the same page where the link is located. In other words, rather than opening a new page with that content displayed, Hijax will "hijack" the link and display the content on the same page.

There are many different types of content, but they are split into two basic categories - remote (off page) and inline (on page).
-- Remote content is any type that is not located on the same page where Hijax is placed.
-- Inline content is any type that is located on the same page where Hijax is placed.

Remote Content

Follow these steps to display remote content with Hijax:
1. Drag a Hijax stack onto your Stacks page (only add one Hijax stack to a page).
2. Create a link (image or text, it doesn't matter) via the standard RapidWeaver link dialog window. This link can be anywhere on the page, except within the Hijax stacks.
3. Enter the URL for the content (this could be a file in RW Resources, a YouTube/Vimeo link, or an absolute URL to a full webpage).
4. Using the Custom Attributes section of the link dialog window, add a class called "hijax" (minus the quotation marks), then click the "Set Link" button. When doing this, make sure to enter "class" in the Name column, and "hijax" in the Value column.
-- YouTube videos - Add a class of "youtube" next to the "hijax" class, so that it looks like "hijax youtube".
-- Vimeo videos - Add a class of "vimeo" next to the "hijax" class, so that it looks like "hijax vimeo".
-- Full webpages (or portions of a full webpage) - Add a class of "webpage" next to the "hijax" class, so that it looks like "hijax webpage".

Examples of remote content - YouTube or Vimeo videos, images, movie files, PDF files, text files, full webpages on a separate website, etc.

Inline Content

Follow these steps to display inline content with Hijax:
1. Drag a Hijax stack onto your Stacks page (only add one Hijax stack to a page).
2. Drag a HijaxBlock stack into the Hijax stack. You can add as many HijaxBlock stacks to a page as you want, but they should be added to the main Hijax stack, or within a HijaxGrid stack.
3. Place the content you want displayed into the HijaxBlock stack.
4. Select the HijaxBlock, then specify a unique link ID in the settings panel.
5. Create a link (image or text, it doesn't matter) via the standard RapidWeaver link dialog window. This link can be anywhere on the page, except within the Hijax stacks.
6. Enter the unique link ID you specified in Step 4.
7. Using the Custom Attributes section of the link dialog window, add a class called "hijax inline" (minus the quotation marks, but keep the space between "hijax" and "inline"), then click the "Set Link" button. When doing this, make sure to enter "class" in the Name column, and "hijax inline" in the Value column.

Beyond Basics

All remote content is displayed inside the main Hijax stack, and any content you add to the main Hijax stack will be hidden by default.

For Vimeo and YouTube videos, you can enter just the video ID (something like "77359213" or "RzToNo7A-94") or the complete video URL (something like "http://vimeo.com/77359213" or "http://youtu.be/RzToNo7A-94"). Hijax is smart enough to recognize both formats.

Inline content (added to a HijaxBlock stack) can be displayed inside the main Hijax stack, or it can be displayed inside a HijaxGrid. A HijaxGrid stack can be placed anywhere on the page, and can contain as many HijaxBlock stacks as you like. Likewise, you can add as many HijaxGrid stacks to a page as you like.

This flexibility allows you to create unique layouts of related content. For example, you can create a row of icons, with each icon linking to a specific HijaxBlock (inline content) and place all those related HijaxBlocks together inside the same HijaxGrid. That way, each time you click an icon link in that row, the inline content will be displayed inside that HijaxGrid.

You can then create a completely separate row of icon links elsewhere on the page, linking to unrelated content displayed in a separate HijaxGrid. This is the same layout method used on the Hijax product page.