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., Qube-v1.0.dmg, SmartDockMobile.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.

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

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:

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.

Use these links to jump to the appropriate section:

Gravity   |   Flexture   |   Dexture   |   Qube   |   Phelix   |   Mirage   |   Glide   |   Unity   |   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".


 
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 (the correct labels are 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.0

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 v2.3

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 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 banner10.png - banners 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.

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.

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

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.

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

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.

*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!

Some NimbleHost RapidWeaver themes (currently just Gravity) 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.



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

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

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.

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:

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.



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.



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.