• Share this article:

10 Minute Quickstart Guide

A "10 minute" quick start guide to help you get setup and working with ThemeFlood RapidWeaver themes within a matter of minutes and a couple of clicks! We build quality RapidWeaver themes with emphasis on ease of use, while at the same time giving you lots of customisability.

If you've just downloaded a free ThemeFlood theme or purchased a theme from us, it's strongly recommended you read this article in full carefully and follow all the steps presented. There's some important information contained within this article that can save you both time and money. Many frequently asked questions are answered too.

System requirements check

Firstly, let's make sure you can actually install and use ThemeFlood themes! All of our themes require RapidWeaver 5 or later (unless otherwise advertised on the theme product pages). So if you've not done so yet, please go to the RapidWeaver website and download either a demo version of RapidWeaver or purchase a full copy of the software. We recommend you always try to run the newest version of RapidWeaver that your computer can support. Once installed, you can open RapidWeaver using the icon in your dock or by navigating to your Applications folder and opening RapidWeaver from there. If you're not sure what version of RapidWeaver you're running, open RapidWeaver and click RapidWeaver > About RapidWeaver from the menu.

RapidWeaver version

Testing demo themes

Please make use of the free demo versions of themes provided for you on the ThemeFlood website. These free demo versions let you install a theme into RapidWeaver (on your computer) and fully test it against actual content and pages. This way, you can perform a comprehensive evaluation of one or more theme designs, before committing to a purchase (a polite reminder that all purchases are final and refunds are not available). The section below explains how to download and install themes, including the free demo versions.

In the free demo versions, automatic updates (via Waterfall) and navigation links between pages are disabled. Additionally there may be credits or other attributions displayed in the website footer or on sample banner images provided. Purchasing a theme gives you an unlocked copy licensed in your name, with no demo restrictions applied.

We also provide free copies of the example websites created with the themes, for you to download. These let you see how different pages were created and understand how things like banner images were setup. You are welcome to use the example websites as the basis for your new projects.

Buying themes

Themes can be purchased online securely from the ThemeFlood website 24/7. Once your payment has been successfully taken (and only once payment has been received) you will get emailed a payment receipt and a personal link to download your theme. If you do not receive the email, carefully check your spam or junk mail folders.

ThemeFlood

It's strongly recommended that you keep a record of the purchase details (e.g. name, email and date). If you need a new download link reissued at some time in the future, you'll need to provide the purchase details as a form of 'proof of purchase'. If you loose these purchase details, you will need to buy the theme again. You can easily keep a record of RapidWeaver addon purchases using a variety of techniques or software (like 1Password or LastPass).

For theme purchases made after 1st January 2015, you can login to your secure Paddle Locker to re-download themes at any time.

Downloading and installing a theme

Themes are delivered to you compressed as .zip files. Your web browser will quite often download the theme file to your Downloads folder in Finder or onto your Desktop. The theme file will typically look like this in Finder:

Theme ZIP package

Sometimes Finder will automatically uncompress the downloaded .zip file; whereas other times you will need to double-click it, to uncompress it yourself. You'll then be presented with a new theme file that looks like the following:

RapidWeaver theme uncompressed

The exact icon design and colour varies (it'll normally be blue or purple), depending on what version of RapidWeaver you have. However the presence of a coloured icon with a .rwtheme or .rapidweavertheme file extension means that the theme is ready to install. You simply need to double-click the icon with your mouse to install the theme.

RapidWeaver theme installed

RapidWeaver will display a message to say when the theme has been installed. The theme can be applied to your project file in RapidWeaver by clicking View > Show Themes in the RapidWeaver menu. Or you can click on the Themes button in the RapidWeaver toolbar.

Optimising the theme for faster page loading and search engines

Open the Site Setup section in RapidWeaver and ensure your website has a Site Title and a Site Slogan. Check that the website address and footer details are correct. All this information is used by search engines to establish the ownership and validity of your website. Websites lacking a title and copyright details generally rank much lower in search engine results.

RapidWeaver Site Setup

The next step is to make sure CSS consolidation is active, and this is an important step not to miss. Not only does CSS consolidation improve the loading speed of your completed pages, but it's of vital importance to ensure theme resources (like images, icons and embedded fonts) are correctly linked and loaded.

In RapidWeaver 5, click RapidWeaver > Preferences > Advanced in the menu and make sure CSS Consolidation is enabled.

In RapidWeaver 6 and RapidWeaver 7, click Advanced in your settings sidebar and make sure CSS Consolidation is enabled.

RapidWeaver 6 advanced settings

And as you can see from the above screenshot, the Advanced Settings is where you also enable support for breadcrumb trails (in supported themes) and tidied (cruftless) links. It's recommended the Generate Search Engine Sitemap option is enabled, unless you wish to create this afterwards with alternative software.

Adding pages and content

Click on the Add Page button (in the RapidWeaver toolbar) to add page types to your project. For example, you can add styled text, a blog, HTML code, markdown, photo albums or a contact form page type. Third party page types like Stacks and WeaverPix can also be purchased for building more advanced websites. Populate these pages with your content. You can use services like Lipsum.com to generate dummy content; to help you visualise full pages of content. You can use the sidebar container for less important content and change the order of pages (and nest certain pages under others) by dragging and rearranging pages in the RapidWeaver page list (on the left of the RapidWeaver window).

RapidWeaver Content

Don't forget to inspect the General Settings for each page too. Every page should have a unique browser title (displayed at the top of the browser window and in search engine results). The folder name should be changed to reflect the name of the page. The file name can be left as index.html or index.php and is ignored if you have tidied (cruftless) links enabled in RapidWeaver.

RapidWeaver page general settings

Get into the habit of regularly saving your changes every couple of minutes in the RapidWeaver File menu, or using the (CMD + S) keyboard shortcut.

Customising theme style and colour settings

All ThemeFlood RapidWeaver themes include colour and style settings; with the purpose of helping you quickly modify the appearance of your website and make it look like your own! Every theme design is unique in the choice of style and colour settings offered. Click on the Styles tab in the inspector to access the theme style and colour variations.

RapidWeaver 6 theme style settings

RapidWeaver 6 and above: If you find all the style settings are dimmed-out, this indicates that a Master Style is applied to this (and possibly other) pages in your project. Webpages in your project with a master style applied all share identical style and colour settings. But don't worry, the master style is easily editable in the website setup settings (click the Master Style option in the lefthand sidebar). Pages can also be omitted from a master style; if you want an individual page with unique styling or layout.

Clicking on a coloured square opens the Mac OS X colour palette and lets you select a new colour for a theme element. Radio buttons or drop-downs let you select an individual setting for a particular design component. And checkboxes offer multiple selection of different theme options.

Spend some time exploring the range of theme style and colour settings provided in your theme. You might be very surprised at how capable your theme is! The days of themes restricting creativity or forbidding you from changing the appearance of your website are long gone...

Adding your own header or banner images

We use the FreeStyle banner technique in ThemeFlood RapidWeaver themes. As the name suggests, this gives you maximum freedom to create stylish theme headers and banners. In essence, simply paste the following into your sidebar:

<div id="fs"><img src="%pathto(images/editable_images/1.jpg)%" alt="My Banner"></div>

That is the markup to fetch an image named 1.jpg (stored in the theme contents editable_images folder) and embed it into your designated theme FreeStyle container. You could also use this markup to embed an image you've attached to your RapidWeaver project as a resource:

<div id='fs'><img src='%resource(my-image.jpg)%' alt='My Image'/></div>

Or an image already published online:

<div id='fs'><img src='http://example.com/images/tree.jpg' alt='My Image'/></div>

There are other methods for embedding custom banner and header images too, including free stack elements like FreeStyle. In the newest themes (advertised as having support for FreeStyle 2.0), any image dragged and dropped into your page named header.jpg or banner.jpg or freestyle.jpg automatically becomes your FreeStyle banner background too!

Testing and publishing

Switching RapidWeaver to Preview mode lets you see what your completed webpages will look like. In RapidWeaver 6 and above, the Preview button in the RapidWeaver toolbar also lets you see what your completed webpage would look like on a narrower iPad or iPhone screen. ThemeFlood themes are developed to the mobile first principle, so you can gauge how the page will reflow and display on smaller handheld devices.

RapidWeaver Preview

Individual webpages can be tested inside a normal web browser (like Safari, Chrome, Firefox or Opera) by clicking File > Preview page in... from the RapidWeaver 6 menu. To preview PHP pages (which require a web server with PHP support) you can install the free MAMP software, export the website to the htdocs folder (inside the Applications/MAMP folder) and fully test the website offline in your web browser.

Publishing of the website (to make it live for the public to see) should be quite straightforward. You should already have a domain name (website address) and a web hosting account setup. Copy the FTP details the hosting company has provided you with and enter these into the RapidWeaver publishing settings.

RapidWeaver publishing settings

Then click File > Republish All Files in the RapidWeaver menu. The first time you publish your website, it make take quite a long time. In future, you can just click the regular Publish button and only changed files (or files marked as changed) will be published.

Taking the next steps

Please take a look at the other knowledgebase articles offered on this website. We have a great many other articles relating to theme use, including ExtraContent, icons, media lightboxes, website searching, FreeStyle banners, social bars, theme modification and website optimisation.

ThemeFlood themes are expertly designed and developed to include a lot of functionality; which ultimately saves you time and money. We understand how important a strong and flexible theme is. RapidWeaver should be about creating and publishing professional websites rapidly. A quality theme will help you achieve a successful website, which will hopefully give you years of stella service.

Provide Feedback

Please use this form to provide feedback about this particular knowledgebase article. For example; to report broken links, errors or things you think could be worded better. We welcome all constructive feedback. All fields are required.

 

Feedback is submitted anonymously (unless you otherwise provide your name or contact details). We don't promise to reply to every feedback message received; neither is this a good place to request technical support. You can continue to request one-to-one support through the ThemeFlood website. See getting in contact for details.