This user guide can be viewed online, printed and saved as a PDF or iBook. It is compatible with Reader in Safari 5. Go to support.themeflood.com and click on the Flood user guide link. Choose Flood from the user guide list.
Introduction
System And User Requirements
This theme is developed and tested to work with the latest version of RapidWeaver. The theme is also backwards compatible with RapidWeaver 3.6. You will need to already have a licensed version of RapidWeaver installed on your computer before installing Flood. It’s assumed that users of this theme have a good understanding of how RapidWeaver works, in relation to aspects such as creating a new projects, changing theme settings, adding pages, changing website settings and publishing sites to the internet. Some third-party RapidWeaver plugins are mentioned in this user guide, but generally no extra plugins are required to build basic websites using this theme. Advanced features like search bars may require the purchase of additional plugins.
Theme Compatibility
Important - CSS3 elements like rounded corners and box shadows on the banner container are not supported in IE6, IE7 or IE8. This is because these versions of Internet Explorer lack support for these particular CSS elements. Although browser hacks like CSS PIE are available, commonly it has been found that these can conflict with other plugins running in a page and can break if custom CSS code is added to a page or the theme is renamed. Website accessibility and content is not impeded at any time. Modern browsers will continue to render banner corners and shadows perfectly well. Older browsers will ignore the CSS3 code and the banner will revert back to square corners without a box shadow. It is officially referred to as 'graceful degradation' and more information is available here: http://en.wikipedia.org/wiki/Fault-tolerant_system
Plugin Compatibility
Flood has been extensively tested with all of the standard plugins (page styles) included with RapidWeaver. In addition, testing has also been done with a wide range of third party plugins by various developers including Loghound, Cosculture, Yourhead, YabDab, Weaverplugins and SymphonIP. It should be assumed that Flood will work with other third-party plugins as well. However, some third-party plugins do not use valid XHTML or CSS code and may not be compatible with certain web browsers. In such instances, you will need to contact the plugin developer for updates or support or use alternative plugins. Demo versions of Flood are available for free download, so you can test and fully evaluate specific plugins yourself before purchasing the theme. Plugin developers also have access to the demo version for testing.
Theme Settings
Theme Colour Settings
Flood has a wide range of theme colour settings, available for use under the style tab in the theme settings. Most main colour settings are listed under the 'Colors' disclosure tab. Other groups of theme settings may also include colour settings, relating to that particular element. Clicking on a coloured square reveals the Mac OS X colour picker window, where you can select new colours using a range of different palette tools.
Banner Background Settings
The large image container at the top of the theme is referred to as the banner. This container is capable of hosting static background images, Extra Content and content generated by other page styles or plugins. You can customise the image background of this container using any one of the example images supplied with the theme. Or you can import your own images -- Flood has 40 placeholders for standard JPG images. You can either choose to have the same banner image on every page, or have different banner images across different pages to add some variety to your website. Alternatively there is a solid colour fill option or the possibility of using Flash (SWF) or a slideshow via another plugin. Example header images supplied with the theme were all produced by myself, and you are welcome to reuse any of them in your own web site.
Banner Height Settings
Flood gives you a broad range of header height settings, enabling you to carefully customise the banner height. Some users prefer a smaller banner container, whereas other may want a much taller container. Height settings available are specified in increments of 25px. The tallest banner height setting available is 600px.
Banner Border Settings
By default, the banner container in Flood has an area of padding around it and a border. This is purely for decorative purposes and helps 'frame' the banner. The background colour fill and border colour are customisable under the Banner Border settings. There is also a selection of banner border styles provided – a choice between either a conventional square border or rounded corners. If no border is required, choose the 'none' option. The banner padding and border can also be hidden, by setting the colour of these elements to match a body background.
Please note that rounded-corner border options are only supported on web browsers which support the CSS3 border-radius property. Currently these browsers include Safari, Firefox, Chrome, Opera and Internet Explorer 9. On all other web browsers without CSS3 support, borders will be rendered square. This is only a minor cosmetic issue and will not effect the display of banners or internal content.
Box shadow effects are only supported by CSS3 compliant web browsers, like Safari, Opera, Firefox, IE9 and Chrome (hence the asterisk mark against the theme settings). In other web browsers, box shadows will be ignored. Box shadows are appended onto the banner container, so the banner container will not be reduced in size, nor will the shadows effect surrounding elements. Because all box shadow parameters have to be declared in a single CSS attribute, the box shadow colour and size are grouped together. By default, all box shadows in this theme have a colour of #999. This can be changed by opening the theme contents and then opening the CSS and banner-border folders. Open the required shadow css file in your code editor and change all three instances of the box shadow colour. Note that we have to declare box shadows 3 times, to retain compatibility with those web browsers with support for CSS3 code.
Header Font Settings
A choice of 20 web-safe and semi web-safe font face options are provided in the theme. Header font settings are applicable to the site title, site slogan, sidebar title, blog entry titles, photo album titles, video album titles and header tags. A font stack is used for each font setting, ensuring that if a person viewing a site does not have a particular font installed, their web browser will default to a close alternative. For example, if Palatino is not available, Times New Roman will be used instead. You can also opt to use an 'embedded' font which can be sourced from the Google Font Directory service (details below).
Navigation Font Settings
A choice of 20 web-safe and semi web-safe font face options are provided in the theme. Navigation font settings are applicable to the drop-down menu and mega menu. A font stack is used for each font setting, ensuring that if a person viewing a site does not have a particular font installed, their web browser will default to a close alternative. For example, if Palatino is not available, Times New Roman will be used instead. You can also opt to use an 'embedded' font which can be sourced from the Google Font Directory service (details below).
Content Font Settings
A choice of 20 web-safe and semi web-safe font face options are provided in the theme. Content font settings are applicable to all elements of a page not covered by header font settings. Again, a font stack system is used for the font settings, ensuring that if a person viewing a site does not have a particular font installed, their web browser will default to a close alternative. For example, if Palatino is not available, Times New Roman will be used instead.
Note: Some RapidWeaver plugins will force their own font settings into a page. Sometimes these may not match your preferred fonts. In such cases, you may need to change plugin settings or use custom CSS to obtain a more desirable style. Contact the plugin developer for further information. In addition, some web browsers do not permit elements like form fields or buttons to have their font face changed. This is more noticeable in PC web browsers.
Embed Fonts Via Google Font Directory
Each of the main theme font face settings in this theme includes an option to use embedded fonts hosted by Google. Embedded fonts have become a popular trend in modern web design, as a method of breaking away from standard web-safe fonts and styling text with more attractive fonts. Google has recently launched a free service which hosts a wide and growing collection of embedded font faces. These can be used in both personal and commercial projects, subject to your acceptance of the license agreement: http://code.google.com/webfonts
Any of these fonts you see listed on the Google Font Directory can be used with this theme. All that is required is a minor code edit to pull in the correct font from the directory and embed it within your theme. Start by opening the theme contents and then the CSS folder in Finder. If you want to apply an embedded header, content or navigation font, open the relevant folder. Then open the import.css file in your code editor. You'll see that there is already comments and code in this file.
In your web browser, navigate to the Google Font Directory website and click on a font you want to use. In the next window, you are presented with previews of the font and links to embed it. Click onto the blue 'Use this font' tab and tick any available font variations like bold or italic you want to use. One of the code snippets presented is the font stack - a list of fonts which includes your embedded font and a couple of other generic font faces like Arial and serif. Copy this font stack and paste it into the import.css file, replacing the font stack already there. Do not change the element (selector) names that the font is to be applied to (e.g. body, #siteTitle, #nav). Just replace the list of font names. The completed code would look something like this if your were embedding Reenie Beanie:
body {
font-family: 'Reenie Beanie', arial, serif;
}
Back on the Google Font Directory page, click the 'Advanced techniques' link at the bottom of the 'Use this font' panel. Copy the @import code snippet which looks like this:
@import url(http://fonts.googleapis.com/css?family=Reenie+Beanie);
Again, paste this code into your import.css file, replacing the code already there. When you are finished, save and close the import.css file. Go back to RapidWeaver and select the 'Import Via Google Font Directory' option. This will then call your modified import.css file and pull it into the theme.
There are other techniques available for embedding fonts in the theme. You can use free plugins like the Font Getter Stack which work in the Stacks plugin and can pull in embedded fonts from Google. Please note that sometimes you cannot preview embedded fonts in RapidWeaver, and you may have to preview your website in a normal web browser to see the embedded font faces take affect. In addition, be aware that some fonts can be quite large in size (sometimes over 100KB) which may affect page loading speeds.
Line Height and Font Size Settings
These settings allow you to carefully customise the appearance of text within the theme. This enables you to customise text in areas such as content or sidebar. Letter spacing controls the distance between individual letters or character. Line height controls the distance between lines of text. Font size controls the height of lettering. Some web designers recommend that light text on a dark background should be presented in a slightly larger font size and line space than normal to help aid clarity. Larger text sizes can look particular effective in some designs.
Logo and Logo Links
Logo images can be inserted into the site setup window as normal in RapidWeaver. Logo images will automatically link back to your homepage. The homepage address is the same address you provide in the ‘web address’ box within the Site Setup window. If you need a logo to link somewhere else, open the index.html file within the theme contents and find the logo tags. Change the ‘base_url’ tag to a URL of your choice. Flood supports multiple logo placement options including fixed screen badges, banner container and sidebar.
Note: In Internet Explorer 6, logo images which are placed using the ‘fixed’ options will instead behave as absolutely-positioned elements. This is because this browser has limited CSS support and does not support fixed placement for objects. In addition, semi-transparent PNG logo images are non-supported in IE6 and will be rendered with a solid grey background instead.
Content Columns Setting
This setting can be used to split content up into multiple columns using the brand new CSS3 column count property. You can choose the number of columns and the gap between them, using the setting provided. It goes without saying that this method of column creation, while incredibly easy and effective, is only supported on modern CSS3-compliant web browsers like Safari, Firefox, Opera and Chrome. In other web browsers, the columns will degrade back to a single block. It is recommended that multiple columns are only used with simple content types like styled text – multiple columns do not work correctly with some third-party plugins or page styles like photo albums. If you need a robust method to generate multiple columns across all web browsers, consider using the Stacks plugin instead. Some plugins like RapidCart and FormLoom also enable you to split pages into multiple columns - contact the developers for further information.
Vertical Spacing
These useful settings allow you to change the spacing (white-space) between different elements in the theme like the header, banner, horizontal content boxes, site slogan and content containers. The effect is purely cosmetic and does not infringe on website accessibility or performance. Some users prefer a more sparse theme layout with more white space, whereas others prefer a more condensed page layout.
Sidebar Settings
The sidebar in Flood is located towards the end of a page and acts as a horizontal container which can accommodate a wide variety of different content types. All sidebar settings can be accessed under the theme settings. Care should be taken that any wide items inserted into a sidebar or extra content container do not extend outside the sidebar boundary – which could potentially cause layout problems (container wrapping) in Internet Explorer.
You can choose to have the sidebar content floated left or right. In the gap which appears on either side of the sidebar content, plugin content like blog archive links, RSS feeds or RapidFAQ table of content links will be placed. If no sidebar plugin content is required for display, the sidebar can be set as a block, which will span the full 100% width of the sidebar container.
Width Settings
Several theme width settings exist in this theme, enabling you to customise the main container width. Some users prefer narrower widths, whereas others prefer wider page widths to fit more content in. Your choice of theme width should be governed by the type of content you wish to display and plugins you want to use (plugins such as WeaverPix and RapidAlbum require wider pages). When designing your website, remember that quite a large proportion of internet users have screen sizes of no more than 1024px by 768px. This is a trend which has stabilised since the introduction of new devices such as netbooks and tablet PC's. Theme width settings are specified in increments of 50px and a couple of other specialist widths are included for those familiar with the concept of grid systems.
Last Updated Stamp (Miscellaneous Settings
This option will display the date a page was last updated. This is very useful for readers of your website to gauge when content was last updated and is an essential requirement in educational or informational websites. RapidWeaver will automatically write the date into the footer when this option is ticked. If you are using RapidWeaver 4.4 or less, the date will always be presented in mm/dd/yy format. In RapidWeaver 5.0 and later, the date will be localised to that of your computer. So for example outside of the US, the date may be shown as dd/mm/yy. If you need to change the 'Page last updated' text, this can be done by opening the theme contents and opening the index.html file in a code editor. Scroll down towards the bottom and make the necessary change.
Footer Navigation (Miscellaneous Settings)
This setting will display a horizontal list of your parent pages in the footer container. This can be used to offer end users an alternative method to navigation parent pages of your website when they scroll down to the bottom.
Navigation Drop-Shadows (Miscellaneous Settings)
Ticking this option will apply CSS drop-shadows on drop-down menus and mega menu panels. The shadow colour can be changed by opening the theme contents and then opening css > misc > navigation-shadows.css in a code editor. Here the shadow colour, position and depth can be adjusted using CSS code. Please note that CSS drop-shadows are only supported in web browsers which support CSS3 code, which includes the latest versions of Safari, Firefox, Opera, Chrome and Internet Explorer. In older browsers like Internet Explorer 8 and less, this option for drop shadows will be ignored and no shadows will be shown. Drop shadows are purely for decoration purposes and can be used to enhance the appearance of the navigation menu.
Padding Below Site Title (Miscellaneous Settings)
By default, the site title will 'sit' on a horizontal line which runs across the theme, under the navigation links. Ticking this option will put a slight padding under the title, to lift it up and put it in alignment with navigation links. Sometimes this may look better as navigation links span towards the site title.
Display Site Slogan (Miscellaneous Settings)
Because Flood is a minimalist style theme which presents content in the form of modules, by default the site slogan is hidden from view. Ticking this option will display a site slogan as normal, sandwiching it between the banner container and content container. The site slogan can be changed between different pages under the site inspector in RapidWeaver. So it would be possible to use this as a page title on different pages. Site slogan text is wrapped inside H2 header tags, so it is always prominent to search engines indexing your website.
Right-Align Site Title (Miscellaneous Settings)
This setting will switch the site title from a left alignment to a right alignment. In turn, this will also switch the navigation links from the right, across to the left. It is personal preference as to whether you have the site title left or right aligned. One advantage of switching it to right alignment is that you can have larger mega-menu structures, without them running off the edge of a screen.
Capitalise Navigation Links, Site Title, Site Slogan, Headings & Titles and Footer Content (Miscellaneous Settings)
When ticked, any one of these capitalisation options will convert normal text to uppercase using CSS. This can be useful to help increase the boldness of certain page elements. The advantage of using CSS to capitalise text is that the original format of the text is preserved - this is very useful for search engines crawling your website.
Fade In Header, Banner, Content, Footer (Miscellaneous Settings)
Ticking any of these options will fade in the selected containers on page load. The code to control this special effect can be found at the top of the index.html file. It would be possible to edit the animation speed to make the containers fade in faster or slower than it currently does. If you are familiar with jQuery Javascript, you may also be able to chain in some additional effects or introduce some delays.
Splash Screen Style (Miscellaneous Settings)
This theme setting will remove the header, horizontal content, sidebar, footer and navigation bar containers from the theme. This will leave just the banner and content container on display. Splash screens are particularly useful in some websites for creating an eye-catching welcome or introduction page when someone lands on a website. Alternatively the Splash screen style can be used to make a special announcement like the upcoming launch of a new website, product or service. Links from the splash page onto other pages would need to be created manually. Third-party plugins like PlusKit (not included) can be used to import content from other pages into the page like contact forms or slideshows.
Preview Extra Content Containers (Miscellaneous Settings)
Flood has support for several EC (Extra Content) containers. EC is becoming a popular method in third-party RapidWeaver themes for allowing the placement of content outside of the normal editable regions of a page. See details below for further information on how to use EC. This option to preview EC containers offers RapidWeaver users an excellent insight into where EC containers will be rendered. The names and numbers of each EC container are displayed for easier reference.
Configuration
Search Bar Setup
If you need to change the label on the search button, this can be done in the index.html file contained within the theme contents. Open this file in your preferred code editor and scroll down to the point commented 'Search Function'. The submit input label can be changed here. It is recommended you keep the search button label roughly the same size as it currently is, to avoid breakage of the search form field.
@import Via GFD
This theme has support for embedding your own fonts using the Google Fonts Directory service, or your own custom code. Embedded fonts are supported in each set of font settings within the theme (e.g. header and content). Typically embedded fonts have an advantage of looking more attractive compared with some standard web fonts, and can really improve the professionalism of a website. Unlike image text, all lettering can be selected or printed as normal with no detrimental effects on search engines.
Setting up embedded fonts requires some minor modifications to the theme. To use embedded fonts in this theme, open the theme contents and open the css folder within. Open the desired font setting folder (e.g. header-font), depending which set of font settings you want to add an embedded font face to. Open the import.css file in your preferred code editor. You will need to refer to the Google Font Directory online, to choose a suitable font face. On the "Get Code" page, make a note of the font name (short name and full name).
The first stage is to import the font into the stylesheet using the @import CSS declaration. This is somewhat similar to the function in PlusKit, but is designed specifically for importing other stylesheets or fonts (as a result it does not use PlusKit). You can modify the example code already provided. Next you need to add your font name to the 'font-family' settings. Again you can use the existing code as a point of reference and modify it accordingly. Save changes to the import.css file when done. Select the '@import' theme setting to use your newly embedded font face. Please note that you often need to preview or export a website outside of RapidWeaver, to see the embedded font working. It should also be pointed out that using embedded fonts may slow down page rendering.
Disabling Page Links (Keeping Them Displayed In The Menu)
This is useful if you are creating drop-down menu layouts, and you want to disable parent links to prevent them being clicked. Please note that the method outlined here may only work in the Flood theme, and will not work in other themes (because it relies on extra code which has been added to the theme). For pages you wish to disable the links for, open the Page Inspector in RapidWeaver. Make sure that the Browser Title field contains a page name or brief description – this is a very important setting and should not be skipped. In the Page Title field, enter the following HTML code:
</a><p>Static Title></p><a>
The words "Static Title" can be changed to the text you want displayed. What this code does is to prematurely close the opening link tag and reopen it again after your static title to prevent validation errors. Text inside the span tags will be recognised as text you do not want linked, and the theme will automatically apply the necessary CSS and Javascript to disable the link, while retaining formatting like padding. This method of disabling links is completely safe to use across all web browsers and will not cause any XHTML validation errors. If the link previously acted as a trigger to display sub pages, the jQuery code in the theme will continue to support hover events. When a user hovers over a disabled link, the default mouse cursor will be shown in most web browsers.
It is recommended that if you are disabling page links, you have breadcrumb links in RapidWeaver switched off, to prevent breakage of the navigation chain.
If you have menu links whereby the text wraps onto two or more lines, line spacing can be reduced by putting the link text inside a pair of HTML span tags with a class name of 'multi' applied. This will reduce the line spacing down to 1.25em by default. This method can be used for both active links and links you have disabled using the method discussed above.
<span class="multi">A Much Page Name That Does Not Fit On One Line</span>
Mega Menu Setup
Mega Menu's are a relatively new concept in web design, and have proved particularly popular as an alternative to conventional drop-down menu's. They are often favoured from a usability perspective, as more links are displayed to end users and organised by category for easier selection. For example, a single drop-down panel may contain several headings with sets of links presented underneath in columns. This may be easier for end users to navigate, rather than having to drill down through a long set of drop-down menu's.
Flood is the first ever RapidWeaver theme to properly implement support for mega-menu's. Setup is comparatively easy, and the theme will do all the hard work and coding for you. The first stage is to open the Page Inspector in RapidWeaver and switch the navigation style to a Mega Menu style. There are several Mega Menu settings available – each one has a different column width for the drop-down panels. Normally the 125px or 150px are the best settings to use.
The Flood theme will look at how your website is structured in RapidWeaver and build the mega menu around this structure. In essence, you must have three levels of pages in order to create a Mega Menu. Parent pages (like a drop-down menu) will be presented horizontally in a line at the top. Second level child pages will act as category (sub headings) within the menu. Third level child pages will form page links under each sub heading. If you stick to this site structure, you wont have any problems. Use the image below as a guide for setting up your pages. You can easily resort pages in RapidWeaver by dragging them and nesting them in the webpages panel on the left.
Depending on how many second level child pages you have determines how many columns you have in the drop-down panels. This gives you great flexibility to build a mega-menu with varying numbers of links. If a parent page does not have any sub-pages under it, the link will still be displayed at the top, but there will be no drop-down panel when the link is hovered over.
By their nature, Mega Menu's generate large drop-down panels which are aligned immediately under parent links. Care should be taken that drop-down panels on the righthand side do not overflow outside of the screen when hovered over. Other than reducing the number of sub headings in these rightmost panels, you could use singular parent links (without panels) to pad the menu away from the right, or change the site title alignment to right, so that your mega menu is aligned on the left instead for more space.
Extra Content
Flood includes basic support for EC (Extra Content). Ten EC containers are available in this theme – their positions and placement can be seen by using the Preview Extra Content Containers option under the theme settings. To embed content within your EC containers, use the standard EC code snippet or the Stacks plugin. More information on using extra content (including free snippets and stacks) can be obtained from this website: http://extracontent.info/
Adding icons to external links
HTML5 Code
Flood is one of the very first RapidWeaver themes to take advantage of the new HTML5 doctype and associated tags. HTML5 is compatible with all major web browsers (through the use of a small Javascript file) and XHTML and HTML5 code and work side-by-side to maintain excellent compatibility with RapidWeaver plugins and page styles. By using HTML5, you can begin building HTML5 elements into your websites, like audio, video, canvas and blog formatting. HTML5 promises great things.
The only one thing to be aware of in RapidWeaver is page output. Under the Page Inspector, you may have noticed a drop-down option to change the page output between default, tidied or optimised. Most of the time, it is recommended that you keep the page output set to default (unchanged). If one of the other settings is used, there is a risk RapidWeaver 4.4 may become confused by the HTML5 code and insert extra tags. These extra tags may cause breakage of pages. So this is just something worth baring in mind. If you find during the use of Flood that some pages appear broken, check the page output setting is locked on default.
Styling Header Tags
The header tags can be styled using CSS. You can ether style individual levels of headers, or style them all collectively as a group. To style individual headers, the CSS code you would use would look like this:
h3 {
text-transform: lowercase;
font: 200% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #5e5e5e;
}
This code above would convert all h3 tags to lowercase, increase the font size to 200% and convert the font face to a Helvetica font family with an iron grey colour. If you wanted to style all of your header tags the same, multiple selector names can be used in the CSS code, separated by commas like this:
h1, h2, h3, h4, h5, h6 {
text-transform: lowercase;
font: 200% "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #5e5e5e;
}
The text size of header tags will still vary in size, depending on the specific header tag used. But all header tags would have lowercase lettering, a standardised font face and the same colour throughout. This custom CSS code can either go into the custom.css file within the theme contents, or you can enter it in the normal custom CSS box within the page inspector in RapidWeaver.
Adding Custom Banner Images Using Finder
Banner images used by the theme are stored inside the theme contents. This ensures that the images become an embedded part of the theme and can be selected for use under the theme settings. For example, you may want to have a different image displayed on different pages of your website to add some variety.
The theme contents can be accessed by CTRL + Clicking (or right clicking) on the theme preview icon in RapidWeaver (the small picture of Flood which appears in your theme drawer). From the popup menu, select the 'Reveal theme contents in Finder' option. A new Finder window opens which contains a selection of files and folders. Open the folder marked 'images'. Then inside, open the folder marked 'editable_images'. This editable_images folder contains all of the images used by the theme, including placeholder images. Placeholder images are typically blank and named or numbered sequentially like banner1.jpg, banner2.jpg, banner3.jpg for example.
Any of these placeholder images can be replaced using your own images. When you add new custom images, name them so that they replace placeholder images. By replacing the placeholder images supplied in the theme, your custom images will be available for selection under the theme settings. When creating new images, it is advisable that these are optimised for the internet - typically this means they should not have any specific colour profiling applied and be of 72 DPI with a file size no greater that 75KB.
Adding Custom Banner Images Using RapidWeaver MultiTool
RapidWeaver MultiTool is a third party application which runs separate to RapidWeaver. Both a free and premium version of this software is available. When open, RapidWeaver MultiTool presents a list of themes installed on your computer. Themes which are compatible with RapidWeaver MultiTool store all of their images inside a folder called editable_images. RapidWeaver MultiTool enables you to edit any of these images. The original images are safely backed-up within the theme so they can be retrieved at a later date if required.
It is recommended you start by editing placeholder images. Placeholder images are typically blank and named or numbered sequentially like banner1.jpg, banner2.jpg, banner3.jpg for example. Using RapidWeaver MultiTool, you can drag and drop new images onto the canvases. Many basic image editing techniques can also be performed on these images and text can be applied. Use the save button in RapidWeaver MultiTool to apply the customised image to your theme. RapidWeaver MultiTool is developed by a separate software company and support documentation is provided on the website.
Adding Custom Banner Images using Extra Content
Extra Content enables you to place content outside the normal editable regions of a RapidWeaver website. In this theme, you can add EC to the banner container, making this perfect for adding custom images. Start by creating your images in an external editor and use a utility like PixelStick to measure the size of your banner container. Create the custom images to the same size of your banner container. You will need to apply aspects of styling like rounded corners in your image editor. Images should be optimised for the internet - typically this means that should not have any specific colour profiling applied and be of 72 DPI with a file size no greater that 75KB. When ready, enter this HTML code into the sidebar or use an EC Stack:
<div id="myExtraContent2"> </div>
Drag and drop your image into the code, placing it between the opening and closing tag. When you website is previewed, the image will be added to the banner. You may need to use the 'Preview Extra Content Containers' option under the theme settings to check you're using the correct EC container. EC also has some support for the @import function in PlusKit, so it may be possible to import images, Stacks or slideshows from other pages.
More information on using EC, including downloads of free Stacks and Snippets can be found here: http://extracontent.info/
Adding Custom Banner Images Using Plugins
If you are using plugins such as SYMnivo, SymTune or WeaverPix, there is an option to move generated content in EC containers. Similar to the approach above, you should use the 'Preview Extra Content Containers' option under the theme settings to check you're using the correct EC container. Then in the plugin, select the correct EC container from the menu.
Adding Custom Banner Images From A Warehouse
If your images are already scaled to size and stored on the internet, it is possible to import them into the theme using CSS or jQuery Javascript. To use CSS, copy and paste this code into the Custom CSS box in the page inspector:
#banner {
background-image: url(http://www.example.com/image1.jpg);
}
Change the URL to point to your image stored on the internet. There are other CSS attributes you can add to this code to change image alignment and background repeat. Search on the internet for further details of this.
Embedding Flash Banners Within The Banner
The banner container in Flood can accept Flash banners generated using software such as Bannerzest. Bannerzest is arguably the best application available on Mac OS X for creating basic Flash slideshows and other animations made from images and text. After you have created and published a Flash banner from Bannerzest, copy the embed code and paste it into the designated Extra Content container. In the Flood theme, you can preview where Extra Content containers are rendered (see the section on using Extra Content). The animation will then be shown within the banner container. RapidWeaver needs to be listed as a trusted application before a Flash file can be previewed – this is an option found under the preferences in Bannerzest and similar software.
Note: The images inside an animation are an integral part of the Flash file and cannot be modified by RapidWeaver or a theme. You will need to make sure the images used in a Flash animation are already scaled to the correct size. You may also wish to apply rounded corners to your images and save them as PNG images if rounded corners are desired. If embedding Flash generated by another application, follow the same instructions as above, but use the standard HTML Flash embed code shown below:
<object width="550" height="400"> <param name="wmode" value="transparent"> <param name="movie" value="http://www.example.com/somefilename.swf"> <embed src="http://www.example.com/somefilename.swf" width="550" height="400" wmode="transparent"> </embed> </object>
In this code above, the WMODE attribute has been added, which will enable other elements like a site title, slogan, logo or sidebar container to be layered over a Flash file. It is recommended that the Flash files are published separately to the RapidWeaver project, rather than trying to embed one within the other. The advantage of using Extra Content to embed you Flash is that you can have a different Flash animation of different pages if required.
Making Theme Customisations Using CSS
All elements in the Flood theme have either class or ID names. These names can be used as selectors, to apply custom CSS code to. The best method is to preview your website in a web browser such as Firefox or Safari. With developer tools installed or enabled, right click a particular element and choose to open or inspect it. This will give details of the element such as its selector name and and CSS code already applied to it. From this point, you can use the selector name and custom CSS code to change the style or appearance of an item. For example, padding can be changed, borders applied or background images added onto element. CSS gives you the potential to make many style changes to a theme. Flood has been designed and structured to make this as easy as possible. Some third-party RapidWeaver plugins also come supplied with details on how to modify styles using CSS. A lot of information regarding CSS can be sourced from the internet.
Applying Custom CSS
This theme features a very useful 'custom.css' file within the theme contents. Into this file, you can enter custom CSS code. Unlike the Custom CSS box under the Page Inspector in RapidWeaver, code entered into the custom.css file gets applied to all pages and enables you to edit CSS using a preferred editor like CSSedit or Text Wrangler. These types of editors often feature useful features like syntax colouring, auto-completion and validation, which combined make CSS editing much easier and safer. There are many free resources on the internet which cover CSS in detail. To open the custom.css file, right click (or CTRL + Click) the theme preview icon in RapidWeaver and select 'Reveal Theme Contents in Finder'. Open the custom.css file in your preferred code editor. If you only need to apply custom CSS code to a single page, enter this code under the Page Inspector custom CSS box as normal.
Theme Management
Duplicating Themes
If you are planning on making any modifications to the Flood theme, it is highly recommended that you duplicate the theme -- that means making a copy of the theme to customise, leaving an original version in RapidWeaver unedited. Working from a duplicated theme ensures you can always return back to an original version at anytime. Themes can be easily duplicated by right-clicking (or control and clicking) the theme preview icon in RapidWeaver and selecting 'Duplicate' from the popup menu. Give the duplicated theme a new name and work from that version. Duplicated themes will not be effected by future theme updates.
Saving Styles
Theme Contents
Code, settings, files and graphics required by a theme live inside a package called Flood.rwtheme or similar. If you are planning to modify the theme or add new elements to it, the 'theme contents' (package) is where you normally need to go. RapidWeaver themes are stored in ~/Library/Application Support/RapidWeaver/ where "~" is the name of your home directory. But you can also easily access the theme contents from within RapidWeaver. Just right-click (or control and click) the theme preview icon and select 'Reveal theme contents in Finder' from the pup window. The theme contents is revealed in a Finder window, from where you can access all the files which make-up the theme.
Upgrading From Previous Versions Of Flood
The latest version of Flood will install itself alongside any older versions of Flood you already have installed on your computer. RapidWeaver treats each version as a separate theme, so you can gradually migrate individual projects from one theme to another without destructive results. To apply a new theme to a project, select the theme under the theme pane in RapidWeaver. It is wise to mark all pages as changed and perform a complete re-upload of your website after changing themes. Some users also take advantage of a theme change to delete existing files on a web server using FTP software and starting from afresh again. Saved theme styles are non-transferable to new themes unfortunately. Renewed sets of saved theme styles can be created instead, taking advantage of new features in the theme.
Note: Existing purchasers of this theme can upgrade to the latest version for free at no extra charge. See the ThemeFlood website for details about obtaining your theme update.
Customer Support
You can find links to various resources on the ThemeFlood website. Official RapidWeaver support resources such as the user manual, help desk and forums are available under the help menu in RapidWeaver. For issues relating to this theme or other problems, please don't hesitate to get in contact via the ThemeFlood website. Unlike some other theme companies, customer support is free and is extended to cover themes which have been customised or modified. Facilities are available for you to upload customised themes and RapidWeaver sandwich (project) files. A custom theme and modification service is also available on request.
© Copyright 2011. All Rights Reserved. No part of this documentation may be copied, photocopied, reproduced, translated or otherwise duplicated on any medium without written consent. Use of ThemeFlood themes, plugins and documentation is subject to the EULA (End User License Agreement) which can be viewed on the ThemeFlood website. All trade names referenced herein are either trademarks or registered trademarks of their respective companies.