Theme Options

  • Home
  • /Category ' Theme Options '

Theme Options Overview

Learn how to configure the theme using the Theme Options admin panel and Customizer.

Accessing Theme Options

There are two ways to access your Theme Options:

  • Via WP Admin > Appearance > Customize ( Recommended )
  • Via WP Admin > Appearance > Theme Options

    • The recommended method is the Customize method, this allows you to configure the Theme Options in Real-time. Any change you make, will be shown automatically in the preview pane.

    Customize Skins

    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.

    General

    Access the General Theme Options via Appearance > Customize > General or via Appearance > Theme Options > General.

    Site Layout

    Site Layout sets the layout of the site to Wide ( stretches across the browser ) or Boxed ( confined to the Max Site Width setting )

    Max Site Width

    Set the Maximum Width of your site on Desktops. This will confine the site content within this width value. The default value is 1440px.

    Element Animation

    Element Animation sets the animation style of the Menu & Dock Bar drop down panels. It also controls the animation of Posts loading onto the page.

    Element Border Radius

    Element Border Radius controls the edges of various elements throughout the site. Here are some examples of this setting in use:

  • 0px, this sets the elements to have straight edges
  • 10px, this sets elements to have a 10px curved edge
  • 100px, this sets elements that can allow 100px and those elements that can’t, default to the maximum border radius of 15px.
    • Default Page Layout

    Default Page Layout sets the default layout for each page created & those pages that have their individual layout settings set to Default. This option can be overwritten by using the Page Layout option within the each Page.

    Breadcrumbs

    This Breadcrumbs option is a global option that controls the display of Breadcrumbs acrsoss the site. You can override this setting within the Options of each Post or Page.

    Page Comments

    Page Comments allows comments to be activate on pages. Please ensure you have enabled comments in WordPress ( Settings > Discussion ) prior to enabling this option.

    Author Bio

    Author Bio allows you to set the display of the Author Biography ( See WordPress Admin > Users > Edit > Biographical Info ) on either Posts or Posts & Pages.

    Number of Sidebars

    Set any number of sidebars using this option. Once a value is entered, the number of Sidebars will be created within WordPress Admin > Appearance > Widgets. Default is 2 sidebars.

    Use First Image of Posts

    If no Featured Image is set on the post, this option will retrieve the first image of the post and use that as a temporary “Featured Image”.

    Fancybox Lightbox

    This option controls the use of the Lightbox script. If you wish to use your own script, please disable this option.

    Lightbox Classes

    This option uses the Fancybox Lightbox script to display CSS classes within a lightbox. The class must contain a link tag, see examples below:

    .myclass a

    Alternatively:

    a.myclass

    Dock Bar

    Access the Dock Bar Theme Options via Appearance > Customize > Dock Bar or via Appearance > Theme Options > Dock Bar.

    What is the Dock Bar?

    All of the highlighted areas above are examples of the Dock Bar. The Dock Bar can be positioned in a number of areas and contain Social Icons, Shopping Cart, Search, Menu and the Information Panel Widget.

  • Dock Bar Position Header with Information Panel Widget, Social, Shopping Cart and Search Icons
  • Dock Bar Position Right Float with Social Icons
  • Dock Bar Position Right with Social & Search Icons
  • Dock Bar Position Left Float with Menu & Search Icons
    • Dock Bar Position

    This option controls the position of the Dock Bar. See the diagram above for examples of the various positions. Options with the Float setting will set the Dock Bar to float over page content.

    Dock Panel Style

    This option sets how the Dock Panels are displayed. Dock Panels are the drop panel that appears when various Dock Icons are click i.e. Shopping Cart, Search, Menu.

    Dock Bar Search

    This option will set the display of the Search Icon within the Dock Bar.

    Info Dock Panel

    For Desktop Only: Control the display of the Information Panel. To add content to this area, add widgets to WordPress Admin > Appearance > Widgets > Information Panel.

  • Info Dock Panel is set to Static this will display the widget contents within the Dock Bar.
  • Info Dock Panel is set to Dock Icon this will display the widget contents within the Icon ( See below for how to change that icon ).
    • Info Dock Icon

    If you have set the Info Dock Panel option to Dock Icon, you can choose which icon represents it here. Visit the Font Awesome site to choose the icon you want. Enter the Class only e.g.

    fa-info

    Menu Dock Icon

    If you have set the Menu In Dock Bar option to On ( See here for where to set that option ), you can choose which icon represents the Menu here. Visit the Font Awesome site to choose the icon you want. Enter the Class only e.g.

    fa-home

    Menu Dock Text

    If you have set the Menu In Dock Bar option to On ( See here for where to set that option ), you can choose to display text underneath the icon to help identify the icon as being a menu. Keep the text to a brief description e.g. Menu or Home.

    Menus

    Setup the Main Menu via Appearance > Customize > Menus. To control the position of the Menu, see the Header Theme Options.

    Creating a Menu Video Tutorial

    Watch the video tutorial for how to create a Menu and Mega Menu here.

    Menu Locations

    Use this option to assign a Menu you have created to a Location within the theme.

    Menu Name

    Click the Menu name to edit the menu.

    Add a Menu

    To create a Menu, follow this guide:

  • Goto WordPress Admin > Appearance > Customize > Menus
  • Click Add a Menu button
  • Give the Menu a name
  • Click Create Menu
  • Once it’s created, assign the Menu to a location i.e. Main Navigation
  • Click Add Items
  • Choose what Menu item you want to add.

    • Please note. If you’re creating a Menu that you do not want clickable, use a Custom Links menu item and add # to the URL

    Create a Mega Menu

    To setup a Mega Menu is simple. Follow the steps below to create one. If you are unsure how to create a new menu see the Add a Menu section above.

    STEP 1.

    If you’re not already on the Menus page – goto Appearance > Customize > Menus

  • Click the Settings icon
  • Ensure the CSS Classes option is enabled
  • Click the Menu you want to create the Mega Menu on
    • STEP 2.

    Next we first must setup the menu to be suitable for a Mega Menu. See the Diagram above to help you setup your menu.

  • This is the Menu Item that will contain the Mega Menu
  • The 2nd Level ( drag right to indent ) will determine the number of columns, in this example 4 columns ( 4 x Column Title )
  • The 3rd Level ( drag right to indent ) will display directly under the column set by the level above.
    • STEP 3.

    Now we have the Menu setup suitable for a Mega Menu, we need to activate the Mega Menu. Follow these steps to activate the Mega Menu.

  • Click on the Menu Item which you want the Mega Menu to appear on
  • Locate the CSS Classes Field ( See STEP 1. if you can not see CSS Classes ) and enter the text: mega-menu
  • Click Save & Publish and your Mega Menu will be active
    • STEP 4.

    The final step is choosing how you wish to display the Column Titles, you can follow these steps to make the Column Title appear bold and it will disable the link function of that menu item.

  • Click the Menu Item you wish to set as a Menu Title
  • Locate the CSS Classes field and enter the text: menu-title
  • Click Save & Publish

    • Blog

    Access the Blog Theme Options via Appearance > Customize > Blog or via Appearance > Theme Options > Blog.

    Default Post Layout

    Set the default Layout of the Blog pages i.e. Index, Archive, Categories.

    Column 1 Sidebar

    If you have chosen a Post Layout to contain a sidebar, you can choose which side to use on Column 1 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Column 2 Sidebar

    If you have chosen a Post Layout to contain a sidebar, you can choose which side to use on Column 2 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Layout Format

    Select the display Format of the posts on Blog pages.

  • Normal will display posts stack on top of each other
  • Grid will display the posts a grid layout
  • Masonry Grid will display the posts as a grid layout and optimal position based on available vertical space, like a mason fitting stones in a wall
    • Boxed Post Style

    This option allows you to display posts with a Boxed / Non-Boxed style.

  • Disabled Boxed Style
  • Enabled Boxed Style

    • The Boxed Style is set via the Appearance > Customize > Customize Skins > Body > Element Areas

    Grid Columns

    Set the number of Columns to display the posts in. Layout Format has to be set to Grid or Masonry Grid.

    Search

    Add a Search Bar to the Blog pages. Choose from the following options:

  • Disabled
  • Search Bar – A traditional search bar which will display the results on a search page
  • Search Filter – Search the posts on that current blog page and it will filter the posts based on the keyword entered
  • Search Filter + Highlight – This option uses the Search Filter as above, with the added feature of Highlighting the keyword entered within the post
    • Pagination

    Choose the Blog pagination style using the following options:

  • Ajax Click Load – This option dynamically loads the posts onto the Blog page and displays a Load More button when more posts are available to load
  • Ajax Scroll Load – This option is the same as above but instead of a Load More button, it will display more posts when you scroll to the bottom of the page
  • Page Numbers – This option uses the traditional method of displaying page numbers

    • The number of posts displayed per page or per ajax load is set via WordPress Admin > Settings > Reading > Blog pages show at most

    Featured Image

    Choose where to display the Featured Image of a Post. This option can be overwritten via the Post > General > Featured Image Display

    Share Post

    Display Social Icons at the bottom of each Single Post. You must set which icons to use via WordPress Admin > Appearance > Theme Optons > Social Media

    Related Posts

    Choose to display the Related Posts at the bottom of each Single Post or disable Related Posts.

    Archive Date Format

    Choose the Date Format for Archive Pages – See the WordPress formatting guide here.

    Single Date Format

    Choose the Date Format for Single Posts – See the WordPress formatting guide here.

    Date Position

    Choose where to position the Date on Archive & Single Posts.

    Display Date

    Choose where to display the Post Date or choose to disable Post Date.

    Display Author

    Choose where to display the Post Author or choose to disable Author.

    Display Categories

    Choose where to display the Post Categories or choose to disable Post Categories.

    Display Tags

    Choose where to display the

    Portfolio

    Access the Portfolio Theme Options via Appearance > Customize > Portfolio or via Appearance > Theme Options > Portfolio.

    Default Portfolio Page Layout

    Set the default Layout of the Portfolio pages i.e. Index, Archive, Categories.

    Column 1 Sidebar

    If you have chosen a Portfolio Page Layout to contain a sidebar, you can choose which side to use on Column 1 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Column 2 Sidebar

    If you have chosen a Portfolio Page Layout to contain a sidebar, you can choose which side to use on Column 2 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Layout Format

    Select the display Format of the posts on Portfolio pages.

  • Normal will display posts stack on top of each other
  • Grid will display the posts a grid layout
  • Masonry Grid will display the posts as a grid layout and optimal position based on available vertical space, like a mason fitting stones in a wall
    • Boxed Post Style

    This option allows you to display posts with a Boxed / Non-Boxed style.

  • Disabled Boxed Style
  • Enabled Boxed Style

    • The Boxed Style is set via the Appearance > Customize > Customize Skins > Body > Element Areas

    Grid Columns

    Set the number of Columns to display the posts in. Layout Format has to be set to Grid or Masonry Grid.

    Parent Portfolio Page

    Select a page which acts as the Portfolio home page. By default Portfolio index page will display.

    Portfolio Page Link

    Display a Portfolio home page link at the bottom of each Portfolio Post.

    Search

    Add a Search Bar to the Blog pages. Choose from the following options:

  • Disabled
  • Search Bar – A traditional search bar which will display the results on a search page
  • Search Filter – Search the posts on that current blog page and it will filter the posts based on the keyword entered
  • Search Filter + Highlight – This option uses the Search Filter as above, with the added feature of Highlighting the keyword entered within the post
    • Pagination

    Choose the Blog pagination style using the following options:

  • Ajax Click Load – This option dynamically loads the posts onto the Blog page and displays a Load More button when more posts are available to load
  • Ajax Scroll Load – This option is the same as above but instead of a Load More button, it will display more posts when you scroll to the bottom of the page
  • Page Numbers – This option uses the traditional method of displaying page numbers

    • The number of posts displayed per page or per ajax load is set via WordPress Admin > Settings > Reading > Blog pages show at most

    Featured Image

    Choose where to display the Featured Image of a Post. This option can be overwritten via the Post > General > Featured Image Display

    Portfolio Page – Image Alignment

    Choose what position to align Portfolio Page Images.

    Portfolio Page – Image Lightbox

    Choose to enable or disable the lightbox script on Portfolio Page Images.

    Portfolio Page – Image Size

    Enter the Portfolio Page Image size. Choose from the following sizes: thumbnail, medium, large, full or set a custom size e.g. 980×400

    Single Portfolio Post – Image Lightbox

    Choose to enable or disable the lightbox script on Single Post Images.

    Single Portfolio Post – Image Size

    Enter the Singe Portfolio Post Image size. Choose from the following sizes: thumbnail, medium, large, full or set a custom size e.g. 980×400

    Footer

    Access the Footer Theme Options via Appearance > Customize > Footer or via Appearance > Theme Options > Footer.

    Display Footer

    Choose to Display or Disable the Footer.

    Footer Columns

    Choose the number of columns to split the footer into. Add widgets to the Footer via Appearance > Widgets > Footer Column(s)

    Display Lower Footer

    Choose to Display or Disable the Lower Footer.

    Lower Footer Left Column

    By default this column will display – © Year Site Title

    Lower Footer Right Column

    By default this field displays Powered by You Theme. To remove Powered by You Theme – simply add your own text or a blank character like:

     

    Social Media

    Access the Social Media Theme Options via Appearance > Theme Options > Social Media.

    Dock Social Icons

    Choose to display Social Icons within the Dock Bar.

    Share Icon

    The Share icon collapses all selected Social Icons into a sinlge Share icon.

    Social Icon Color

    Set the color of the Social Icons. Choose from the following:

  • Default inherits the color set in the Appearance > Customize > Customize Skins > Dock Bar > Dock Icons
  • Color sets the icon to the native color of the social icon
  • Color on Hover sets the icon background to the native color of the social icon
    • Enable Social Icons

    Enable the Social Icons you wish to display within the Dock Bar and Post Share Icons ( See Blog options for how to enable Share Icons on posts )

    Digg Facebook LinkedIn Del.icio.us Reddit Stumble Twitter Google RSS YouTube Vimeo Pinterest Soundcloud Instagram Flickr Email

    Social Icons URL’s

    Set the URL of each Social Icon. Use [get_the_title] or [get_permalink] to display the Page Title and Permalink within the URL.

    Custom Scripts

    Access the Custom Scripts Theme Options via Appearance > Customize > Custom Scripts or via Appearance > Theme Options > Custom Scripts.

    Script Before </head>

    Add Javascript / jQuery into this field to appear directly before the </head> tag. This is ideal for Google Analytics.

    Please note: You must include the <script> tags e.g.

    <script> /* YOUR SCRIPT HERE */ </script>

    Script Before </body>

    Add Javascript / jQuery into this field to appear directly before the </body> tag. This is ideal for custom scripts.

    Please note: You must include the <script> tags e.g.

    <script> /* YOUR SCRIPT HERE */ </script>

    Custom CSS

    Access the Custom CSS Theme Options via Appearance > Customize > Custom CSS or via Appearance > Theme Options > Custom CSS.

    Custom CSS

    If you require changes to the CSS on your site, use Custom CSS field to override the default CSS. This is safe from updates.

    Please note: Only use this option if you have experience using CSS.

    Mobile CSS

    If you require changes to the CSS on your site for Mobile devices, use Mobile CSS field to override the default CSS. This CSS becomes active when screen sizes are less than 1025px. This is safe from updates.

    Please note: Only use this option if you have experience using CSS.

    WooCommerce

    Access the WooCommerce Theme Options via Appearance > Customize > WooCommerce or via Appearance > Theme Options > WooCommerce.

    Install WooCommerce Plugin

    The following options will only display once the WooCommerce plugin has been installed.

    To install the WooCommerce Shop plugin, goto WordPress Admin > Plugins > Add New > Search for Woocommerce > Click Install Now.

    For Help with configuring WooCommerce, see the documentation here.

    Woocommerce Page Layout

    This option sets the Page Layout for all Woocommerce pages, including: Shop, Single Product, Cart & Checkout.

    Please Note: You cannot use the Page > Layout options for WooCommerce pages. You can however create a Custom Shop Page which has it’s own Page Layout.

    Woocommerce Column 1 Sidebar

    If you have chosen a Woocommerce Page Layout to contain a sidebar, you can choose which side to use on Column 1 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Woocommerce Column 2 Sidebar

    If you have chosen a Woocommerce Page Layout to contain a sidebar, you can choose which side to use on Column 2 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    Cart Dock Icon

    Use this option to Display or Hide the Cart Icon.

    Search Products Only

    This option changes the Search bar to search for Products only ( Not posts, pages etc ).

    bbPress

    Access the bbPress Theme Options via Appearance > Customize > bbPress or via Appearance > Theme Options > bbPress.

    Install bbPress Plugin

    The following options will only display once the bbPress plugin has been installed. To install the bbPress Shop plugin, goto WordPress Admin > Plugins > Add New > Search for bbPress > Click Install Now.

    For help with configuring bbPress, see the documentation here.

    bbPress Page Layout

    This option sets the Page Layout for all bbPress pages.

    bbPress Column 1 Sidebar

    If you have chosen a bbPress Page Layout to contain a sidebar, you can choose which side to use on Column 1 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    bbPress Column 2 Sidebar

    If you have chosen a bbPress Page Layout to contain a sidebar, you can choose which side to use on Column 2 here. See Appearance > Customize > General > Sidebars to create more than the default 2 sidebar widget areas.

    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