Social Media

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

Dock Bar Social Icons

Choose to display Social Icons within the Dock Bar area.

Share Icon

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

Post Social Icons

Choose to display Social Icons at the bottom of Single Posts.

Social Profiles

Use this section to add the Social icons you wish to display in the above areas. Once an icon is selected, you’ll be able to add the Link URL, Color and Background Color.

Note: Each icon has default sharing functionality or links to the Social Media site.

Link URL

Use this field to set a custom URL for each Social Icon. Use [get_the_title] or [get_permalink] to display the Page Title and Permalink within the URL.

Advanced

Access the Advanced Theme Options via Appearance > Theme Options > Advanced.

Custom CSS

If you require changes to the CSS on your site, use the 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.

Tracking Code

Use this section of the Advanced Theme Options to add your Google Analytics code, or any other tracking code you wish to use.

Code Before </head>

Add Javascript / jQuery into this field to appear directly before the </head> tag.

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>

Lightbox

Access the Lightbox Theme Options via Appearance > Theme Options > Lightbox.

Enable Lightbox

The Lightbox script is enabled by default, if you wish to disable the built-in Lightbox script, you can disable it here.

Layout

Choose how the Images appear within the Lightbox. Choose between scrolling Horizontally or Vertically.

Skin

Use this option to change the Skin of the Lightbox.

Background Opacity

Set the background opacity of the Lightbox when it’s active.

Infinite Scroll

To set the images to scroll continuously within the Lightbox, enable this option.

Slideshow

Enable this option to automatically enter a Slideshow of the images when the Lightbox is activated.

Arrows

This options allows you to show or hide the arrows within the Lightbox.

Thumbnails

Control the display of Thumbnails within the Lightbox.

CSS Classes

Add CSS classes of elements you wish to add enable the Lightbox to work with. The CSS element must contain a link to an image.

WooCommerce

Access the WooCommerce Theme Options 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 > Theme Options > Layout > Widget Areas 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 > Theme Options > Layout > Widget Areas to create more than the default 2 sidebar widget areas.

Display Cart Icon

Use this option to Display or Hide the Cart Icon within the Dock Bar area.

Search Products Only

This option changes the Search bar to search for Products only. This will exclude posts and pages.

Display Social Icons

Enable this option to display Social Icons on Product pages.

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.

bbPress

Access the bbPress Theme Options 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 > Theme Options > Layout > Widget Areas 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 > Theme Options > Layout > Widget Areas to create more than the default 2 sidebar widget areas.

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.