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/photogenic/
Important Information - RapidWeaver 5 Compatibility
This theme is fully compatible with RapidWeaver 5. New aspects like last published dates, consolidation of files and CSS compression are very well supported by this theme. However, RapidWeaver 5 doesn't have support for HTML5 syntax yet, this will be added shortly in a .0 update in early 2011. For the time being, you will need to make sure your page output is set to 'Default' under the page inspector (which it should be already). If tidied or optimised is used, this may result in layout breakage, due to tags being stripped out.
If validating the HTML code of your website using the W3C validator, make sure you select HTML5 - Experimental as the DOCTYPE and UTF-8 as the encoding.
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
IE6 is almost 10 years old now and has never properly supported the full CSS specification. This makes development of modern websites very difficult, because a lot of the technology (even basic stuff like 100% high backgrounds and cropping of overflowing content) are near impossible to achieve in IE6. Fortunately usage of IE6 has falling sharply over the past 12 months, but IE6 compatibility is still an essential criteria in many web design projects, and people are still looking for RapidWeaver themes which can boast IE6 support.
Using a conditional stylesheet, this theme gives IE6 a separate set of instructions to render pages. In this instance, all the complicated backgrounds and fade effects are turned off. The menu becomes a standard block-navigation layout in the sidebar. Although the page design looks very 'watered-down' in IE6, the great advantage with this method is that the content on the page is still fully readable and pages can still be accessed in the normal way. HTML5 code is still supported, and in newer versions of Internet Explorer like IE7, IE8 and IE9, the theme looks almost identical to Safari and Firefox rendering. No IE6 PNG fix is included with this theme to keep page sizes and bandwidth to an absolute minimum, but it is possible to add a PNG fix to the theme if one is essentially required – see the ThemeFlood website for more details and to obtain the free download.
Plugin Compatibility
Photogenic 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 Photogenic 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 Photogenic 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.
How Photogenic Compares With Other Themes
Photogenic is a vivid and distinct RapidWeaver theme which would be ideally suited for showcases and online portfolios. This theme started out life as a free theme called 'Natural World' which became very popular in 2010. It quickly became apparent that users of Natural World craved more theme settings, colour pickers, better background image support and wanted a fully supported theme with a broad set of customisable options. So development began on Photogenic to deliver a new theme which would hopefully meet and exceed expectations.
The new Photogenic theme has a simple block layout, which is both clean and formal in style. Navigation between pages is achieved using the choice of a drop-down or mega menu layout. Alternatively the theme can be setup as a single-page website with a horizontal scroller. Undoubtedly the key feature of this theme is the brilliant support for stretched body background images – unlike other themes, Photogenic has unlimited support for background images. So you can easily have different images on different pages. Container backgrounds can have both their opacity and colour changed under the theme settings. Likewise a broad range of theme style and colour settings are crammed into this theme. Anyone serious about creating eye-catching websites in RapidWeaver really needs to have this theme in their collection!
Photogenic Code Snippets
A selection of free complimentary code snippets are available with Photogenic, these can be downloaded from the Photogenic product page on the ThemeFlood website. Code snippets can be installed in RapidWeaver and become available in the snippets window (search for 'photogenic' 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.
Photogenic - Align theme left
Aligns all the major content containers left in the theme, instead of having them centred which is default.
Photogenic - Align theme right
Aligns all the major content containers right in the theme, instead of having them centred which is default.
Photogenic - Hide top navigation bar
Hide the navigation bar at the top. This is useful if you are creating a single page website or portfolio and have no need for a menu bar or search bar at the top.
Photogenic - Horizontal slider (HTML code)
This is the HTML code you would use to build a horizontal slider in the theme (see details below). Because this is HTML code, it should be pasted into a HTML Code or Styled Text page style.
Photogenic - Make drop down menu's semi-transparent
This code can be used to make the drop-down menu's on a standard drop-down menu or mega-menu semi-transparent. By default, drop-downs in this theme have a solid colour fill, to aid accessibility and text clarity. Opacity is inherited in a navigation menu, so each level of navigation links will have progressively less opacity. Therefore this code is best reserved for when you only have one or two levels of navigation to display.
Photogenic - Margin above footer bar
Inserts a 15px margin between the footer bar and main content area. The margin can be adjusted to any size you prefer.
Photogenic - Margin below header bar
Inserts a 15px margin between the header bar and main content area. The margin can be adjusted to any size you prefer.
Photogenic - Site slogan font size and line height
An example of the custom CSS you would use to adjust the site slogan font size and line height.
Photogenic - Site slogan letter spacing
An example of the custom CSS you would use to adjust the site slogan letter spacing.
Photogenic - Site title font size and line height
An example of the custom CSS you would use to adjust the site title font size and line height.
Photogenic - Site title letter spacing
An example of the custom CSS you would use to adjust the site title letter spacing.
Theme Style Settings
Theme Colour Settings
Photogenic 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.
Background Placement Settings
Several CSS background positioning options are provided in Photogenic, so you can adjust the placement of images you add to EC1 to form the body background. By default, images are stretched both horizontally and vertically to fill the body background. Settings exist to have the image stretched only horizontally or vertically. You can also preserve the image in its original size and display it in either one of the four corners of the page. When using any of the stretched image settings, it is normal to expect some distortion – you will probably find some images work better than others when used as background images. See details below for information on how to embed custom background images.
Background Overlay
These optional settings enable you to display a semi-transparent filter over your background image. This can be very useful in reducing the contrast of images and making your page content more readable. Some of the overlay patterns are very decorative and can be used to enhance your body background image. Overlays are achieved using simple PNG images tiled across an empty container which is floated just above your background image.
Content Margin Settings
These margin settings control the gap between the top of the screen and the content container. If you are looking to put more emphasis on a background image by having it visible more, you can increase the content margin. If you wanted to condense the length of pages, you could decrease the content margin. The content margin also applies itself to the gap below the footer container. Horizontal spacing on either side of the content container is controlled by the theme width settings – ultimately this margin is governed by your theme width and the browser window size.
Content Padding Settings
Content padding settings are different to margin settings, and instead control the internal padding between text and the edge of a container. Several content padding settings are provided, ranging from 0px (borderless) up to 50px (extra wide).
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.
Nav Bar Background Settings
These settings are provided so you can customise the colour and opacity (transparency) of the navigation bar background. The 'Background Color' option at the top of the list enables you to change the background colour shade. Various opacity settings are then provided underneath which can be used to change the transparency. Opacity is achieved using CSS and some propriety browser filters, which give excellent support across all major web browsers. Alternatively you can also use one of up to five custom JPG or PNG images as a custom image background. These images are located in images > editable_images within the theme contents, and can be swapped over for your own using Finder or RapidWeaver MultiTool, see details below. Care should be taken when using opacity settings, to ensure content such as text remains well contrasted and easily readable against a body background image.
Header Background Settings
These settings are provided so you can customise the colour and opacity (transparency) of the header bar background. The 'Background Color' option at the top of the list enables you to change the background colour shade. Various opacity settings are then provided underneath which can be used to change the transparency. Opacity is achieved using CSS and some propriety browser filters, which give excellent support across all major web browsers. Alternatively you can also use one of up to five custom JPG or PNG images as a custom image background. These images are located in images > editable_images within the theme contents, and can be swapped over for your own using Finder or RapidWeaver MultiTool, see details below. Care should be taken when using opacity settings, to ensure content such as text remains well contrasted and easily readable against a body background image.
Content Background Settings
These settings are provided so you can customise the colour and opacity (transparency) of the content container background. The 'Background Color' option at the top of the list enables you to change the background colour shade. Various opacity settings are then provided underneath which can be used to change the transparency. Opacity is achieved using CSS and some propriety browser filters, which give excellent support across all major web browsers. Alternatively you can also use one of up to five custom JPG or PNG images as a custom image background. These images are located in images > editable_images within the theme contents, and can be swapped over for your own using Finder or RapidWeaver MultiTool, see details below. Care should be taken when using opacity settings, to ensure content such as text remains well contrasted and easily readable against a body background image.
Sidebar Background Settings
These settings are provided so you can customise the colour and opacity (transparency) of the sidebar container background. The 'Background Color' option at the top of the list enables you to change the background colour shade. Various opacity settings are then provided underneath which can be used to change the transparency. Opacity is achieved using CSS and some propriety browser filters, which give excellent support across all major web browsers. Alternatively you can also use one of up to five custom JPG or PNG images as a custom image background. These images are located in images > editable_images within the theme contents, and can be swapped over for your own using Finder or RapidWeaver MultiTool, see details below. Care should be taken when using opacity settings, to ensure content such as text remains well contrasted and easily readable against a body background image.
Footer Background Settings
These settings are provided so you can customise the colour and opacity (transparency) of the footer bar background. The 'Background Color' option at the top of the list enables you to change the background colour shade. Various opacity settings are then provided underneath which can be used to change the transparency. Opacity is achieved using CSS and some propriety browser filters, which give excellent support across all major web browsers. Alternatively you can also use one of up to five custom JPG or PNG images as a custom image background. These images are located in images > editable_images within the theme contents, and can be swapped over for your own using Finder or RapidWeaver MultiTool, see details below. Care should be taken when using opacity settings, to ensure content such as text remains well contrasted and easily readable against a body background image.
Content Columns
These settings allow you to split a simple styled text, HTML or blog page into multiple columns using CSS. You can choose between two, three or four columns with a 25px or 50px gap between each column. Please note that content columns are only supported by web browsers with support for CSS3 code, such as Safari, Firefox, Google Chrome and Opera. CSS columns are not supported in older web browsers like Internet Explorer, where the columns will degrade safely back to a single block. If you need guaranteed support for columns in all web browsers, consider using the third-party Stacks or Blocks plugins to layout your page.
Rounded Corners
Photogenic gives you the option to apply rounded corners to the top left and top right of the header container, and the bottom left and bottom right of the footer container combined. The rounded corners in this theme are achieved using simple CSS3 code and the 'border-radius' property. Rounded corners are only supported in web browsers which support CSS3 code. So the rounded corners will work fine in Safari, Firefox, Chrome, Firefox and IE9. Rounded corners will not work in IE6, IE7, IE8, and in these browsers the corners degrade back to square corners. It's recommended you don't use the box shadow option in conjunction with rounded corners – cosmetically it looks odd with gaps in the corner radius.
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 designs 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. Photogenic supports multiple logo placement options including fixed screen badges, header 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.
Album Settings
Photogenic is supplied with a set of album settings which enable you to customise the appearance of iPhoto and Quicktime Album page styles supplied with RapidWeaver. Some of the settings may work across other third-party plugins like RapidAlbum as well. Thumbnail colour settings control the colours found in thumbnail (grid) pages. Photo and video page colour setting enable customisation of singular photos or videos - the ones which open when a user clicks a thumbnail. In addition to the colour settings, there are two groups of style settings to control the layout of photo pages. Photo Data Vertical will arrange the photo page in a vertical format with content containers stacked vertically. The float left options will put text and links on one side or a page, and the main image on the other side.
Sidebar Settings
The sidebar in Photogenic can be positioned either left or right of the content container. In addition, the width of the sidebar can be changed, to suit the type or quantity of sidebar content to be displayed. 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.
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. A custom theme width option is also included -- this can be edited in the css/width/ folder within the theme contents to include your own width setting.
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.
Fixed Navigation Bar (Miscellaneous Settings)
Use this setting to apply fixed positioning to navigation bar. When the page is scrolled up or down, the navigation bar will remain in a fixed position and will not move. The main content container will scroll up underneath the navigation bar.
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 Background (Miscellaneous Settings
Ticking this option will fade in the background container. 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 background container fade in faster or slower than it currently does.
Fade In Navigation Bar (Miscellaneous Settings
Ticking this option will fade in the navigation container. 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 navigation bar container fade in faster or slower than it currently does.
Fade In Main Container (Miscellaneous Settings
Ticking this option will fade in the main content container. 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 main container container fade in faster or slower than it currently does.
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
Background Images
Body background images form the main focal point in the Photogenic theme. However, the setup of background images in this theme differs somewhat to other themes (which tend to use tick options under the Page Inspector to choose which background image is loaded). In Photogenic, the Extra Content method is used to embed background images. This gives you precise control over image size, image source and the ability to have different images on different pages. Extra Content also enables more advanced elements to be applied as a body background, such as slideshows.
In essence, applying body background images is easy. Copy the code below and paste it into your Sidebar container (without formatting) in RapidWeaver:
<div id="myExtraContent1"><img src="%pathto(images/editable_images/2.jpg)%" alt="background" /></div>
The image number (in this instance 2) can be changed for any number between 1 and 25 if you are experimenting with the demo images supplied with this theme. If you want to use your own images, these can be dragged and dropped directly into this standard Extra Content code, replacing the image tag. Likewise you can also source background images via a URL – such as images already uploaded or those stored in a warehouse online.
The target file size of background images should be 100KB - 72 DPI. Image which measure approximately 1000px square tend to give the best results across a wide range of web browsers. It is normal to expect some distortion of images if they are stretched to fill a window. Typically some images like generic landscapes, places or patterns will work better compared with images of people or animals etc.
There are also two Stacks available for this theme which enable you to use the Stacks plugin by YourHead Software (not included) to easily embed background images. Use stack 1 to drag and drop an image straight in. Use stack 2 to source an image via a URL. Please note that if you use stack 1, Stacks will automatically convert the image to PNG which may result in very large image sizes, if dealing with photographic quality images. You could also embed images straight in the theme (like the existing 25) and call them via the above code.
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/
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 will only work in the Photogenic theme, and will not often 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 missed. In the Page Title field or sidebar panel within RapidWeaver (where your pages are listed, pictured right), 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 paragraph 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 HTML 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, to signify that the text is not a link. This method can be used for both regular drop-down menus and mega-menu layouts. Normally the breadcrumb links and footer navigation links at the bottom of a page should be turned off if you are disabling page links.
Creating A Single Page Horizontal Scrolling Website
As well as working like a conventional RapidWeaver theme, Photogenic can also be custom edited and setup to run as a single page horizontal-scrolling website. This type of layout is ideal for creative experts looking to showcase a variety of text, images or video. Start by opening the navigation settings and tick the 'Smooth Horizontal Slider' option. Copy and paste this code (without formatting) into the sidebar box in the Page Inspector:
<div id="myExtraContent2">
<div id="menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#box1">Box 1</a></li>
<li><a href="#box2">Box 2</a></li>
<li><a href="#box3">Box 3</a></li>
<li><a href="#box4">Box 4</a></li>
<li><a href="#box5">Box 5</a></li>
<li><a href="#box6">Box 6</a></li>
<li><a href="#box7">Box 7</a></li>
<li><a href="#box8">Box 8</a></li>
</ul>
</div>
</div>
If pasting this code into a styled text sidebar, be sure to highlight the code and select 'Ignore Formatting' from the format menu in RapidWeaver (to ignore the line breaks and whitespace). What this code does is to replace your existing page navigation links with a set of anchor links. These anchor links will eventually link to the 'boxes' within the page, triggering the smooth scrolling effect when clicked. You can rename the anchor titles to anything you like, but for the sake of keeping things simple, it is best to leave the HREF values as they are to make linking easier. If as an example, you only plan to have 5 bpxes in your page, you should remove the surplus links. Likewise if you need more than 8 boxes, you can add more and number them sequentially in the code, following on from the existing links. The next stage is to define your boxes in the page, using a block of code like this:
<div id="box1" class="box" style="width:925px; float:left; padding-right:25px; height:550px; overflow:auto;">
<h2><a name="box1">About</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam placerat hendrerit odio, sodales laoreet velit lacinia at. Suspendisse mollis neque nec urna sagittis mollis. Praesent malesuada dui nec urna consequat nec consectetur urna pretium. Maecenas et lorem id neque sagittis semper. Cras venenatis erat sem. Nunc vitae neque ut urna porttitor cursus. Ut laoreet libero sed nisl elementum placerat. Vivamus ac nibh neque, a tempor dolor. Mauris dictum fringilla libero et fermentum. Fusce non consectetur velit. Vivamus nisi purus, scelerisque id varius sed, malesuada non quam. Morbi vel mauris in neque tempus porta. Aenean pulvinar, elit quis ultricies porta, ipsum dolor sollicitudin nibh, vitae sodales ligula nulla quis eros. Curabitur sed est vitae nisi lobortis facilisis sit amet vel mauris. Proin facilisis massa commodo quam euismod quis sollicitudin libero venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec nec lacus sit amet ligula mollis hendrerit vehicula non eros. Vivamus semper placerat lacus. Vivamus malesuada aliquet est ut consequat.
</div>
This code above would represent a single box (box 1). Note carefully how the box has a unique ID (box1) and the box title (First Box) also acts as the anchor name (box1). Now if you were to add a second box, you would replace '1' with '2' and so on. This would give you a set of boxes, each one with a unique ID and anchor, which corresponds to the links in the sidebar code. Do not remove the class selector 'box' because this will break the animated smooth scrolling effect. If you are using an HTML code page, this 'blocks' of code can be pasted in more or less as they are. If you are using a styled text page, you should highlight all the HTML tags (and gaps between the code blocks) and select 'Ignore Formatting' from the format menu in RapidWeaver (to ignore the line breaks and whitespace). You can mix-and-match page styles using a plugin such as PlusKit. However it is important to remember that the @import function in PlusKit only works on Styled Text page types.
The code required to setup a smooth scrolling website is supplied with Photogenic in the form of two code snippets. Snippet 1 is the code you enter in the sidebar. Snippet 2 is the code which goes into the page content container. Again, you can rename the box titles and replace the dummy 'Lorem ipsum dolor' text with your own content. There is a little bit of inline CSS in the box code, this can be adjusted to customise individual box widths (to accommodate differing amounts of content). Padding can also be changed to increase or decrease the space between boxes. As ever, a wide theme width setting and vivid background image really make this effect come alive! Photogenic contains many theme width settings up to 10,000px wide.
Mega Menu's
Mega menu's (also sometimes called mega drop-downs) work like a standard drop-down menu in a website. But instead of displaying a single column of links, a mega menu can display multiple columns of links, split between sub headings. Usability experts love them, because end-users don't have to drill down through a deep set of links and can instead see a big panel with lots of links listed for selection. ThemeFlood is the first RapidWeaver theme company to research, develop, test and deploy a fully functioning mega menu in off-the-shelf RapidWeaver themes. It is an incredibly exciting and significant development, one which other developers are sure to try reproducing over the coming months and years!
The Photogenic theme will do all the hard work for you. Traditionally mega menu's required incredibly complex and fragile code. However the Photogenic theme contains its own drop-down menu 'engine' called System7. This script automatically takes your page links from RapidWeaver and converts them into a fully functional mega menu. The mega menu generated is very robust, and works across all major web browsers. The shape of the mega menu depends on the structure of pages in your website.
To build a mega menu, you need at least 3 levels of page links in your project. Top level (1st level) links display as parent links in the navigation bar. Second-level links act as sub-headings within the drop-down panels. Third-level links are displayed as standard page links in the drop-down menu. Any other links from the 4th level or lower are ignored, but search engines can still access them. When you have got a project with at least 3 levels of navigation, open the navigation theme settings and choose one of the provided mega-menu options.
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:
#content-bg {
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.
Customising Fade-In Animations
These optional animations on elements like the body background, navigation bar and content container are generated using the jQuery .fadeIn() attribute. The code which controls the animation effects is conveniently located in the index.html file within the theme contents, so it is possible to customise the fade-in speed without digging too deeply into the theme code. Open the theme contents and then open the index.html file in your preferred code editor. In the head section of the page at the top, you will see some code like this:
<script type="text/javascript">
var $fi = jQuery.noConflict();
$fi(document).ready(function(){
$fi('#myExtraContent1').delay(0).fadeIn(2000);
$fi('#navBar, #nav-bg').delay(0).fadeIn(2000);
$fi('#main').delay(0).fadeIn(2000);
});
</script>
By default the animation speed is set to 2000 milliseconds (2 seconds). This effect duration is specified individually for the body background (#myExtraContent1), the navigation bar (#navBar, #nav-bg) and the main content container (#main). The effect duration can either be increased or decreased here. It is advisable not to edit other code here, unless you are familiar with jQuery Javascript and have the facilities to test your modifications. Changing the effect duration is the safest and easiest edit to make.
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 2010. 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.