• HELP!
• 3. Skin
• What is a Skin?
• Manage Skins
• Edit Skins
• Fonts
• Colours
• Images
• Layout
• Padding
• Engine Code
• Image Transparency

What is it?

As well as assigning colours to your website, you can also add [Images] to the components of your website. Via this section you can select and define the [Images] and how they are to be displayed.

The [Skin] feature will contain all of your site images and their positioning!

Current Skin

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

Click here to upload new images

Click this link to [Add] or [Upload] new images to your website. The [Images] need to be added to your [Skin] folder before you can utilize them on your website.

Layout background images

Image

The [Image] section displays the current image that will be used on your website [Skin]

Body

Via the dropdown menu, select which [Image] will be used for the Background of your website. Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your Background Image, click the [Submit] button to confirm your choices and [Save] your changes.

Lock Body

Locking the background image will affect how the Background Image will be displayed when scrolling. Choose either [Yes] (which will lock the background image when scrolling) or [No] (and the background image will move when scrolling). After you have selected your Locking method, click the [Submit] button to confirm your choices and [Save] your changes.

Frame

Via the dropdown menu, select which [Image] will be used for the [Frame] of your website. Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Frame Image], click the [Submit] button to confirm your choices and [Save] your changes.

For more information on the [Frame] attribute, click here to view the [Padding] section of the CMS.

Canvas

Via the dropdown menu, select which [Image] will be used on the [Canvas] of your website. Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. Please note that this will be displayed only if the [Content] field is left [Blank].

Alternatively using Alpha channels on your images will display all (both the [Canvas Image] and the [Content Image]). After you have selected your [Canvas Image], click the [Submit] button to confirm your choices and [Save] your changes.

Click here for an example of effective [Images that use Alpha Channels]

Header

Via the dropdown menu, select an [Image] that will be used in the [Header] of your website. Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Header Image], click the [Submit] button to confirm your choices and [Save] your changes.

Content

Via the dropdown menu, select an [Image] that will be used in the [Content] of your website. Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Content Image], click the [Submit] button to confirm your choices and [Save] your changes.

Subcontent

Via the dropdown menu, select an [Image] that will be used in the [Subcontent] of your website. The [Subcontent] is the area directly underneath the [Vertical Navigation]. Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Subcontent Image], click the [Submit] button to confirm your choices and [Save] your changes.

Footer

Via the dropdown menu, select an [Image] that will be used in the [Footer] of your website. Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Footer Image], click the [Submit] button to confirm your choices and [Save] your changes.

For more [Footer] options please click here to view the [Skin - Layout] section of the CMS.

Horizontal nav images

Navigation background

Via the dropdown menu, select an [Image] that will be used in the [Horizontal Navigation Background] of your website. This is the area that contains the [Horizontal Navigation]. Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Horizontal Navigation Background], click the [Submit] button to confirm your choices and [Save] your changes.

Button Default

Via the dropdown menu, select an [Image] that will be used in the [Default Button Background] of your website. The [Default button background] is the area directly behind non active navigation links in the [Horizontal Navigation]. Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Default Button Background], click the [Submit] button to confirm your choices and [Save] your changes.

Button Mouseover

Via the dropdown menu, select an [Image] that will be used as the [Mouseover Button Background] of your website. This will configure the “mouseover” background [Image] state (i.e. the image to be display when the mouse is over a navigation link in the Horizontal Navigation). Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Mouseover Button Background], click the [Submit] button to confirm your choices and [Save] your changes.

Button Selected

Via the dropdown menu, select an [Image] that will be used as the [Selected Button Background] of your website. This will configure the “down” background [Image] state (i.e. the image to be display when you have clicked a link in the Horizontal Navigation). Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Mouseover Button Background], click the [Submit] button to confirm your choices and [Save] your changes.

Vertical nav images

Navigation background

Via the dropdown menu, select an [Image] that will be used in the [Vertical Navigation Background] of your website. This is the area that contains the [Vertical Navigation]. Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Vertical Navigation Background], click the [Submit] button to confirm your choices and [Save] your changes.

Button Default

Via the dropdown menu, select an [Image] that will be used in the [Default Button Background] of your website. The [Default button background] is the area directly behind non active navigation links in the [Vertical Navigation]. Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Default Button Background], click the [Submit] button to confirm your choices and [Save] your changes.

Button Mouseover

Via the dropdown menu, select an [Image] that will be used as the [Mouseover Button Background] of your website. This will configure the “mouseover” background [Image] state (i.e. the image to be display when the mouse is over a navigation link in the Vertical Navigation). Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Mouseover Button Background], click the [Submit] button to confirm your choices and [Save] your changes.

Button Selected

Via the dropdown menu, select an [Image] that will be used as the [Selected Button Background] of your website. This will configure the “down” background [Image] state (i.e. the image to be display when you have clicked a link in the Vertical Navigation). Now you can define the [Tile] method and [Alignment] for this [Image] via the additional dropdown options. After you have selected your [Mouseover Button Background], click the [Submit] button to confirm your choices and [Save] your changes.

Tile

Via the dropdown menu, select how your chosen image will be tiled:

[REPEAT] = Chosen image will be tiled indefinitely

[REPEAT-X] = Chosen image will be tiled horizontally only

[REPEAT-Y] = Chosen image will be tiled vertically only

[NO-REPEAT] = Chosen image will displayed once only (no tile)

Align

Via the dropdown menu, select how your chosen image will be aligned:

[TOP LEFT]

Will align the image to the [TOP] (absolute top) and [LEFT] (absolute left) of your website

[TOP CENTER]

Will align the image to the [TOP] (absolute top) and [CENTER] of your website

[TOP RIGHT]

Will align the image to the [TOP] (absolute top) and [RIGHT] (absolute right) of your website

[CENTER LEFT]

Will align the image to the [CENTER] (absolute middle) and [LEFT] (absolute left) of your website

[CENTER CENTER]

Will align the image to the [CENTER] (absolute middle) and [CENTER] (absolute middle) of your website (This setting is good for using large images in the background)

[CENTER RIGHT]

Will align the image to the [CENTER] (absolute middle) and [RIGHT] (absolute right) of your website

[BOTTOM LEFT]

Will align the image to the [BOTTOM] (absolute bottom) and [LEFT] (absolute left) of your website

[BOTTOM CENTER]

Will align the image to the [BOTTOM] (absolute bottom) and [CENTER] (absolute middle) of your website

[BOTTOM RIGHT]

Will align the image to the [BOTTOM] (absolute bottom) and [RIGHT] (absolute right) of your website