myExtraContent1
myExtraContent3
This page aims to answer many frequently asked questions and provide a detailed form of documentation regarding features available in various ThemeFlood themes, including some opensource themes. Please feel free to print this page out to act as a 'user manual' or save the page as a PDF for future reference. An effort is made to keep information up-to-date. Some features documented here may not be applicable to the particular theme you're using. Each theme also contains an 'ABOUT' file which covers theme-specific topics.
  • Opening the theme contents
    Reveal Theme Contents in Finder...
    The theme contents is the folder containing HTML, CSS, Javascript, images, preference lists and other files required by a theme. Although most theme editing can be done from RapidWeaver, sometimes (such as adding background images to a theme) it is necessary to open the theme contents to make amendments. The theme contents is accessed by right-clicking (or CTRL-clicking) the theme preview icon in RapidWeaver. From the pop-up menu, select Reveal Theme Contents in Finder. This will open a new Finder window and present you with various files and folders which make up a complete theme.
  • The ABOUT file
    Each ThemeFlood theme contains an ABOUT file. This document provides you with detailed information and technical notes regarding the theme you are using. It also covers important subjects such as browser compatibility. The ABOUT file can be viewed in the theme contents, details of which are above.
  • Duplicating a theme
    If you're going to be making any amendments to a theme, then it is highly recommended you make a copy of the theme, thus preserving an original, unedited version you can return to at a later date. Duplicating themes is best done in RapidWeaver by right-clicking (or CTRL-clicking) the theme preview icon in RapidWeaver and selecting Duplicate Theme from the pop-up menu (similar to viewing the theme contents). Give your theme a new name and click OK. Work from this duplicated version.
  • Finding the Name of HTML Elements in Themes
    Inspect Element
    Most elements in a theme can be identified by an ID or Class selector. ID selectors are unique and cannot be repeated. Class selectors can be repeated as often as you like in HTML code. A selector is basically a name given to an element, enabling you to identify it to apply custom CSS. To find the selector name of an element in a theme, it's a good idea to preview the page in Safari. Then right-click (or CTRL + Click) the element and select "Inspect Element" from the popup menu. This will tell you the name of the element. To specify your custom CSS, start with a hash character (if it is an ID) or fullstop character (if it is a class element). Then enter an open and close curly brace. The property and values for elements go between the braces. Each value ends with a semi-colon character. So you should have some code that looks like this (an ID selector in the first snippet and a class selector in the second snippet):

    #boldTitle {
        font-weight: bold;
    }

    .textBox {
        padding-right: 25px;
    }
    While CSS is not an incredibly complicated code language, there are a huge number of different properties and various ways to apply CSS to different elements. If you want to edit themes or improve them, then it is well worth knowing the basics of CSS. There are numerous free resources on the internet which will guide you from nothing up to the more advanced stages.
  • Header Fonts
    Header font settings control the font face of all headers including site titles, site slogan, sidebar header and blog entry titles. Settings are also applicable to HTML tags including header tags. If the chosen font face does not exist on a users computer (or is deactivated), a fail-safe mechanism in CSS code will ensure a site will render in a similar typeface. Using header tags is also a good method to improve SEO (Search Engine Optimisation) as it highlights import text to search engines. Further information on using HTML header tags can be found here.
  • Content Fonts
    This font setting basically controls the type face of everything else on a page not covered by the header font settings. Again, if the chosen font face does not exist on a users computer, a fail-safe mechanism in the CSS code will ensure a site will render with a similar font. Having both header and content font settings enables you to mix fonts, such as a serif font for headers or a sans-serif font for content and vice-versa.
  • Text Size
    There are four text size options in most themes - 70%, 80%, 90% and 100%. Text sizes are specified in percent in accordance with website accessibility guidelines and to enable better text scaling capabilities in Internet Explorer. If you require a font size not listed, please use custom CSS such as:

    body {
        font-size: 82%;
    }
    If you wish to change the text size of individual page elements, you can use code similar to that above, substituting the name ‘body’ for the divider or class name such as #pageHeader or .siteSlogan Although you can change the height of text in styled text pages and sidebars, it’s best practice to rely on CSS to achieve all formatting.
  • Line Spacing
    Like in word processing applications, line spacing enables you to control the gap between lines of text. Some users prefer condensed blocks of text while others make preference to wider spacing. Either way, settings are there to cater for most needs. Line Spacing dimensions are specified in em's to improve browser compatibility and text scaling. If you require a line spacing different to those listed, you can use custom CSS such as:

    body {
        line-height: 1.65em;
    }
    If you wish to change the line height of individual page elements, you can use code similar to that above, substituting the name ‘body’ for the divider or class name such as #pageHeader or .siteSlogan
  • Letter Spacing
    Letter spacing enables you to increase or decrease the gap between individual characters to improve readability. As with the text size and line spacing settings, letter spacing can be adjusted to suit the type of content you wish to present. Some users prefer short, condensed blocks of text whereas others prefer longer, lightly spaced blocks of text. Letter spacing is specified in pixels in accordance with web accessibility guidelines. If you require letter spacing different to the theme options given, you can use custom CSS such as:

    body {
        text-spacing: 3px;
    }
    If you wish to change the letter spacing of individual page elements, you can use code similar to that above, substituting the name ‘body’ for the divider or class name such as #pageHeader or .siteSlogan. You can also specify letter spacing in minus dimensions (e.g. -1px) to achieve very condensed or even overlapping characters.
  • Using 'Extra Content'
    Some ThemeFlood themes have started using the EC (Extra Content) method to enable you to add blocks of text or pictures to areas of a theme which previously could not support content without heavy modifications and theme customisations. Using EC is fairly easy.
    Firstly, under the advanced settings, tick the option Preview Extra Content Containers. For themes which support EC, this option will highlight all of the EC containers with red borders and tell you the names of the containers. Paste this code into the site sidebar before or after any existing content:

    <div id="extraContainer1">
        
    </div>
    Change "extraContainer1" to the name/number of the extra content container your wish to use (e.g. extraContainer5). In this code above, the first tag defines the start of your extra content. The second tag defines the end of your extra content. So simply paste your extra content between the two open and close tags like this:

    <div id="extraContainer1">
        My extra content goes here...
    </div>
    If you are pasting this code into a styled-text sidebar, highlight the start and end tags separately and set them to Ignore Formatting under the Format menu in RapidWeaver. This will remove any extra spaces or line breaks in the code. EC can be applied on a page-by-page basis or you put the EC tags in the sidebar box under the Site Setup in RapidWeaver for the same EC on all pages. Untick the Preview Extra Content Containers option in the page inspector when you have finished entering your EC. Save and preview your page to check everything is where is is suppose to be. You can also add EC to supported themes using Stacks. Further information on using EC including code snippets can be sourced from the extracontent.info website.
  • Logo Settings
    These settings enable you to change positioning of logo images which you input through the site setup window in RapidWeaver. Options can include screen badges, the header and sidebar (navigation) container. Additionally, under the 'Advanced Settings' there is an option to make screen badges fixed. This means that they wont scroll when the rest of the page is scrolled. When selecting logo positing, you can choose multiple positions if required. All logo's automatically link back to the base URL - the same address specified in the site setup window of your project.
  • Header / Media Frame Height
    Some themes support several height settings for adjusting the height of the Header or Media Frame container. This enables you to control the height depending on the content you wish to use here. Alternatively for custom heights, you can use custom CSS like this:

    #mediaFrame, #flashBox {
        height: 220px;
    }
    You may need to change the ID name based on the theme you are using. Always specify Media Frame heights in pixels to prevent the container being scaled if text size is increased or decreased. You will notice that narrower media frame heights force site titles and slogans to ‘hide’. This is done intentionally to prevent text elements overflowing into other containers and breaking the design.
  • Editing images using Finder
    This is the method most people use to change images in a theme. Start by opening the theme contents for the theme you want to edit images in. Double-click on the folder marked "images" and then open the "editable_images" folder. This folder contains all of the background image files required by the theme. In this folder, you can drag in new images to replace those supplied with the theme. Just make sure the images you are importing have the same filename and extension (e.g. .jpg) to ensure existing images are replaced.
    When importing custom themes into any theme, it is always worth using images which have been 'optimised' for use of the internet. This means that the images are already scaled to the correct size and saved in a web-safe format using some compression. Use JPG for basic illustrations or photographs and use PNG for transparent or semi-transparent images. Optimised images will allow a page to load faster and in return, smaller image files will save you bandwidth. Images can be optimised using almost any image editor including Gimp, ImageWell, Pixelmator or Acorn. Users of Photoshop CS or Photoshop Elements also have access to a "Save for Web" option under the file menu.
  • Editing images using RW MultiTool
    RapidWeaver Multitool
    Some people prefer to use the third-party utility RapidWeaver Multitool for editing background images in themes. It’s not always reliable, but most users find it easier to use than other methods. Both the free 'lite' version and the commercial 'pro' version are compatible with ThemeFlood themes. Start by launching RapidWeaver MulitiTool. Under the theme menu, select the theme name you wish to edit images in. Then under the images menu, choose the image you want to edit. This image opens in a new window and RapidWeaver Multitool allows to to drag in a new image to overlay an existing image. You can also apply all sorts of other special effects to the image such as colour enhancements, text, masks, filters and edge effects. When done, click the Save in Theme button. Should you want to revert back to the original image, click the Back to Original button. Select the edited image for use from the theme settings in RapidWeaver. Much more information on using RapidWeaver MultiTool (which is developed by MultiThemes) can be found here.
  • Editing images using RW Theme Miner
    RapidWeaver Theme Miner
    RapidWeaver Theme Miner is a basic application which enables you to easily open the theme contents and edit files (e.g. images) within a theme. Start by launching RW Theme Miner and select your theme under the "User Themes" section. Click on the Reveal button to show the theme conents. Open the images folder and then open the folder named "editable_images" using the drop down arrows. In this folder, you can drag in new images to replace those supplied with the theme. Just make sure the images you are importing have the same filename and extension (e.g. .jpg) to ensure existing images are replaced. More information and documentation on using RapidWeaver Theme Miner is available from the To The Point Software website.
  • Embedding Bannerzest Flash headers in the theme
    The best application to use for creating Flash animations is Bannerzest by Aquafadas software. Start by making a new folder on your Desktop. Create a Flash animation which fits your header container and export it to the new folder on your Desktop. With the theme contents open in RapidWeaver, drag your new folder from your Desktop into the Flash folder already present within the theme contents. In Bannerzest, click the Show HTML button and copy this code into the custom header box in the RapidWeaver Page inspector window e.g.

    <script type="text/javascript" src="file:///Users/Will/Desktop/flash2/bzLoader.js"></script><noscript><p style="background-color:#ffffff;color:#000000;padding:1em;">Your browser doesn't support JavaScript or you have disabled JavaScript.</p></noscript><div id="SWBZ3D882484FC624AFCB4C5"></div><div id="LKBZ3D882484FC624AFCB4C5"></div>
    Change the src attribute to the following:
    src="%pathto(flash/folder_name/bzLoader.js)%"
    Change "folder_name" in the above code to the name of your new Flash folder. With the SWF option selected under the theme styles, it should now be possible to view your custom Flash banner. RapidWeaver must be listed as a 'trusted' application otherwise Flash animations will not be displayed. For the first time you use Flash in RapidWeaver, open BannerZest, click on the Publish tab and click the item marked Open Flash Security Preferences. Ensure RapidWeaver is presented in the list and has a tick next to it. This process only needs to be completed once.
  • Embedding Bannerzest Flash headers from an external source
    By default, Bannerzest prefers to publish all Flash animations you create to a web server via FTP. This process is very well documented on the Aquafadas website and is probably the easiest option. After you have published your Flash animation, Bannerzest generates the embed code for you. The code looks like this:

    <script type="text/javascript" src="http://www.mydomain.com/flash"></script><noscript><p style="background-color:#ffffff;color:#000000;padding:1em;">Your browser doesn't support JavaScript or you have disabled JavaScript.</p></noscript><div id="SWBZ3D882484FC624AFCB4C5"></div><div id="LKBZ3D882484FC624AFCB4C5"></div>
    Paste this code straight into the Custom Header box in RapidWeaver. The Flash animation is then loaded in the theme header. Again, RapidWeaver must be listed as a 'trusted' application otherwise Flash animations will not be displayed. For the first time you use Flash in RapidWeaver, open BannerZest, click on the Publish tab and click the item marked Open Flash Security Preferences. Ensure RapidWeaver is presented in the list and has a tick next to it. You can embed different Flash animations in the header of different pages. To display your Flash animation in the normal sidebar or content container, just paste the code into these containers. There is a large amount of documentation on the Bannerzest website.
  • Embedding Flash headers from other software
    For people using software other than Bannerzest to make Flash headers, you should still be able to get custom Flash headers into the theme. In terms of the code, most users find this code normally works well in RapidWeaver:

    <object width="550" height="400">
    <param name="movie" value="somefilename.swf">
    <embed src="somefilename.swf" width="550" height="400">
    </embed>
    </object>
    Paste this code into the Custom Header box in the RapidWeaver Page Inspector. Amend the width and height settings to match the size of your animation. Change the value and src (source) attributes to the address where the animation is stored. In order to maintain compatibility with older browsers such as Internet Explorer, you may need to add additional code to that shown above. This is especially true if you are using transparency effects in the animation or trying to layer text or logo images over the top.
  • PHP "Last Published" Date
    This feature enables you to display a date or time informing visitors when a page was last updated. The "Last Published" function used in ThemeFlood themes enables you to customise the date format. The date is generated using PHP, so your webserver must support PHP in order for this to work. The date format is changed via some code in the index.html file. Open the theme contents and open the index.html file in a text editor. Scroll right down to the bottom where you should see code similar to this:

    <?php echo date( "d/m/y", getlastmod() );?>
    The 'd/m/y' are your date characters. You can rearrange these to match localisation's. Alternatively, use this guide to customise the date format further and apply more advanced date output options. When finished, save and close the index.html file. When previewed through RapidWeaver, the date stamp suffers from the 'millennium bug' and will default to 1/1/70 UNIX time. When you publish your site, it will automatically change to the server time from your web server. You also need to change your page extension from .html to .php under the Page Inspector for this feature to work. If the time is wrong after you have published, there is a good chance the clock on your web server is wrong or configured to a different time zone.
  • Fixed Screen Badges
    Used in conjunction with your own logo imported into RapidWeaver, the fixed screen badges option is a smart setting which 'glues' your left or right aligned logo images to the top of the screen. So when a page is scrolled up or down, the logo images don't move and remain in a fixed position. It's personal preference if you choose to use this setting or not. The logo image continues to link back to your homepage. This setting will not work on browsers older than Internet Explorer 6 as this browser does not support the CSS used in this effect. Bare in mind also that on narrower computer screens, larger logo images may obscure site content.
  • Width
    As with the sidebar settings, there are a number of different width setting allowing you to control the overall width of the theme. At the two extremes, you can opt for an anorexic 'stick' wide theme or spread your design up to a flexible width. The choice is entirely yours, but should be partly influenced by the type of content you intend to use. The custom setting permits you to enter your own width. To do this, open Theme Contents > css > width > custom.css file.

    #container, #header, #border {
        width: 960px;
    }
    Change the existing number (in this example 960) to your own width in pixels (px). Save and close this file when done and select the custom width setting. Selector names in the above code may need changing to capture additional elements in your theme.
  • Colour Settings
    To make colour picking easier, colour settings in some ThemeFlood themes are split between three categories, each outlined below:
    HTML Colours refer to elements generated through HTML code such as code snippets found in RapidWeaver. These colour variations cover items such as links, header tags, blockquotes, code, definition lists, ordered lists, unordered lists, editorial marks and tables.
    Layout Colours control specific 'chunks' of the theme such as containers and items featured on every page such as footers and titles. Most of these items will be universal throughout your project.
    Page Colours relate to more specialist colours found in conjunction with individual page styles. In this category for example, photo pages and blog pages feature heavily giving greater control over colour.
    As already mentioned, when you've created a custom style for a theme, you can save the style (including colours) for use in other pages or projects.
    Careful consideration should be made when choosing colour schemes for your new projects. Ideally, dark should be placed on light and vice versa to contrast text against backgrounds for ease of readability. It is also recommended you use web-safe colours. For example, instead of using #406a9b chosen straight-up with a colour picker, you use the web-safe hexadecimal equivalent of #336699. Web-safe colours are important because some web browsers have limited colours (sometimes as few as 256 colours) and different web browsers display colours slightly differently (you might have noticed this between versions of Safari and Firefox). It is also advisable to contrast the colours of navigation links and web links to aid accessibility. Ideally, use a colour scheme for your website for a clear and consistent appearance.
  • Styling Third-Party Plugin Content
    Most third party page styles (such as RapidFlickr, RapidBlog, Stacks, Blocks, FAQmaker or PayLoom etc.) borrow CSS styling from default RapidWeaver page styles such as the iPhoto Album page. So if you want to change the styling of items on third-party pages, you may find this can be achieved easily through normal theme variations. Also bare in mind that most third party plug-in’s feature their own inspector-type window with options for specifying custom CSS including colours. Contact your plug-in vendor or plug-in documentation if in doubt.
  • Publishing Your Site
    The first time you publish a site from RapidWeaver, the entire theme is uploaded to your web server. This can take a while as there can be several hundred individual files. Subsequent publishes are normally much quicker as RapidWeaver will only upload pages which have changed. If you make any drastic changes to your site such as renaming pages, changing file extensions or changing the theme, then it is well worth logging into your web server with some FTP software such as Cyberduck to delete an existing site. Then you can upload the whole site again and know that the web server is clean of orphaned files. If after publishing a site you have files or stylesheets missing (indicated by incorrectly styled pages) then it is well worth marking all pages as changed and republishing all files. Equally, it is worth checking the URL of the site is correct under the Site Setup window in RapidWeaver.
  • Optimising a site for search engines
    Search engines are continually evolving and changing their methods for listing pages in search results. Naturally search engines want to list only the best, most relative content. So it is important you bare this in mind when planning and developing a new website. RapidWeaver is one of the most search-engine friendly tools to be using if one of your main objectives is search engine ranking. But miracles don't happen overnight and it normally takes several weeks or months before your pages start showing in search engines. There are lots of things you can do in RapidWeaver such as adding keywords, page titles, descriptions and ALT tags to images. The best place to obtain the latest information is to search the RapidWeaver forum to see what the latest trends are. Another very useful resource is the RapidAnswers Wiki which has a section dedicated to self-marketing and SEO (search engine optimisation). A third-party RapidWeaver plugin regularly discussed in SEO topics is Sitemap by Loghound Software. This plugin produces a useful sitemap page which offers visitors to your site an alternative way to navigate pages. But more importantly it will generate a complete list of pages which can be submitted to search engines. This list tells search engines where your pages are, so they might be indexed quicker. NEVER buy SEO 'packs' or pay third-party companies to do SEO work for you. Most operate as internet scams. So your site wont rank any higher on search engines and will probably end up black-listed as spam. They are a complete rip-off and waste of money so avoid them if you want to protect your website.
  • Theme Browser Compatibility
    Before themes are released, they are tested against various web browsers including Internet Explorer 6, 7, & 8, Firefox, Opera, Camino, Safari, Chrome and OmniWeb. Any problems identified are corrected before a theme is released. There are a wide range of different factors which can effect the compatibility of a completed website. Content added to pages can cause problems if it is not formatted correctly or if content such as images and links can't fit into a designated area. Some third-party plugins can also cause problems. It is always wise to test a completed website yourself before making it public. Online utilities such as Browsershots.org make it easy to test pages on Internet Explorer or you can test through a regular PC. Themes are unlikely to work correctly in discontinued web browsers such as Internet Explorer for Mac, Netscape Navigator, Mozilla or Internet Explorer 5. These sorts of browsers have very primitive support for modern web standards like CSS and only a tiny proportion of people still regularly browse using these legacy browsers. Scripts can be used to block access for people on older web browsers, though generally this practice is not a good idea on public websites. You should expect to see a degradation in rendering quality on older browsers such as Internet Explorer 6. It is possible that text will become much 'rougher' in appearance and scripts or special effects will take longer to run.
  • Code Validation
    Every ThemeFlood theme uses XHTML and CSS source code. Sites that use valid source code are generally more accessible to people and are more search-engine friendly. Not to mention that a professionally constructed website reflects well on its owner! You can run a validation test on your website once it is published, or you can download a utility such as SAC to test the site offline. Any errors are normally the result of simple problems such as using an ampersand character instead of an HTML entity of forgetting to close tags after entering HTML code. Another common mistake is forgetting to add ALT tags to images which will result in validation errors. You can search common errors on the internet for a better explanation as to what might be causing them. Some third-party plugins don't use valid code which makes fixing validation errors impossible on your part. So it is worth testing different plugins, if possible, before purchasing them. In some ThemeFlood themes, the 'Advanced Settings' can sometimes result in CSS validation errors. This is not a fault with the theme, but is likely to be that the CSS code used (e.g. border radius for rounded corners) is not a finalised web standard yet, therefore the validation tool does not recognise it.
  • System Requirements
    ThemeFlood themes are designed primarily for the latest version of RapidWeaver which is currently version 4.2. However, the themes are backwards-compatible and should work perfectly with RapidWeaver 3.6. A surprising number of people are still using RapidWeaver 3.6 as they have not yet upgrading to Mac OS X Leopard which is required to run the latest version of RapidWeaver.
myExtraContent6
myExtraContent7