If you need help with one of our products you are in the right place!
Follow the steps explained below when updating your theme to a new version. Do not skip any steps or sections, unless you understand the consequences and are willing to take the risk.
Backup your current theme
Backup your style settings for a site using that theme
Backup your RapidWeaver project file (the one with the .rwsw file extension).
Download the latest version of your theme.
Locate the downloaded file, then double-click on it.
Double-click on the theme file shown in the Finder window.
Restart RapidWeaver.
Open your RapidWeaver project file.
Display the Theme Drawer, and make sure the newly installed theme is selected.
Preview your site in RapidWeaver.
To re-apply a saved style open the Page Inspector, and select the Styles tab.
Click on the folder-icon button in the lower right portion of the Page Inspector window (to the left of the gear-icon button).
After you have applied your saved style setting, preview the page in RapidWeaver. Make sure the color and page layout options are what you expect them to be for that page.
Repeat Steps 1-6 above for each page in your site.
When complete, and each page in your site appears as you expect it to when previewing in RapidWeaver, save your progress.
To apply the changes to your live website, select "Re-Publish All Files" from RapidWeaver's File menu.
Open your RapidWeaver project file.
Open the Page Inspector, and select the Styles tab.
Click on the gear-icon button in the lower right corner of the Page Inspector window, and select the "Reveal Styles in Finder..." option.
A new Finder window will appear listing your saved style settings as .rwstyle files, with a RapidWeaver Styles icon.
Locate the style file that requires editing. You should have given this file a unique name as described in the Preparation section above.
Right-click on the style file, and a contextual menu will appear.
Hover your mouse over the "Open With" option, and select "Other".
From the Choose Application dialog window that appears, select a good text editor such as TextWrangler, Coda, Espresso, Sublime Text, etc.
Your text editor will open and display the contents of the file, which will look like a bunch of meaningless code. Don't be overwhelmed!
Scroll all the way down to the very bottom of the file. The last six lines of code should look similar to the following:
<key>Style Name</key>
<string>Your Unique Style Name</string>
<key>Theme Name</key>
<string>seydesign Aptenon</string>
</dict>
</plist>
<string>
and </string>
) matches the unique name you choose for this saved style<string>
and </string>
) should be similar to the theme you were using for your site when you saved this style setting file.Change the name of the theme, listed below "Theme Name" (the portion between <string>
and </string>
), so that it matches the name of your updated theme.
<string>
and </string>
. Do not change or delete any other portion of the file.When complete, save the file, then restart RapidWeaver. Continue with the steps outlined in the Applying Theme Update to Your Site section.
This issue only occurs in older versions of Armadillo, v1.7.5 or earlier. It is most likely due to a misconfigured setting Armadillo creates for your hosting company. There are (mainly) two possible solutions, depending on your hosting company. Both solutions involve accessing a file called .htaccess. First, follow these steps to locate and access that file, then try the solutions below.
files
. It may also be called something else, like index_files
or pagename_files
, where pagename
is name of your Armadillo page. Open that folder.armadillo
. Open that folder..htaccess
. This particular file is often a hidden file, so you may need to change the preferences of your FTP program to make sure it can display hidden files..htaccess
file, right-click on it and a contextual menu should appear. Select the "Edit" option, if available.
NOTE: Depending on the FTP program you use, changing preferences may require you to restart the program. If using Cyberduck, for example, you will need do the following:
Your hosting company may not need a particular setting Armadillo creates for you. These steps will hide that particular setting.
.htaccess
file, and type in a pound sign "#" at the beginning of the line.Your hosting company does need a particular setting Armadillo creates, but it needs to be modified for your website. These steps will help you make the necessary modifications.
Locate line 7 of the .htaccess file, which will look something like:
RewriteBase /files/armadillo
The part we are interested in is the /files/armadillo
portion. It may also be something like:
/public_html/files/armadillo
or
/www/files/armadillo
or
/folder_name/files/armadillo
where folder_name
is the sub-folder where your Armadillo page is located.
/public_html
, you may need to remove that /public_html
part.If you have uploaded your site to a sub-folder, you may need to add that sub-folder to line 7 (or remove it, if it was added for you automatically). For example, if your sub-folder is called cms
, you would add /cms
to the beginning of the path, so it would look like this:
RewriteBase /cms/files/armadillo
If the /cms
portion (or similar) was already added to the file path automatically, try removing it.
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".
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:
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:
.header-image {
background-image: url(%resource(yourcustomimage.jpg)%);
}
RapidWeaver® 4:
.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.
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:
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.
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:
To add your own custom ExtraContent Area 6 background images to Flexture - Follow the same directions above, but when renaming use the following:
If you're having problems with the above directions, try these alternative methods.
RapidWeaver® 5:
.headerImage {
background-image: url(%resource(yourcustomimage.jpg)%);
}
RapidWeaver® 4:
.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.
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:
To add your own custom ExtraContent Area 6 background images to Dexture - Follow the same directions above, but when renaming use the following:
If you're having problems with the above directions, try this alternative method:
RapidWeaver® 5:
.headerImage {
background-image: url(%resource(yourcustomimage.jpg)%);
}
RapidWeaver® 4:
.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.
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:
If you're having problems with the above directions, try this alternative method:
RapidWeaver® 5:
.headerImage {
background-image: url(%resource(yourcustomimage.jpg)%);
}
RapidWeaver® 4:
.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.
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:
#headerImage {
background-image: url(%resource(yourcustomimage.jpg)%);
}
RapidWeaver® 4:
#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.
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:
#headerImage {
background-image: url(%resource(yourcustomimage.jpg)%);
}
RapidWeaver® 4:
#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.
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:
#pageBanner {
background-image: url(%resource(yourcustomimage.jpg)%);
}
RapidWeaver® 4:
#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.
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:
#pageBanner {
background-image: url(%resource(yourcustomimage.jpg)%);
}
RapidWeaver® 4:
#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:
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:
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.
The dashboard can be directly accessed at this URL at any time:
your-domain.com/rw_common/plugins/stacks/armadillo/index.php/
Just replace your-domain.com
with the domain of your website, and be sure to include the last forward slash /
at the end.
You can always access the login page by visiting the "files/armadillo" sub-folder of whatever page you've added Armadillo to.
For example, if your Armadillo page is here:
your-domain.com/armadillo
The login page would be here:
your-domain.com/armadillo/files/armadillo
If you structure your site a certain way in RapidWeaver, and rename certain files/folders, RapidWeaver may rename the "files" folder to something else, like:
your-domain.com/armadillo/pagename_files/armadillo
The pagename portion will be the page name as specified in the Page Inspector.
With the v2.6 update you must now add an Armadillo Blog stack to your RapidWeaver project file, in order to display a blog created in Armadillo.
Prior to v2.6, the main Armadillo stack could display a Blog for you, but this is no longer the case.
If you have already added an Armadillo Blog stack to the page in RapidWeaver, and content is still not appearing, be sure you do not have the main Armadillo stack on the same page. This particular combination of stacks will prevent content from appearing on the page.
As such, move the main Armadillo stack to a different page in your project, and republish.