Theme Editor

Global Functions

The tabbed Theme Editor is separated into logical sections. You are able to Find and Replace most values throughout the Theme. If you do not specify a Replace value, the Find value is simply removed. When you Save the changes you have made, they are initially saved to a temporary Theme which can first be Previewed. Your changes may then be either Confirmed or Discarded.

Pages

The Pages tab allows you to specify the orientation of the page. Fixed width layouts, such as a width of "778px" (px meaning pixels), are popular with web designers as they tend to look identical regardless of the customer's screen resolution, and may be positioned to the left or the centre. Layouts of "100%" behave differently, expanding and contracting to fit the space allocated to the browser window. Although they are less predictable, they can be more economical with the space available.

The margin of any element of the site refers to the space surrounding the element. A margin of "5px" would mean a margin of 5 pixels surrounding the page. If a margin of "0px" is specified, a page height of "100%" may be selected, ensuring that the Footer is always visible at the bottom of the screen, regardless of how little content is available.

The background colour affects the colour surrounding the page itself, visible either through the margin or along the sides of fixed width layouts. All colours on the site are specified using hexadecimal (base 16) numbers, prefixed with a "#" symbol. Colours consist of 6 characters made up of numbers 0-16 and letters A-F. For ease of selection, an interactive palette is provided, although your favourite graphics package will facilitate a wider selection of colours.

The background image is another way of filling the space surrounding the page. An image selector is provided to navigate the selected Theme within your User directory. Files may be uploaded, browsed and selected. There are several different ways of displaying an image on the screen including tiling the image, repeating across and down or simply displaying it once in the position of your choice.

For developers comfortable with CSS and HTML, additional code may be added in the text fields provided.

Forms

The Forms tab allows you to specify how forms should be displayed on the site. Forms are important as they provide the interfaces through which customers may interact with the site. The width and orientation of form elements may be stipulated using the selection boxes.

The font names to be used are listed in order of preference, separated by commas. It is necessary to do this in case your primary font is not installed on the customer's computer. In such cases, the second choice will be used, and so on, until the list is exhausted. The size of the font should be specified in pixels, along with the colour in hexadecimal.

Forms tend to look more exciting when images are employed as buttons and icons. A number of images throughout the site may be inserted and modified using the image selection tool.

Main Column

The main Column is home to the primary content of the site. Each Column may be styled with its own unique background, border and padding. A border frames the Column, padding is similar to a margin but lies within the border. Finally, within the padding lies the page content. Both the border and padding may be given a value of "0px" if they are not required.

The border may be specified according to size (thickness), colour and style. Because the main Column may be surrounded by both left and right Columns, the border specified here applies to the entire content section (all 3 Columns excluding the Header and Footer).

The main font determines how the majority of text will be displayed in the Column. Text can be aligned to the left or the right, can be centred or right-hand justified. A small font size can be specified for displaying information such as the dates of blog posts. Heading, sub-heading and link fonts allow you to apply more variety to the Column. Each may be customised with respect to the font name, size, colour and decoration required.

Finally, dividers allow you to separate content within the Column with a Horizontal Rule (a horizontal line across the page). A width, height and colour may be specified, along with the desired style. The style selected here will also be used to frame some stock tables used throughout the site.

Left Column

The left Column provides a similar selection of controls to the main Column. An optional text field for extra content is provided, which may be useful for completing graphical Column designs.

Right Column

The right Column provides a similar selection of controls to the main Column. An optional text field for extra content is provided, which may be useful for completing graphical Column designs.

Main Blocks

Main Blocks, placed within the main Column, can be styled with a title bar background, a content background and a border. The border may be specified according to size (thickness), colour and style. It may also be applied to any, all or none of the sides of the Block.

The Block divider can be customised in terms of height and background, and is automatically placed between every Block in the Column.

Left Blocks

Left Blocks provide a similar selection of controls to main Blocks.

Right Blocks

Right Blocks provide a similar selection of controls to main Blocks.

Header

The Header tab allows the Header to be customised in terms of height, background colour, background image, border and font. Perhaps the simplest Header design is to simply set a background image with the site logo included. Any HTML you wish may be inserted into the text field provided.

Footer

The Footer tab allows the Footer to be customised in terms of height, background colour, background image, border and font. Any HTML you wish may be inserted into the text field provided. It is often advisable to include a "Go to Top" link somewhere in the Footer to improve navigation for the customer.

Account Bar

The Account Bar, as with each of the three bars, may be enabled or disabled. It is positioned by specifying the distance from the top of the Header to the top of the bar. The bar can be assigned a height value, and may be aligned to the left, right or centre with a further padding value for absolute positioning. As well as the link fonts, the main font is responsible for the style and colour of the "|" (pipe) characters which separate the links.

The Account Bar includes links such as Your Account and the ability to Sign Out.

Navigation Bar

The Navigation Bar provides a similar selection of controls to the Account Bar. If the bar is aligned to the left or right, the current date may be optionally displayed at the opposite side. Hovering the mouse over a link can force either the background colour, image or both to change, along with the font.

The Navigation Bar includes links you have created and ordered in the Navigation Bar section.

Search Bar

The Search Bar provides a similar selection of controls to the Account Bar.

The Search Bar provides a text input box, along with a category selection box, and a button styled according to your preferences.

Menus

The Menus tab allows you to style menus such as the Information menu, traditionally used in the left Column. Using various backgrounds, borders and fonts can produce a variety of different looks and styles. A character to indent sub-links on a multi-level menu can be specified as required.

Custom HTML

The Custom HTML tab enables you to edit, in more detail, specific pages and areas of your site. Copy and paste the default HTML templates to get started.