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/torrent/
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 Photogenic. 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
Plugin Compatibility
Torrent 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 Torrent 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 Torrent 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.
Torrent Code Snippets
A selection of free complimentary code snippets are available with Torrent, these can be downloaded from the Torrent product page on the ThemeFlood website. Code snippets can be installed in RapidWeaver and become available in the snippets window (search for 'torrent' to filter for them). CSS code snippets can be entered in the Custom CSS box under the page inspector in RapidWeaver. Or you can enter them in the custom.css file within the theme contents, for them to be applied on all pages (see details below). The following is a list of available code snippets and a definition of what they do.
Torrent - Capitalise block navigation links
Converts a normal mixed-case set of block navigation links to all-capitals uppercase. SEO is unaffected
Torrent - Capitalise horizontal navigation links
Converts a normal mixed-case set of horizontal navigation links to all-capitals uppercase. SEO is unaffected
Torrent - Capitalise site slogan
Converts a normal mixed-case site slogan to all-capitals uppercase. SEO is unaffected
Torrent - Capitalise site title
Converts a normal mixed-case site title to all-capitals uppercase. SEO is unaffected
Torrent - Header margin
Enables the margin above and below the title / slogan to be changed
Torrent - Navigation rounded corners
Applies CSS3 rounded corners on horizontal menu tabs
Torrent - Sidebar font size
Changes the text size of sidebar content, independently of the main theme text size settings
Torrent - Sidebar line height
Changes the line height size of sidebar content, independently of the main theme line height size settings
Torrent - Site slogan text size
Change the site slogan text size, independently of the main theme text size settings
Torrent - Site slogan letter spacing
Increase the letter spacing between site slogan lettering in increments of pixels
Torrent - Site title letter spacing
Increase the letter spacing between site title lettering in increments of pixels
Torrent - Site title text size
Change the site title text size, independently of the main theme text size settings
Theme Style Settings
Theme Colour Settings
Torrent 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.
Body background settings
Several example body background patterns and textures are built into the Torrent theme. Any one of these can be selected for use. There is also scope to add up to 20 of your own custom body background images for display - see the custom background configuration details below for more information.
Background Gradient Settings
These optional settings allow you to overlay the normal body background with a pattern or gradient. This can be a useful feature if you want to introduce a gradient over the top of existing images or use a pattern to tone-down the vividness of a background image. Body gradient options work fine on all web browsers as far back as IE7.
Upper Banner Background
Several options are presented for you to apply a background image or pattern to the upper banner container. This can be used to give a page design more impact. In total, there are about 20 example banner background images bundled with the theme, and you are welcome to reuse any of these in your design. A total of 25 blank placeholder images are also provided, which can be swapped out for your own custom backgrounds. There are more details about using custom background images on the configuration section below.
Upper Banner Height
Use these setting to control the overall height of the banner container. Some people prefer a very narrow banner, whereas others prefer a much deeper banner container. Custom CSS could also be used if you wanted a bespoke banner height. The banner is always the same width as your theme width, minus padding and margins.
Upper Banner Frame
The banner frame options enable you to apply extra embellishments to the banner container. These are purely decretive and do not serve any other purpose. A selection of frames are included, such as curvatures, circles, squares, zig-zags and tabs. By default, these frames are white to match the content container background. However you could open any of these images (they are stored in the editable_images folder in the theme contents) and either replace them or edit them with your own styles, to match an existing colour scheme.
Upper Banner Content Box
The upper banner container in this theme is a true content banner, in that it can also accept other types of content, including text. Using Extra Content Container 6, you can place content within an attractive container, which uses a semi-transparent background. Several width, positioning and colour options are provided for this content container. The semi-transparent PNG tile (used to achieve the dark transparency effect) is located in the editable_images folder, within the theme contents - this image can be edited or swapped over for your own.
Lower Banner Background
Users of the Torrent theme have the option of displaying a second banner background, this time at the bottom of the main content container. Several options are presented for you to apply a background image or pattern to the lower banner container. This can be used to give a page design more impact. In total, there are about 20 example banner background images bundled with the theme, and you are welcome to reuse any of these in your design. A total of 25 blank placeholder images are also provided, which can be swapped out for your own custom backgrounds. There are more details about using custom background images on the configuration section below.
Lower Banner Height
Use these setting to control the overall height of the banner container. Some people prefer a very narrow banner, whereas others prefer a much deeper banner container. Custom CSS could also be used if you wanted a bespoke banner height. The banner is always the same width as your theme width, minus padding and margins.
Lower Banner Frame
The banner frame options enable you to apply extra embellishments to the banner container. These are purely decretive and do not serve any other purpose. A selection of frames are included, such as curvatures, circles, squares, zig-zags and tabs. By default, these frames are white to match the content container background. However you could open any of these images (they are stored in the editable_images folder in the theme contents) and either replace them or edit them with your own styles, to match an existing colour scheme.
Lower Banner Content Box
The lower banner container in this theme is a true content banner, in that it can also accept other types of content, including text. Using Extra Content Container 6, you can place content within an attractive container, which uses a semi-transparent background. Several width, positioning and colour options are provided for this content container. The semi-transparent PNG tile (used to achieve the dark transparency effect) is located in the editable_images folder, within the theme contents - this image can be edited or swapped over for your own.
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).
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.
Line Height and Text 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. 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. Torrent 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 settings 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.
Content Padding
These settings control the amount of space between the edge of content and the edge of the main content container. Increasing content padding in turn increases the amount of space surrounding content. The content padding settings can be very useful in helping to a achieve a clean and minimalist page design. It never hurts to increase content padding, and the concept of 'whitespace' is something often talked about by web design professionals.
Search Bar Settings
Torrent includes an option to display a search bar at the top of the page, to the right of parent navigation links. when one of these search bar width settings is switched on, a magnifying glass icon is displayed. Clicking the magnifying glass icon displays a search bar and search button. Search bars are available in various widths and are intended to be used in conjunction with the RapidSearch plugin (see configuration details below). If you want to change the 'search' button text, this can be done by opening the theme contents and opening the index.html file in your preferred code editor. Scroll down to the point where the search code is presented, and change the button name accordingly.
Navigation tabs
Parent navigation links (top level links) are presented in the form of a horizontal tabs at the top. The Torrent theme includes several width settings for these tabs (fixed and variable width options) together with some essential colour settings.
Navigation Text Size Settings
This list of text size settings allows you to change the text size of links in the tabs and block navigation. The settings work semi-independently of the standard theme text size controls. However, the percentage size is based on the overall theme font size. So if your example you were to set the standard theme font size to 90% and set the navigation text size to 110%, a web browser would calculate that proportionally as 110% of 90% (the latter being treated as the master font size). Using percentage units of measurement for font sizes has big benefits relating to browser compatibility and site accessibility.
Navigation Block Settings
Sub page links are displayed in a block, within the sidebar container at the top. Using these settings, you can customise the width and position of these navigation links. The torrent theme applies a slight text-indent animation effect on these links as a user hovers over them. Text size or colours can be customised to make the links more prominent.
Sidebar Settings
The sidebar in Torrent is located towards the top 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. Plugin content refers to content generated by plugins, such as blog archive links, RSS feeds or a RapidFAQ table of content.
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 Links (Miscellaneous Settings)
Normally breadcrumb links will be placed in the bottom left of a footer container within Photogenic. But on smaller websites, the use of breadcrumb links may seem rather pointless. Instead, this theme option can be used to replace the standard breadcrumb links with a list of your parent pages. In some websites this may be a more practical solution and give end users another method of navigation – particularly useful after they have scrolled down to the bottom of a page.
Preview Extra Content Containers (Miscellaneous Settings)
Photogenic 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
Extra Content
Photogenic includes support for EC (Extra Content). The positions and placement of Extra Content containers 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. Text colour settings for all ten EC containers can be found under the theme colour settings. More information on using extra content (including free snippets and stacks) can be obtained from this website: http://extracontent.info/
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.
Adding Custom Background Images Using Finder
Background 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 Photogenic 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 content1.jpg, content2.jpg, content3.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 Background 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 bg1.jpg, bg2.jpg, bg3.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 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:
body {
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.
Theming Basics
Duplicating Themes
If you are planning on making any modifications to the Photogenic 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 Photogenic.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.
Making Theme Customisations Using CSS
All elements in the Photogenic 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. Photogenic 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.
Upgrading From Previous Versions Of Photogenic
The latest version of Photogenic will install itself alongside any older versions of Photogenic 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 chooser 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.
Support
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.