What is it?

Once you are happy with the [Colours] and [Images] that make up the design of your website, you can also configure the [Layout] and [Alignment] of your website.

The [Skin] will contain all of your settings. Simply make your changes, save the file and then share them with the World!

Current Skin

Displays the current [Skin] that your website is using. Any changes to the [Layout] and the [Alignment] will be saved under this [Skin] name.

Align layout elements

Frame alignment

Via the dropdown menu, select the [Positioning] of your site.

Please Note: this is relative to the [Width] of your site inside the browser i.e. if your site is set to a [Frame Width] of 100% - the alignment will not work as the site is displayed in Fullscreen. If you set the [Frame Width] to 500px, there is scope to set the [Frame alignment]. After you have selected your [Frame Alignment], click the [Submit] button to confirm your choices and [Save] your changes.

Header alignment

Via the dropdown menu, select the [Alignment] of your [Header] image. You can add an [Image] by uploading an [Image] via [CMS > Images > Upload]. By adding an image to your [Images Folder] you can then reference the image name into the [Header] of your site via

HTML > #Header#

the code you input will be in the format:

{yourimagename.jpg}

After you have selected your [Header Alignment], click the [Submit] button to confirm your choices and [Save] your changes. Click here for an example of how to [Upload Images and Use them on my site] Horizontal nav alignment Via the dropdown menu, select the [Alignment] of the [Horizontal Navigation] on your site. After you have selected your [Horizontal Navigation Alignment], click the [Submit] button to confirm your choices and [Save] your changes. Footer alignment Via the dropdown menu, select the [Alignment] of your [Footer] image. You can add an [Image] by uploading an [Image] via

CMS > Images > Upload

By adding an image to your [Images Folder] you can then reference the image name into the [Footer] of your site via

HTML > #Footer#

the code you input will be in the format:

{yourimagename.jpg}

After you have selected your [Footer Alignment], click the [Submit] button to confirm your choices and [Save] your changes. Layout Widths Frame Width Via the dropdown menu and input field you can specify a [width] for your entire website. Two examples of the different size methods, pixels (px) and percentage (%): (1) If you set the width to be 800 px – the width of your site will be 800 pixels wide. This is a recommended width so that it can be seen universally on different monitor sizes. (2) If you set the width to be 100% - the width of the website will match the width of the Internet Browser absolutely. If you resize your browser the website will follow suite. After you have selected your [Frame Width], click the [Submit] button to confirm your choices and [Save] your changes. Sub-content Width Via the dropdown menu and input field you can specify a [width] for the [Subcontent] on your website. Two examples of the different size methods, pixels (px) and percentage (%): (1) If you set the width to be 150 px – the width of your [Subcontent] will be 150 pixels wide. (2) If you set the width to be 25% - the width of the [Subcontent] will be 25% of the overall website. After you have selected your [Subcontent Width], click the [Submit] button to confirm your choices and [Save] your changes. Layout Heights Header height In the field provided you can input a [Height] attribute for your [Header]. This is set in pixels (px) and is a set size that will be displayed on your website. i.e. if you input 200px – the [Header] height will be displayed as 200 pixels high. After you have selected your [Header Height], click the [Submit] button to confirm your choices and [Save] your changes. Footer height In the field provided you can input a [Height] attribute for your [Footer]. This is set in pixels (px) and is a set size that will be displayed on your website. i.e. if you input 200px – the [Footer] height will be displayed as 200 pixels high. After you have selected your [Footer Height], click the [Submit] button to confirm your choices and [Save] your changes. Select a layout from the available templates below: We have provide 8 easy to use templates which can dramatically change the [layout] of your website. After you have selected your [Layout Template], click the [Submit] button to confirm your choices and [Save] your changes. The Layout guide is defined below: 1.layout-a.gif

RED The “RED” area indicates where the [Header] will be displayed BLUE The “BLUE” area indicates where the [Horizontal Navigation] will be displayed GREEN The “GREEN” area indicates where the [Vertical Navigation] + [Sub content] will be displayed YELLOW The “YELLOW” area indicates where the [Content] will be displayed