Themes

Mirage v3.0 is a paid upgrade. Previous owners of Mirage receive a 50% discount, and discount codes have to sent to everyone who has purchased Mirage in the past.

If you bought an earlier version of Mirage and did not receive your discount code, please contact us directly and include your original purchase details.

Yes, it will. If you've made changes to your copy of Mirage, like adding custom header images, those changes will be lost. Make sure to backup your current copy of Mirage before installing the upgrade.

See this help article for specific instructions on how to backup theme settings and otherwise prepare for a theme upgrade.

Mirage includes the fancyBox plugin, which is enabled in theme options via the "Lightbox, Slideshow & FontAwesome Options" section.

See this help article for specific directions on using fancyBox in your website.

Mirage includes the Cycle 2 plugin, which is enabled in theme options via the "Lightbox, Slideshow & FontAwesome Options" section.

Directions for using Cycle 2 are described in this help article. Be sure to scroll down to the section that is labeled "Cycle 2".

As a theme, Mirage supports the display of retina-ready header images, which you can enable in theme settings via the "Responsive & Retina Options" section.

Check the box next to the "Enable Retina Graphics" option to turn this feature on.

Mirage v3.0 include three retina header images for use with your sites - image18.jpg, image19.jpg and image20.jpg, which you can select via the "Header Image" section. The other images included as convenience with Mirage are from older versions, and do not have retina versions.

You can also add your own header images to Mirage by doing the following:

  1. Open the Theme Drawer in RapidWeaver
  2. Right-click on Mirage v3.0 and select "Reveal Contents in Finder".
  3. In the Finder window that appears, navigate to the images -> editable_images sub-folder.
  4. Add your header images here. Regular header images should be named in the following pattern: image1.jpg, image21.png, etc. Retina header images should be name in the following pattern: image1_2x.jpg, image21_2x.png**, etc.

You can also use retina graphics in the content areas of your website (main content, sidebar, ExtraContent, etc.). Since this content is created using plugins and stacks, the plugins and stacks you are using (not Mirage) will be responsible for displaying retina graphics in content areas.

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.

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.

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:

    <div id="zoomContent">

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

    </div>

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

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 (see the dedicated section below if you're using Phelix v3.0 or Mirage v3.0):

  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.

    3235

  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.

    3236

  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 and Mirage v3.0

These themes 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 download file, in the Extras folder) 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/

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!

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.

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.

Typically, the specific order of scripts being loaded on the page is what causes WeaverPix to stop working in Firefox. To fix this, we suggest changing the order of how the scripts are loaded in the theme, which involves change the core theme template file. Here’s how to do so (make sure to backup your data first):

  1. Right-click on the theme from within RW and select “Reveal Theme Contents in Finder”
  2. In the new Finder window that opens look for and open the index.html file in a good text editor (the free TextWrangler from Bare Bones Software is a good option if you don’t have one. If you don’t see the code mentioned below, that means the file has been opened as a webpage, and not as a text file). 3. Depending on your theme the portion you’ll want to move is on or around lines 19 & 20 and looks like this:

    <!-- Plugin defined header -->

    %plugin_header%

Simply take those two lines, and move them a few lines higher (on or around line 14), above the "Style Variations" section. The result should look like this:

<!-- Plugin defined header -->

%plugin_header%

<!-- Style variations - these are set up in the Theme.plist -->

%style_variations%

Then save and close the file, and republish your site using RapidWeaver's "Re-Publish All Files" option from the File menu.

If you are experiencing this problem, follow the directions below to enable iPad visitors to access the menu items in your drop down navigation:

  1. Use the links below to download the code snippet for your theme.
  2. Locate the downloaded file on your computer. For example, if you downloaded the Gravity code snippet, the file will be named GravityiPadiOS6MenuFix.zip. Likewise, for Qube the file will be named QubeiPadiOS6MenuFix.zip, and similarly for other themes. Once you have located the file, double-click it to reveal the code snippet (.rwsnippet) file.
  3. Double-click on the .rwsnippet file that was revealed in Step 2 above, and RapidWeaver® will install the code snippet for you.
  4. Open your RapidWeaver® project file, and click on the "Configure" icon in the left sidebar under the "Stats" section.
  5. Open the RW Snippets browser (choose "Show Snippets" from the "View" menu).
  6. Locate the code snippet you installed in Step 3, then drag and drop it into the very beginning of the Google Analytics text field.
  7. Save your project, then use the Re-Publish All Files option from RapidWeaver®'s File menu.

Gravity | Flexture | Dexture | Qube | Mirage | Glide

*Please note, only themes with drop down navigation can be affected. Hence, Phelix and Unity are not listed here.

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.

This is a bug in v2.0 that we didn't catch before the public release. Fortunately, there is an easy fix. Just copy and paste the code below into the Page Inspector --> Header --> CSS --> Custom CSS field of any affected pages:

@media screen and (max-width: 480px) { #menuWrapper { width: auto !important; } }

That will fix the problem so that the navigation displays correctly on iPhones. We'll be sure to fix this in the next update.

*Please note: This is fixed in Mirage 2.0 - as such we recommend updating to the latest version of Mirage.

This is a bug that was introduced when we fixed a different bug in version 1.4. Fortunately, it's easy to fix - to do so just add this custom css code to the Page Inspector --> Header --> CSS --> Custom CSS Field:

#menuShadow {clear: both;}

#menuShadow, #midContainer {top: -5px;}

#bottomContainer {position: relative;top: -5px;}

That will get ExtraContent Area 4 to display properly.

***If you're having this problem, it means you're using v1.4. Make sure to update to v2, as this issue is now fixed.

The extra space below the footer is most likely from a small bit of javascript that we added that sets the height of the page when it's loaded - this is for pages without a lot of content to make sure that a user's background image has enough room to be displayed properly. This might be conflicting with other scripts on the page and incorrectly setting the height, so try removing it to see if that fixes your problem.

To do so, you'll need to edit Mirage's template index.html file. Select Mirage in RWs theme drawer, right-click and select "Reveal Theme Contents in Finder...". In the next Finder window that opens, use a good text editor (I recommend TextWrangler from Bare Bones Software if you don't have one - it's free and works great) to open the index.html file.

Scroll down and on line 41 you'll see this bit of code:

bgheight();

Simply add two forward slashes like so:

//bgheight();

This will cause that line to be ignored by the browser. Now save and close the file, then test to see if that fixes the issue.

***If you're having this problem, it means you're using v2.0. Make sure to update to Glide v3.0, as this issue is now fixed.

This problem only happens if you choose to have the sidebar menu display 2nd or 3rd level menu items under the "Sidebar Menu Advanced Options" section in the Styles tab of the Page Inspector. When we added these theme options we overlooked that we would also need to adjust how the color options worked so that you could properly control the sidebar menu colors.

The good news is this is easy enough to fix! Here are directions on how to do so:

  1. First backup your data, and your copy of Glide. Don't skip this step!
  2. Download this zip file, and then open it.
  3. Inside you'll find three files. We'll be adding these three files to the Glide theme.
  4. Now open RapidWeaver®'s Theme Drawer and select Glide v2.0, then right-click on it and choose "Reveal Theme Contents in Finder".
  5. In the new Finder window that opens you should see a file called "colourtag.css" - Replace that file with the one in the zip file with the same name.
  6. Next, open the "css" folder, and you should see a folder called "sidebar".
  7. Open the "sidebar" folder, and inside you should see two files, one called "2ndLevelSidebarMenu.css" and another called "3rdLevelSidebarMenu.css" - Replace those two files with the ones in the zip file with the same names.

That's it! Now just restart RapidWeaver® and you should have full control over the colors in the sidebar menu.