Theme style & colour settings


Important note: This page discusses many of the theme style and colour settings offered in premium themes sold from the ThemeFlood website. Every theme has a unique set of theme style and colour settings, so the customisable options available to you may differ from the ones discussed and illustrated below. Most theme settings should be self-explanatory, but if you have questions about specific settings or customisable options in your theme, please get in contact.



Media theme colour settings

Colours

Most themes include 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 'Colours' 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

These settings enable you to change the body background of the theme. You can choose between a solid colour fill, one of the example background images supplied with the theme, or use a custom image you load into the theme. There are more details in the theme configuration section, which explain how to load custom images into the theme.


Body Margin

The amount of space between the top of a page and the start of the central content container is governed by the body margin settings. Some people prefer little or no margin, to create a more condensed page layout, whereas others prefer a wider margin to achieve a sparser page layout with more background visible.


Banner / Header Background

The banner container is typically located towards the top of the page, although some themes have a banner container at both the top and bottom. This is ideal if you want to display static images or create a slideshow using a plugin like WeaverPix or SymNivo. If the banner container is turned on, you can choose between using a solid colour fill or one of the example background images supplied with the theme. Likewise there are also spare placeholders for your to load your own background images into. There are more details in the configuration section, which explain how to add background images or a slideshow.


Banner / Header Height

The banner container can have its height changed, using these provided theme style settings. Some people prefer a narrow banner height, whereas others prefer a much taller banner it incorporate larger images or other content. If you do not want to display a banner container in your page, select the 'None' option from the list.


Banner Content Box

Alongside the display of static images or slideshows, the banner container can often also incorporate a text box. This can make convenient use of the banner container space. Some themes include several width and positioning settings for the content box. To load content into the content box, type this code into the sidebar box in the RapidWeaver Page Inspector:

<div id="myExtraContent3">Hello World!</div>

Replace the words "Hello World" with the actual content you wish to use. Likewise you can also use the Extra Content stack in stacks pages, and set the Extra Content number to match that of the Extra Content container in the banner container.


Banner Content Background

These settings allow you to change the background of the banner content container. It is important that any text you have entered in this area retains contrast against the banner background, hence why several opacity controls may be supplied with the theme. The colour of the content container background fill may also be changed here in the theme settings.


Heading / Content Font

These theme options allow you to change the font face of headings and content text. Heading fonts are applied to all titles, including the title and slogan, blog titles, album titles and HTML headings. Content font is applied to content areas like the content container and sidebar. A range of web-safe and semi web-safe font face options are provided for selection. If a person viewing the website does not have a particular font installed on their computer, the web browser will default back to a close alternative.

An option is provided to import free embedded fonts from the GFD (Google Font Directory). To use this option, open the theme contents, open the css folder, open either the headings or the content font folders. Then open the import.css style sheet in your preferred code editor. Follow the comments contained within, exchanging the shorthand and longhand names with the preferred font face you wish to embed. Please note that to use embedded fonts in some version of RapidWeaver, CSS consolidation should be turned off under RapidWeaver preferences. You may find that some embedded fonts are only visible after the page is previewed in a normal web browser.


Text Size

The text size settings allow you to change the size of text. We specify text sizes in percentage units of measurement, which allows text to be scaled with greater fluidity when viewed through web browsers or on devices like the iPhone or iPad. It is possible to customise the font size or individual elements using custom CSS code. For example, if you wnated to change the text size of the site title, you could use some CSS code like this:

#siteTitle h1 a { font-size: 300%; }


Line Height

Line height controls the spacing between individual lines of text. Some users prefer narrower line heights, to keep text more condensed, whereas other prefer taller line heights for ease of reading. Much the same as text size settings, it is also possible to use custom CSS code, to target the line height of specific elements. For example, custom CSS code like this could be used to change the line height of content text:

#contentContainer #content { line-height: 2.00em; }


Logo

Several logo position settings are often provided in the theme. Logo images can be dropped into the logo well within the RapidWeaver site setup window. All logo images act as a link back to the designated homepage. Logo images should be scaled to the correct size and presented in either JPG or PNG format. Other formats like PSD are unlikely to work in web browsers outside of Safari.


Albums

Some themes contain an extended selection of album settings, which are applicable to page types like the Photo Album and Video Album styles supplied with RapidWeaver. Additionally some of these styles may work with other third-party plugins like RapidAlbum. Among several colour settings, album settings enable you to control the layout of fullsize images, and decide on the placement of EXIF data.


Search Bar

Options may exist to display a search bar within the theme. This enables visitors to your website to search for pages. The search bar is designed to be used with the RapidSearch plug-in (supplied and sold separately by Josh Lockhart). You should add a single RapidSearch page to your website, change its folder name to / and change the name to search.html. Any search keywords a user types into your search box will get past over to this page. If you want to change the location of the search page or change the search code, you should open the theme contents, then open the index.html file in your preferred code editor. Customise the provided code to your requirements, then save and close the file when done. Colour pickers can be used to change the search function colour scheme.


Content Columns Setting

In supported themes, 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 albums, contact forms, Blocks or Stacks. 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.


Sidebar

Sidebar settings enable you to change the width and position of the sidebar container. Some people prefer a narrow sidebar container, whereas others prefer a much wider sidebar to form a second content column. Ultimately the width of the sidebar should be partly governed by the type of content you wish to display. Care should be taken that any embedded images or video content fits within the sidebar.


Navigation

Some themes permit you to change the navigation layout and the colours of navigation links. Colour settings typically consist of static, hovered, active and current-page colours, to represent the status of a link. We don’t tend to use the :visited CSS pseudo selector on navigation menu’s, because often visitors to a website may navigate backwards and forwards through the site structure. Depending on the theme being used, colour settings may also exist for link backgrounds, dividers and borders.


Width

Width settings can be used to change the width of the central content container within the theme. A selection of fixed width and variable width settings are provided. Fixed widths are provided in pixel units of measurement. Typically a theme would include fixed widths specified in 50 or 100 pixel increments, together with a few grid-system widths like 780px, 860px and 960px which expert web designs commonly use. The maximum fixed width setting available is 1000px wide, which is the maximum site width supported at 1024 X 768 resolution, before horizontal scroll bars get shown. Variable theme widths are dependant on the width of the screen a website is being viewed through. Typically variable theme widths are achieved using flexible percentage units of measurement, or by specifying horizontal margins to cushion the central content container. Often the theme width you choose would be governed by the type of content you are displaying. Pages consisting of video, columns or larger images would beenfit from a wider theme width setting. Web pages comprising of text would benefit from narrower widths, to make text more readable. Always try to use the same width setting through a project - this keeps things looking consistent and stops elements of a page (like the navigation) from jumping around too much.


Miscellaneous Settings

Most premium themes sold through ThemeFlood include a set of individual tick-options, which normally fall under the miscellaneous group. Such options may include padding, margins, borders, ExtraContent previews, fade-in effects and link options. Ticking an option turns on that particular setting. The miscellaneous settings are multiple choice, so you can tick at least one option if required. Please note that some of the miscellaneous theme settings like the option to preview ExtraContent containers are intended for offline use, and therefore should be switched off (un-ticked) again before exporting or publishing your completed website.


< Previous Chapter - An Introduction To RapidWeaver Themes
Next Chapter - Theme Configuration >