10 Minute Theme Quickstart Guide Get weaving in RapidWeaver rapidly...
This document is just intended as a really quick 10-minute guide towards getting you started with themes purchased from ThemeFlood. A much more detailed theme user guide can be found here. Other support resources can be accessed via the ThemeFlood support page. It is recommended you read through and perform the following steps in this order:
Installing the new theme
RapidWeaver themes are distributed in the form of packages - a file ending in a .rwtheme file extension. Providing you are using RapidWeaver 3.6 or later, double-clicking on this file will launch RapidWeaver (if it's not already open) and the theme will be installed for you. To apply the theme to a project, open the theme viewer in RapidWeaver (this can be accessed from the View menu item) and click on the theme you wish to use. If you encounter any problems with installing or selecting new themes, please see the RapidWeaver support page or open a support ticket with Realmac Software.
Consolidating the theme
Right at this early stage, it is recommended that you open your RapidWeaver preferences and ensure that CSS consolidation is turned on. This setting optimises your website significantly, improving both page loading speed, Internet Explorer compatibility and reduces your website bandwidth. Most experts always recommend CSS consolidation is switched on for each and every project. See the theme user guide for more information on the use of CSS consoldiation and optimisation.
Duplicating the theme
If you plan on making any customisations to the theme, (such as custom code, graphics or other embellishments of your own) then you should always duplicate the theme before you start making these changes. A duplicated theme has a different name from the original, unedited version. Duplicated themes mean that you can safely edit a theme, knowing full well that you can easily return to the original unedited theme at any time. Also if you need customer support and you have modified your theme, be aware that we can only accept duplicated / renamed versions of the theme (if you don't want to loose your modifications).
Saving style sets
You should explore the range of theme style and colour variations supplied with your theme. Spend time 'playing' with the settings and finding a combination that comes close or exceeds your original ideas. For example, most ThemeFlood themes let you customise the main container width, switch on a tagline or social networking container, adjust many colours and change aspects like sidebar placement, font faces, font sizes, site title layout and many other variables. Settings marked with an asterisk (*) are subject to graceful degradation; meaning they will be ignored on older web browsers like IE7 or IE8. Once you have got one or more style groups setup, save these style sets so you can easily select and apply these to other pages or other RapidWeaver projects. This saves the hassle of tediously going through each page everytime and applying the same settings repeatedly. It is a huge timesaver.
Customising theme graphics
Theme images applied in the form of CSS backgrounds (like body backgrounds) can be edited using any of the theme editing techniques discussed in the theme user guide. These include editing images with Finder, using a free third-party utility like RapidWeaver MultiTool or RapidThemer and using CSS code to pull custom images into a theme.
In the case of theme banner or header containers, most ThemeFlood themes make use of a pioneering technique known as FreeStyle. Think of a FreeStyle banner as an empty box, into which you can place images, slideshows or video. Typically typing this simple HTML code snippet as plain text into any content or sidebar region will display a single image in the theme header or banner region:
<div id='fs'><img src='%pathto(images/editable_images/1.jpg)%' alt='A description about my image'/></div>
Customise the code snippet to use a different image or pull in images from a warehouse or other location using the image tag. FreeStyle banners are the experts choice for incorporating theme-supplied or custom graphics into a banner or header region. FreeStyle provides unmatched flexibility, compared with other banner techniques; plus the ability to create some really special banners within pages. If you are new to the idea of 'FreeStyle', see the chapter in the theme user guide. Or if you don't want to use the code snippets, use the FreeStyle stack instead (free for ThemeFlood customers).
Don't forget that as part of your theme purchase, we can duplicate a theme and incorporate your custom graphics at no extra charge. Just get in contact via email to discuss your requirements.
Publishing the website
When you have completed setting up your website in RapidWeaver, do a full republish of the website, using the option provided in the RapidWeaver File menu. This will ensure the new theme, all support files, site resources and content are published correctly to the web server, replacing what's already there. Remember to refresh your web browser (CMD + R or F5), to see your latest published changes. If you are having problems publishing your website from within RapidWeaver, see this knowledge base article on the Realmac Software website for some useful tips. After the initial full republish, you can take advantage of normal smart publishing in RapidWeaver, so that only pages that have actually changed will republish.
Testing responsive behavior and mobile optimisations
Aside from resizing your RapidWeaver preview window, the easiest way to test responsive behaviour is to download the free Google Chrome web browser (if you don't have it already) and download the free Screen Resolution Test extension. This free Google Chrome extension automatically resizes the browser window to preset sizes. Now you can select a page in RapidWeaver, click the options (cog) button at the bottom left and choose to preview the page in Google Chrome. At this point you can use the resolution test extension to get an accurate overview of how your completed pages will look and behave at different screen resolutions. There are also a couple of free tools you can use for testing responsive websites which are already published online:
• Responsive Web Design Testing Tool
• Responsive Design Bookmarklet
• Studiopress Mobile Respensive Design Test
• Respensive Design Test