Customize Skins

Editing & Creating a Skin

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 Video Tutorial

Watch this video tutorial on how to Create and Edit Skins here.

STEP 1.

To Customize a Skin, you’ll need to access the Customizer via WP Admin > Appearance > Customize > Customize Skins.

You can identify the Skin settings by the small “Paintbrush” icon next to each section.

STEP 2.

To Edit, Create or apply a Skin to your site, click the Select Skin section. You’ll also notice in the above diagram that the Customizer will tell you what Skin you’re currently editing. This isn’t the necessarily the Skin that’s applied to your site.

STEP 3.

Once you’ve clicked on Select Skin you’ll see the options in the above diagram.

  • This shows the Skin you’re Currently Editing
  • Use the Select box to select the Skin you wish to Edit – please wait for the page to refresh
  • To create a New Skin, click the New button. Enter a Name when requested and click Save
  • To Duplicate the current Skin you’re editing, click Duplicate. Enter a Name when requested and click Save
  • To Delete the current Skin you’re editing, click Delete. If you delete a Skin that is bundled with the Theme, it will automatically regenerate itself with the default settings
  • To Apply a Skin to your site, select the Skin you wish to use from the Select Box. If no Skin is selected here, it will use the Skin that’s currently been edited
  • Once you’re done Editing, click Save & Publish
    • STEP 4.

    If you wish to apply a different Skins to individual pages or posts, follow these steps:

    Edit the Post or Page:

  • Locate the Skin tab
  • Click the Skin Select Box ( Default will use the Skin that’s applied in the Customizer > Customize Skins > Select Skin > Apply to Skin )
  • Choose the Skin you wish to apply to that page only.

    • Once you’ve selected the Skin, save the Post or Page and the Skin you’ve selected will now be applied to that page.

    Dock Bar Skin Colors

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

    Edit Dock Bar Skin Settings Video Tutorial

    Watch the video tutorial on how to edit the Dock Bar Skin Settings here.

    Edit the Dock Bar Skin Settings

    To Edit the Dock Bar Skin settings, goto the WordPress Admin > Customize > Customize Skins > Dock Bar

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    Dock Bar Background Color

    Change the Background Color of the Dock Bar.

    Please Note: This option only applies if you have set the Dock Bar Position to a position that is not Header.

    Dock Bar Background Image

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

    Please Note: This option only applies if you have set the Dock Bar Position to a position that is not Header.

    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
    Dock Bar Border

    Use this option to set a Border Color on the Dock Bar.

    Please Note: This option only applies if you have set the Dock Bar Position to a position that is not Header.

    Dock Bar Font Color

    This option changes the Font Color within the Dock Bar. Use this option to change the text color of the Information Panel Widget when set to Static.

    Please Note: This does not change the Dock Icon Colors, see below to change the color of Dock Icons.

    Dock Bar Link Colors

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

    Dock Bar Link Hover Colors

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

    Dock Icon Size

    Use this option to change the size of the Dock Icons. This includes the size of Social Icons, size of Cart and size of Search icons.

    Dock Icon Color

    Use this option to set a Dock Icon color, which override the Dock Bar Link color. This is useful if you set a Dock Icon background ( See below ).

    Dock Icon Background Color

    Use this option to set a Dock Icon Background Color.

    Dock Icon Border Color

    Use this option to set a Dock Icon Border Color.

    Dock Dropdown Background Color

    Use this option to change the Background Color of Dock Icon Dropdown Panels. This includes Droppanels for Shopping Cart, Search & Information Panel.

    Dock Dropdown Background Opacity

    Use this option to change the Background Opacity of Dock Icon Dropdown Panels. This includes Droppanels for Shopping Cart, Search & Information Panel.

    Dock Dropdown Font Color

    Use this option to change the Font Color of the Dock Icon Dropdown Panels

    Dock Dropdown Link Color

    Use this option to change the Link Color of the Dock Icon Dropdown Panels

    Dock Dropdown Link Hover Color

    Use this option to change the Link Hover Color of the Dock Icon Dropdown Panels

    Dock Dropdown Element Color

    Use this option to change the Element Colors of Dock Icon Dropdown Panels. This includes form fields text.

    Dock Dropdown

    Header Skin Colors

    Learn how to change the Header Background Color, Background Image, Border Color Font Colors and Set an Alternative Logo

    Edit Header Skin Settings Video Tutorial

    Watch the video tutorial for editing the Header Skin Settings here.

    Edit the Header Skin Settings

    To Edit the Header Skin settings, goto the WordPress Admin > Customize > Customize Skins > Header

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    Alternative Logo

    Use this option to set an Alternative Logo to the one being used in the main admin settings – WordPress Admin > Customize > Header > Logo URL.

    The logo set here will only display on the Pages that have this Skin applied to it.

    Header Background Color

    Change the Background Color of the Header. This color will also set the the Main Menu Drop Menus ( This can be overridden using the Sub Menu Background Color – see option below ).

     

    Header Background Opacity

    Change the Background Color Opacity of the Header. This opacity only affects the color and not the background image.

    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
    Header Border

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

    Header Font Color

    This option changes the Font Color within the Header. Use this option to change the text color of the Header Panel Widget and Logo Tagline.

    Please Note: This does not change the Dock Icon Colors, see below to change the color of Dock Icons.

    Header 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.

    Header Link 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.

    Main Menu Link Color

    This option specifically targets the Main Menu Link Colors within the header. This overrides the Header Link Color ( See above ).

    Main Menu Link Hover Color

    This option specifically targets the Main Menu Link Hover Colors within the header. This overrides the Header Link Hover Color ( See above ).

    Main Menu Link Hover Background Color

    This option specifically targets the Main Menu Link Hover Colors within the header. This overrides the Header Link Hover Color ( See above ).

    Submenu Background Color

    Use this option to set a Submenu Background Color, which overrides the Header Background Color value which the Submenu naturally inherits.

    Submenu Background Opacity

    Use this option to set a Submenu Background Opacity.

    Submenu Link Color

    Use this option to set a Submenu Link Color.

    Submenu Link Hover Color

    Use this option to set a Submenu Link Hover Color.

    Submenu Link Hover Background Color

    Use this option to set a Submenu Link Hover Background Color.

    Transparent Header Font Color

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

    Sub header Skin Colors

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

    Edit the Sub Header Skin Settings Video Tutorial

    Watch the video tutorial on editing the Sub Header Skin Settings here.

    Edit the Sub header Skin Settings

    To Edit the Sub header Skin settings, goto the WordPress Admin > Customize > Customize Skins > Sub header

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    Sub header Background Color

    Change the Background Color of the Sub header.

    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
    Header Border

    Use this option to set a Border Color on the Sub header.

    Sub header Font Color

    This option changes the Font Color within the Sub header. This includes the current page Breadcrumb Color.

    Sub header Link Colors

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

    Header Link 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.

    Sub header Title Color

    Use this option to change the color of the Sub header Title Color.

    Sub header Subtitle Color

    Use this option to change the color of the Sub header Subtitle Color.

    Body Skin Colors

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

    Edit the Body Skin Settings Video Tutorial

    Watch the video tutorial of editing the Body Skin Settings here.

    Edit the Body Skin Settings

    To Edit the Body Skin settings, goto the WordPress Admin > Customize > Customize Skins > Body

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    Body Background Color

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

     

    Body Background Opacity

    Change the Background Color Opacity of the Body. This is the area between the Header and Footer sections. This option does not affect the Background Image opacity.

     

    Body 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
    Shaded Areas Color

    This option controls the font Color of Shaded Areas – these areas include Form Fields, Search Form, Tabs & Accordion ( With Shaded Color selected ), Back to Top Button, Related Posts Background & Boxed Posts Style.

    Shaded Areas Background Color

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

    Shaded Areas Border Color

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

    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 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 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 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.

    Body Font Color

    This option changes the Font Color within the across the Site. This setting can be overridden by choosing a Font Color within each Skin Section .e.g. WordPress Admin > Customize > Customize Skins > Header

    Body Link Colors

    This option changes the Link Color within the across the Site. This setting can be overridden by choosing a Font Color within each Skin Section .e.g. WordPress Admin > Customize > Customize Skins > Header

    Body Link Hover Colors

    This option changes the Link Hover Color within the across the Site. This setting can be overridden by choosing a Font Color within each Skin

    Footer Skin Colors

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

    Edit Footer Skin Settings Video Tutorial

    Watch the video tutorial for editing the Footer Skin Settings here.

    Edit the Footer Skin Settings

    To Edit the Footer Skin settings, goto the WordPress Admin > Customize > Customize Skins > Footer

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    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 Shaded Areas Color

    This option controls the font Color of Footer Shaded Areas – these areas include Form Fields, Search Form, Social Icons Color

    Shaded Areas Background Color

    This option controls the Background Color of the Footer Shaded Areas – these areas include Form Fields, Search Form, Social Icons Background Color

    Shaded Areas Border Color

    This option controls the Border Color of the Footer Shaded Areas – these areas include Form Fields, Search Form, Social Icons Border Color

    Footer Font Color

    This option changes the Font Color within the Footer area.

    Footer Link Colors

    This option changes the Link Color within the Footer area.

    Body Link Hover Colors

    This option changes the Link Hover Color within the Footer area.

    Footer Heading Colors

    Set the colors of Footer Heading 3 Color & Footer Heading h4 – h6 Colors. This includes the Footer Widget Titles.

    Skin Font Settings

    Learn how to change the Theme Font Settings.

    Edit Font Settings Video Tutorial

    Watch the video tutorial for editing the Skin Font Settings here.

    Edit the Font Settings

    To Edit the Font Skin settings, goto the WordPress Admin > Customize > Customize Skins > Font Settings

    Each section has the following setting you can control:

    • Font Family – Choose from over 700 fonts from the Google Fonts Library
    • Font Style – This option allows you to set the Font Weight. When the Font Family is selected, the available font styles will display
    • Text Transform – Use this option to change the Font Transform, choose from UPPERCASE, Capitalize, lowercase
    • Font Size – Control the Font Size
    • Letter Spacing – Set the spacing between each letter

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    General Font Settings

    This setting will set the Font Family for the entire site. Choose from over 700 fonts from the Google Fonts Library.

    Please Note: This setting can be overridden by setting a different Font Family for each section i.e. Header, Logo, Menu, Footer, Headings – See options below.

    Logo Font Settings

    If an image is not being used as the Logo, this setting will control the Font Settings for the Logo section.

    Logo Font Tagline Settings

    This setting will control the Font Settings for the Logo Tagline section.

    Menu Font Settings

    This setting will control the Font Settings for the Main Menu section.

    Headings Font Settings

    This setting will control the Font Settings for the Headings tags, including h1, h2, h3, h4, h5, h6.

    This section also allows you to control the Page Title Font Size and the Page Subtitle Font Size.

    Background Skin Settings

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

    Edit the Background Skin Settings

    To Edit the Background Skin settings, goto the WordPress Admin > Customize > Customize Skins > Background

    Please Note: Make sure you’re editing the correct Skin before making changes. ( See the Editing & Creating a Skin if you’re unsure how to do this )

    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