Overview

Learn how to Edit, Create and Apply a Skin to your site. You’ll also learn how to apply different Skins to individual pages.

Editing & Creating Skins

To Customize a Skin or create a new one, you’ll need to access the Skin Editor via WP Admin > Appearance > Skin Editor.

To edit an existing Skin, use the Select a Skin to Edit section to select the Skin you wish to edit. Once you have selected it, click the Load Skin button. Once the page has reloaded, you can begin editing the Skin using the relevant Theme areas.

Apply Skin to Site

This option allows you to apply a Skin to the entire site. If this is left blank, the default Skin will be the current Skin selected in the Select a Skin to Edit area.

Select a Skin to Edit

To Edit an existing Skin, select the Skin from the select menu. Once a Skin has been selected, you have a number of options:

Load Skin

Clicking the Load Skin button will load the selected Skin into the Skin Editor. The page will reload with the Skin that was selected, ready to edit.

Duplicate Skin

To duplicate an existing Skin, select the Skin you wish to make a copy of and click the Duplicate Skin button.

This will present a field to enter the new name for the Skin to be duplicated.  Once you have entered a name, click the Duplicate Skin button below the field.

Delete Skin

To delete a Skin, select the Skin from the Select a Skin to Edit field and click the Delete Skin button. You will be asked to confirm the deletion.

New Skin

To create a new Skin from scratch, click the New Skin button and enter the name of the Skin. Once you have entered a name, click the Create Skin button. This will reload the page with the new Skin selected, ready to edit.

Body

Learn how to change the Body Background Color, Background Image, Button Colors & Form Field Colors.

Body Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Body

Background Color

Change the Background Color of the Body. This is the main content area between the Header and Footer sections.

Background Image

Use this option to set a Background Image for the main content area. You can position the image using the following settings.

Image Position

  • Center Center
  • Center Top
  • Center Bottom
  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom

Image Repeat

  • Repeat ( Ideal for pattern images )
  • Repeat X – Repeat along the X axis
  • Repeat Y – Repeat along the Y axis
  • No Repeat

Image Size

  • Cover – This option sets the image to cover the entire area
  • Contain – This option sets the image to contain itself within the area

Form Fields, Tables & Elements

Use this option to set the border, font color and background color of Form Fields, Search Forms, Tabs & Accordion ( With Shaded Color selected ), Back to Top Button & Boxed Posts Style.

Background Color

This option controls the Background Color of Form Fields, Search Form, Tabs & Accordion ( With Shaded Color selected ), Back to Top Button & Boxed Posts Style.

Border Color

This option controls the Border Color of Form Fields, Search Form, Tabs & Accordion ( With Shaded Color selected ), Back to Top Button, Dividers & Boxed Posts Style.

Font Color

This option controls the Font Color within Form Fields, Search Form, Tabs & Accordion ( With Shaded Color selected ), Back to Top Button, Dividers & Boxed Posts Style.

Buttons

Use this area to set the button font colors & button background colors.

Button Color

This option changes the default Button Color across the site. This affects Form Buttons and any button that has the Color option set to Skin Button Color. If a Button Color is not specified, it will use the Body Link Color instead.

Button Text Color

This option changes the default Button Text Color across the site. This affects Form Buttons and any button that has the Color option set to Skin Button Color.

Button Hover Color

This option changes the default Button Hover Color across the site. This affects Form Buttons and any button that has the Color option set to Skin Button Color.

Button Text Hover Color

This option changes the default Button Hover Text Color across the site. This affects Form Buttons and any button that has the Color option set to Skin Button Color.

Text Colors & Typography

Learn how to change the main Font Colors & Typopgraphy.

Typography / Font Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Typography

Body Typography

This section contains the options to set the default Font Family for the entire site. This area will also allow you to set the default font color and link colors.

Page & Post Content Links

Use this section to control the link colors within the main content of a page or post. You can define the link color, link hover color and set an underline color.

Metadata Links

Use this section to control the link colors within the metadata. The metadata area is used within posts to display the publish date, author name and category names. You can define the link color, link hover color.

Headings Typography

Use this section of options to set the H1, H2, H3, H4, H5 & H6 heading tags. The heading colors can also be set for each heading in this section.

Note: It’s recommended to use to as little number of fonts as possible. This will keep the page load speeds down.

Other Typography

Use the various Theme areas in the Skin Editor to control the Typography for that section. I.e. to set a custom font for the Menu, use:
WordPress Admin > Appearance > Skin Editor > Menu > Typography.

Header Colors & Font

Learn how to change the Header Background Color, Background Image, Border Color Font Colors and set a Font Colors for Transparent Floating Header mode. 

Header Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Header

Header Background Color

Change the Background Color of the Header. This option also allows control of the opacity of the color.

Header Background Image

Use this option to set a Background Image for the Header area.

Use Post / Page Featured Image

This option is useful to place the Featured Image, set on each Post or Page to appear as the Header background image. If no Featured Image is set on the Post or Page, the default image above will be used.

Image Position

  • Center Center
  • Center Top
  • Center Bottom
  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom

Image Repeat

  • Repeat ( Ideal for pattern images )
  • Repeat X – Repeat along the X axis
  • Repeat Y – Repeat along the Y axis
  • No Repeat

Image Size

  • Cover – This option sets the image to cover the entire area
  • Contain – This option sets the image to contain itself within the area

Overlay Color

Set an Overlay Color for the Header background. Setting a semi-transparent Overlay Color is useful to tone down the Image Background.

Header Border

Use this option to set a Border on the Header. Control the thickness and color of the border.

Typography

Header Typography

This option changes the Font & Font Color within the Header area. The Menu and the Dock Bar ( when set to Within Header ) will inherit these settings.

To control the Menu or Dock Bar font setting, use their respective areas within the Skin Editor.

Link Colors

Use this option to change the color of links within the Header. This includes the Menu & Dock Icons when the Dock Bar position is set to Header.

Hover Colors

Use this option to change the hover color of links within the Header. This includes the Menu & Dock Icons when the Dock Bar position is set to Header.

Transparent Floating Header

Font Color

When the Floating Header option is set to Float + Transparent , use this option to set the Header Font Color.

Link Color

When the Floating Header option is set to Float + Transparent , use this option to set the Header Link Color.

Link Hover Color

When the Floating Header option is set to Float + Transparent , use this option to set the Header Link Hover Color.

Menu Colors & Font

Learn how to change the Menu & Drop Menu  Background Color, Background Image, Border Color Font Colors 

Menu Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Menu

Menu Background Color

Change the Background Color of the Menu. This option also allows control of the opacity of the color.

Menu Border

Use this option to set a Border on the Menu. Control the thickness and color of the border.

Menu Typography

This option changes the Menu Font & Font Color.

Link Color

Use this option to change the color of links within the Menu.

Link Hover Color

Use this option to change the hover color of links within the Menu.

Link Background Hover Color

If this option is set, a background color will be set when the Menu Item is hovered over.

Divider Color

Setting a Divider Color will place a divider line between the Menu items.

Submenu

These settings will control the Colors for the main Menu Submenu ( Drop down Menu ).

Background Color

Change the Background Color of the Submenu. This option also allows control of the opacity of the color.

Border Color

Use this option to set a Border Color on the Submenu.

Font Color

Use this option to change the Font Color within the Submenu.

Link Color

Use this option to change the color of links within the Submenu.

Link Hover Color

Use this option to change the hover color of links within the Submenu.

Link Background Hover Color

If this option is set, a background color will be set when the Submenu Item is hovered over.

Title Area Colors & Font

Learn how to change the Title Area Background Color, Background Image, Border, Font Colors & Title Font.

Title Area Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Title Area

Title Area Background Color

Change the Background Color of the Title Area.

Header Background Image

Use this option to set a Background Image. You can position the following settings to position the image.

Image Position

  • Center Center
  • Center Top
  • Center Bottom
  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom

Image Repeat

  • Repeat ( Ideal for pattern images )
  • Repeat X – Repeat along the X axis
  • Repeat Y – Repeat along the Y axis
  • No Repeat

Image Size

  • Cover – This option sets the image to cover the entire area
  • Contain – This option sets the image to contain itself within the area

Title Area Border

Use this option to set a Border Color on the Title Area.

Typography

Title Typography

Use these options to set the font for the Page & Post titles.

Title Color

This option changes the Font Color for the Page & Post Title.

Subtitle Color

This option changes the Font Color for the Subtitle within the Title Area.

Link Color

Use this option to change the color of links within the Title area. This includes the Breadcrumb Link Color.

Link Hover Color

Use this option to change the hover color of links within the Title area.

Dock Bar Colors

Learn how to change the Dock Bar Background Color, Background Image, Border Color, Font Colors, Dock Bar Icon Colors & Dock Bar Font.

Dock Bar Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Dock Bar

Background Color

Change the Background Color of the Dock Bar.

Background Image

Use this option to set a Background Image. You can position the following settings to position the image.

Image Position

  • Center Center
  • Center Top
  • Center Bottom
  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom

Image Repeat

  • Repeat ( Ideal for pattern images )
  • Repeat X – Repeat along the X axis
  • Repeat Y – Repeat along the Y axis
  • No Repeat

Image Size

  • Cover – This option sets the image to cover the entire area
  • Contain – This option sets the image to contain itself within the area

Border

Use this option to set a Border for the Dock Bar.

Dock Bar Typography

Use these options to change the Dock Bar font and font colors.

Font Color

This option changes the Font Color within the Dock Bar. Use this option to change the text color of any widgets that are set to “Inline”.

Link Colors

Use this option to change the color of links within the Dock Bar. This includes the Dock Icons.

Link Hover Color

Use this option to change the hover color of links within the Dock Bar. This includes the Dock Icons.

Dock Bar Icons

Icon Color

Use this option to set a Dock Icon color.

Icon Hover Color

Use this option to set a Dock Icon hover color.

Icon Background Color

Use this option to set a Dock Icon Background color.

Dock Bar Form Fields, Tables & Elements ( Inline Widgets )

Background Color

Use this option to change the background color of Form fields of widgets that are set to “Inline” wihin the Dock Bar.

Border Color

Use this option to change the border color of Form fields of widgets that are set to “Inline” wihin the Dock Bar.

Font Color

Use this option to change the font color of Form fields of widgets that are set to “Inline” wihin the Dock Bar.

Dock Flyout Windows

When the Dock Bar widgets are set to “Flyout Window” use these options to control the Flyout Window Background Color, Font Colors & Form Fields.

Background Color

Use this option to change the Background Color of Dock Bar Flyout Window.

Font Color

Use this option to change the Font Color of the Dock Bar Flyout Windows.

Link Color

Use this option to change the Link Color of the Dock Bar Flyout Windows.

Link Hover Color

Use this option to change the Link Hover Color of the Dock Bar Flyout Windows.

Dock Flyout Window Form Fields, Tables & Elements

Background Color

Use this option to change the background color of Form fields of widgets that are set to “Flyout” within the Dock Bar.

Border Color

Use this option to change the border color of Form fields of widgets that are set to “Flyout” within the Dock Bar.

Font Color

Use this option to change the font color of Form fields of widgets that are set to “Flyout” within the Dock Bar.

Sidebar Colors & Font

Learn how to change the Sidebar Background Color, Background Image, Border Color, Font Colors & Sidebar Font.

Sidebar Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Sidebar

Background Color

Change the Background Color of the Sidebar.

Background Image

Use this option to set a Background Image. You can position the following settings to position the image.

Image Position

  • Center Center
  • Center Top
  • Center Bottom
  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom

Image Repeat

  • Repeat ( Ideal for pattern images )
  • Repeat X – Repeat along the X axis
  • Repeat Y – Repeat along the Y axis
  • No Repeat

Image Size

  • Cover – This option sets the image to cover the entire area
  • Contain – This option sets the image to contain itself within the area

Border

Use this option to set a Border for the Sidebar.

Sidebar Typography

Use these options to change the Sidebar font and font colors.

Font Color

This option changes the Font Color within the Sidebar.

Link Colors

Use this option to change the color of links within the Sidebar.

Link Hover Color

Use this option to change the hover color of links within the Sidebar.

Sidebar Widget Title Typography

Use this option to change the Sidebar Widget Titles within the Sidebar.

Widget Title Background Color

Use this option to change the Sidebar Widget Title Background Color within the Sidebar.

Widget Title Border Color

Use this option to change the Sidebar Widget Title Border Color within the Sidebar.

Sidebar Form Fields, Tables & Elements

Background Color

Use this option to change the background color of Form fields of widgets that are set to “Inline”within the Sidebar.

Border Color

Use this option to change the border color of Form fields of widgets that are set to “Inline”within the Sidebar.

Font Color

Use this option to change the font color of Form fields of widgets within the Sidebar.

Footer Colors & Font

Learn how to change the Footer Background Color, Background Image, Footer Font & Font Colors.

Footer Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Footer

Footer Background Color

Change the Background Color of the Footer.

Footer Background Image

Use this option to set a Background Image. You can position the following settings to position the image.

Image Position

  • Center Center
  • Center Top
  • Center Bottom
  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom

Image Repeat

  • Repeat ( Ideal for pattern images )
  • Repeat X – Repeat along the X axis
  • Repeat Y – Repeat along the Y axis
  • No Repeat

Image Size

  • Cover – This option sets the image to cover the entire area
  • Contain – This option sets the image to contain itself within the area

Footer Typography

Use these options to change the Footer font and font colors.

Font Color

This option changes the Font Color within the Footer.

Link Colors

Use this option to change the color of links within the Footer.

Link Hover Color

Use this option to change the hover color of links within the Footer.

Footer Widget Title Typography

Use this option to change the Footer Widget Titles within the Footer.

Widget Title Background Color

Use this option to change the Footer Widget Title Background Color within the Footer.

Widget Title Border Color

Use this option to change the Footer Widget Title Border Color within the Footer.

Footer Form Fields, Tables & Elements

Background Color

Use this option to change the background color of Form fields of widgets that are set to “Inline”within the Footer.

Border Color

Use this option to change the border color of Form fields of widgets that are set to “Inline”within the Footer.

Font Color

Use this option to change the font color of Form fields of widgets within the Footer.

Background

Learn how to set a Background Color & Background Image for the entire site. This setting is useful if you’re using the Boxed site layout.

Background Skin Settings

All options below can be found within:
WordPress Admin > Appearance > Skin Editor > Background

Background Color

Use this option to set the Background Color.

Background Image

Use this option to set a Background Image. You can position the following settings to position the image.

Image Position

  • Center Center
  • Center Top
  • Center Bottom
  • Left Top
  • Left Center
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom

Image Repeat

  • Repeat ( Ideal for pattern images )
  • Repeat X – Repeat along the X axis
  • Repeat Y – Repeat along the Y axis
  • No Repeat

Image Size

  • Cover – This option sets the image to cover the entire area
  • Contain – This option sets the image to contain itself within the area