Themes

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

  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.

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

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.

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:

    3200

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

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

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

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: 3223

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.

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.

    3232

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

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

    3233

  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.

    3234

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

  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:

    3227

  4. After the line ie.css add these two lines:

    <string>behaviour.js</string>

    <string>search.js</string>

    This portion of the file should now look like this: 3228

  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): 3229

  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: 3230

  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:

3231

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

Enjoy!

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.

Your original download link will always download the latest version of the theme when it is used.

For example, if you purchased our Atlas theme today, you could use that same download link next year to get the latest version available at that time.

To retrieve your download link visit our Order Lookup page, select the "Retrieve Order History" tab, then enter your email address used when the purchase was made.

Usually this means that RapidWeaver®, and usually your Mac, needs to be restarted. This is more likely to occur when you have multiple RapidWeaver® projects open, and are switching between pages when changing settings. In that type of situation, RapidWeaver® can get confused about which setting to apply to a particular page.

The good news is this isn't a big problem, and there's usually nothing wrong with either the theme or RapidWeaver® itself. Simple restart RapidWeaver® and the issue should resolve itself.