Theme Options

An overview of how to all the theme options available

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

General

These options allow you to configure the site logo, you can select a logo type and then create a text logo, image logo or both image and text. There is also an option to use retina sized images.

Name Description Default
Logo Text Add your logo text here works with Logo Type (Text, Text & Image) Angle
Logo Image Upload a logo for your site, works with Logo Type (Image, Text & Image) assets/images/logo.png

Page Loader

Toggle an animation when each page loads.

Name Description Default
Loading Animation Show a loader whenever a page is loaded
options : Enable, Disable
off
Page Loader Style Choose a style of page loader to show at the start of loading a page
options : Dot, Minimal, Counter
minimal

Header Options

This section will allow you to setup your site header. You can choose from three different types of header to use on your site, and adjust the header height to allow room for your logo.

Name Description Default
Header Type Sets the type of header to use at the top of your site and its behaviour.
options : Nav Bar Fixed - Navigation bar that scrolls with the page., Nav Bar Static - Navigation bar with regular scrolling.
navbar-sticky
Menu Height Use this slider to adjust the menu height. Ideal if you want to adjust the height to fit your logo. 90
Menu Change Scroll Point Point in pixels after the page scrolls that will trigger the menu to change shape / colour. 200
Menu Height After Scroll Use this slider to adjust the menu height after menu has scrolled. 70
Hover Menu Choose between menu that will open when you click or hover (desktop only option since mobile devices will always use touch)
options : Click, Hover
off
Hover Menu Delay Delay in seconds before the hover menu closes after moving mouse off the menu. 200
Hover Menu Fade Delay Delay of the Fade In/Fade Out animation . 200
Header Swatch Choose a color swatch for the header swatch-red-white
Dropdown Menu Width Use this slider to adjust the dropdown width.
200
Top Bar Swatch Choose a color swatch for the Top Bar when you have a Header Type Top Bar or Combo swatch-red-white
Capitalization Enable-disable automatic capitalization in header logo and menus
options : Uppercase, Lowercase, Capitalize, None
on

Layout Options

This section will allow you to setup the layout of your site.

Name Description Default
Layout Type Sets the site layout (Normal - site will use all the width of the page, Boxed - Site will be surrounded by a background )
options : Normal, Boxed
normal

This footer is above the bottom footer of your site. Here you can set the footer to use 1-4 columns, you can add Widgets to your footer in the Appearance -> Widgets page

Name Description Default
Upper Footer Columns Select how many columns will the upper footer consist of.
options : 1, 2, 3, 4
2
Upper Footer Swatch Choose a color swatch for the upper footer swatch-red-white
Upper Footer Decoration Choose a style to use as the Upper Footer decoration.
options : No Decoration, Arrow, Circle, Clouds, Cross, Curtain, Left Slope, Right Slope, Lines, Rounded, Rounded Inverted, Triangle, Triange Inverted, Zig Zag, Zipper
none
Upper Footer Height Choose the amount of padding added to the height of the Upper Footer
options : Normal, Short, Tiny
normal

The footer is the bottom bar of your site. Here you can set the footer to use 1-4 columns, you can add Widgets to your footer in the Appearance -> Widgets page

Name Description Default
Footer Columns Select how many columns will the footer consist of.
options : 1, 2, 3, 4
2
Footer Swatch Choose a color swatch for the footer swatch-red-white
Footer Decoration Choose a style to use as the Footer decoration.
options : No Decoration, Arrow, Circle, Clouds, Cross, Curtain, Left Slope, Right Slope, Lines, Rounded, Rounded Inverted, Triangle, Triange Inverted, Zig Zag, Zipper
none
Footer Height Choose the amount of padding added to the height of the Footer
options : Normal, Short, Tiny
normal
Back to top Enable the back-to-top button
options : Enable, Disable
enable

Blog

Blog Header Options

Change how your blog header looks.

Name Description Default
Show Header Show or hide the header.
options : Hide, Show
show
Header Height Choose the amount of padding added to the height of the header
options : Normal, Short, Tiny, No Padding
normal
Title Main Title text Blog
Subtitle Smaller subtitle to be shown under the main title text. Latest News and Updates
Title Font Size Choose size of the font to use in your header
options : Normal, Super (60px), Hyper (96px)
normal
Title Font Weight Choose weight of the font to use in the title
options : Regular, Black, Bold, Light, Hairline
regular
Title Alignment Align the text shown in the header left, right or center.
options : Center, Left, Right, Justify
center
Title Underline Adds an underline effect below the title & subtitle.
options : Show, Hide
no-underline
Background Image Choose an image to use for this rows background.
Background Video mp4 Enter url of a h.264 (mp4) video to use for this rows background.
Background Video webm Enter url of a webm video to use for this rows background.
Background Position Vertical Set the vertical position of background image. 0 value represents the top horizontal edge of the section. Positive values will push the background down. 0
Overlay Colour Set the colour of the video & image overlay #000000
Overlay Opacity Set the opacity of the video & image overlay 0
Overlay Grid Adds an overlay pattern image
options : Off, On
off
Image Background Size Set how the image will fit into the section
options : Full Width, Actual Size
cover
Image Background Repeat Set how the image will be repeated
options : No repeat, Repeat horizontally, Repeat vertically, Repeat horizontally and vertically
no-repeat
Image Background Parallax Set the way the background scrolls with the page. Scroll = normal Fixed = Parallax effect.
options : Scroll, Fixed
scroll

General Blog Options

Here you can setup the blog options that are used on all the main blog list pages

Name Description Default
Blog Layout Layout of your blog page. Choose right sidebar, left sidebar, fullwidth layout
options : Right Sidebar, Full Width, Left Sidebar
sidebar-right
Post Icons Toggle post icons on/off in post
options : On, Off
on
Show Comments On Where to allow comments. All (show all), Pages (only on pages), Posts (only on posts), Off (all comments are off)
options : All, Pages, Posts, Off
posts
Show Read More Show or hide the readmore link in list view
options : On, Off
on
Blog read more link The text that will be used for your read more links read more
Strip teaser Strip the content before the <--more--> tag in single post view
options : On, Off
off
Pagination Style How your pagination will be shown
options : Pages, Next & Previous
pages

Blog Single Page

This section allows you to set up how your single post will look.

Name Description Default
Display categories Toggle categories on/off in post
options : On, Off
on
Display tags Toggle tags on/off in post
options : On, Off
on
Display comment count Toggle comment count on/off in post
options : On, Off
on
Show related posts Show Related Posts after the post content
options : On, Off
on
Number of related posts Choose how many related posts are displayed in the related posts section after the post content
options : 3, 4, 6, 8
3
Related posts per slide Choose how many related posts are displayed in each slide
options : 3, 4
3
Related posts section height Choose the amount of padding added to the height of the Related posts section
options : Normal, Short, Tiny
normal
Display avatar Toggle avatars on/off in Author Bio Section
options : On, Off
on
Open Featured Image in Magnific Popup Featured image in single post view will open in a large preview popup
options : On, Off
on
Show Facebook Button Show facebook share button on your single blog pages
options : Show, Hide
show
Show Tweet Button Show tweet share button on your single blog pages
options : Show, Hide
show
Show Google+ Button Show G+ share button on your single blog pages
options : Show, Hide
show
Show Pinterest Button Show Pinterest share button on your single blog pages
options : Show, Hide
show
Show LinkedIn Button Show LinkedIn share button on your single blog pages
options : Show, Hide
show

Swatches

All the blog sections can be swatched. You can choose the colours of your blog header, posts, related posts and author bio.

Name Description Default
Header Swatch Select the colour scheme to use for the header on this page. swatch-red-white
Blog Swatch Choose a color swatch for the Blog page swatch-white-red
Blog Decoration Choose a style to use as the blog decoration.
options : No Decoration, Arrow, Circle, Clouds, Cross, Curtain, Left Slope, Right Slope, Lines, Rounded, Rounded Inverted, Triangle, Triange Inverted, Zig Zag, Zipper
none
Related Posts Section Swatch Choose a color swatch for the related posts section below post content swatch-red-white
Related Posts Decoration Choose a style to use as the Related Posts decoration.
options : No Decoration, Arrow, Circle, Clouds, Cross, Curtain, Left Slope, Right Slope, Lines, Rounded, Rounded Inverted, Triangle, Triange Inverted, Zig Zag, Zipper
none
Related Posts Swatch Choose a color swatch for all the related posts below post content swatch-white-red
Author Swatch Choose a color swatch for the author bio section swatch-white-red
Author Decoration Choose a style to use as the Author's Page decoration.
options : No Decoration, Arrow, Circle, Clouds, Cross, Curtain, Left Slope, Right Slope, Lines, Rounded, Rounded Inverted, Triangle, Triange Inverted, Zig Zag, Zipper
none
Search Result Swatch Choose a color swatch for the search result section swatch-white-red
Search Result Decoration Choose a style to use as the search result page decoration.
options : No Decoration, Arrow, Circle, Clouds, Cross, Curtain, Left Slope, Right Slope, Lines, Rounded, Rounded Inverted, Triangle, Triange Inverted, Zig Zag, Zipper

Flexslider Options

Slideshow

Setup your global default flexslider options.

Name Description Default
Animation style Select how your slider animates
options : Slide, Fade
slide
Direction Select the direction your slider slides
options : Horizontal, Vertical
horizontal
Speed Set the speed of the slideshow cycling, in milliseconds 7000
Duration Set the speed of animations 600
Auto start Start slideshow automatically
options : On, Off
true
Show navigation arrows Shows the navigation arrows at the sides of the flexslider.
options : Hide, Show
hide
Navigation arrows type Type of the direction arrows, fancy (with bg) or simple.
options : Simple, Fancy
simple
Show controls If you choose hide the option below will be ignored
options : Hide, Show
show
Choose the place of the controls Choose the position of the navigation controls
options : Inside, Outside
inside
Choose the alignment of the controls Choose the alignment of the navigation controls
options : Center, Left, Right
center
Show tooltip Display the slide title as tooltip
options : Hide, Show
hide
Reverse Reverse the animation direction
options : On, Off
false
Animation Loop Gives the slider a seamless infinite loop
options : On, Off
true

Captions

Name Description Default
Show Captions If you choose hide the options below will be ignored
options : Hide, Show
hide
Captions Vertical Position Choose between bottom and top positioning
options : Top, Bottom
bottom
Captions Horizontal Position Choose among left, right and alternate positioning
options : Left, Right, Alternate
left

404 Page Options

If someone goes to a invalid url this 404 page will be shown. You can change the image, title, text and colour of the 404 page here.

Name Description Default
404 image Upload an image to show on your 404 page assets/images/404.png
Page Title The title that appears on your 404 page Page Not Found
Header Swatch Choose a color swatch for the 404 page swatch-red-white
Page Text The content of your 404 page The page you requested could not be found.
Page Swatch Choose a color swatch for the 404 page swatch-red-white
Page Top Decoration Choose a style to use as the top decoration.
options : No Decoration, Arrow, Circle, Clouds, Cross, Curtain, Left Slope, Right Slope, Lines, Rounded, Rounded Inverted, Triangle, Triange Inverted, Zig Zag, Zipper
none

Portfolio Page Options

Portfolio Single Page

When you click on a portfolio item you will be taken to its single page. You can change how these pages look here.

Name Description Default
Show related items Toggle the display of the related items section
options : On, Off
on
Related items title Related items title that is shown on single portfolio page above related items Related Work
Related items Swatch Swatch for the related items in single portfolio page swatch-red-white
Related items Section Decoration Choose a style to use as the top decoration.
options : No Decoration, Arrow, Circle, Clouds, Cross, Curtain, Left Slope, Right Slope, Lines, Rounded, Rounded Inverted, Triangle, Triange Inverted, Zig Zag, Zipper
none
Related items section height Choose the amount of padding added to the height of the Related items section
options : Normal, Short, Tiny
normal
Related items Shape Shape for the related items in single portfolio page
options : Circle, Square, Rectangle, Hexagon
hex
Related items Shadow
options : Show, Hide
hide

Portfolio Image Sizes

When your portfolio images are uploaded they will be automatially saved using these dimensions.

Name Description Default
Image Width Width of each portfolio item 800
Image Height Height of each portfolio item 600
Image Cropping Crop images to the exact proportions
options : Crop Images, Do not crop
on

Post Types

Some of the custom single pages ( Portfolios, Services, Staff ) can be configured to use their own special url. This helps with SEO. Set your permalinks here, save and then navigate to one of the items and you will see the url in the format below.

Name Description Default
Portfolio URL slug Choose the url you would like your portfolios to be shown on portfolio
Service URL slug Choose the url you would like your services to use our-services
Staff URL slug Choose the url you would like your staff pages to use our-team

Post Types Archive Pages

Set your post types archives pages here

Name Description Default
Portfolio Archive Page Set the archive page for the portfolio post type
Services Archive Page Set the archive page for the services post type
Staff Archive Page Set the archive page for the staff post type

Advanced Theme Options

CSS

Here you can save some custom CSS that will be loaded in the header. This will allow you to override some of the default styling of the theme.
Please ensure that the CSS added here is valid. You can copy / paste your CSS hereto validate it.

Name Description Default
Extra CSS (loaded last in the header) Add extra CSS rules to be included in all pages
Swatch CSS Loading Defines where the dynamic swatch css that is created by your swatch options is saved. If you are using a lot of swatches it is recommended to save them to a file.
options : Save swatches to files, Inject swatches in page header
head

Javascript

Here you can modify the theme advanced JS options

Name Description Default
Extra Javascript (loaded last in the header) Add extra Javascript rules to be included in all pages that will be loaded in the header. Code will be wrapped in script tags by default.

Assets

Here you can choose the type of asset files enqueued by the theme.

Name Description Default
Load Minified CSS and JS Assets Choose between minified and not minified theme CSS and Javascript files. Minified files are smaller and faster to load, while non-minified are easier to edit and mofify because they are more readable. Minified assets are enqueued by default.
options : On, Off
on

Enable Atom Meta

Here you can enable atom meta for posts author, title and date (used by search engines).

Name Description Default
Author Enable atom meta for posts author
options : On, Off
on
Title Enable atom meta for posts title
options : On, Off
on
Date Enable atom meta for posts date
options : On, Off
on

Site Fav Icon

The site Fav Icon is the icon that appears in the top corner of the browser tab, it is also used when saving bookmarks. Upload your own custom Fav Icon here, recommended resolutions are 16x16 or 32x32.

Name Description Default
Fav Icon Upload a Fav Icon for your site here assets/images/favicons/favicon.ico

Apple Icons

If someone saves a bookmark to their desktop on an Apple device this is the icon that will be used. Here you can upload the icon you would like to be used on the various Apple devices.

Name Description Default
iPhone Icon (60x60) Upload an icon to be used by iPhone as a bookmark (60 x 60 pixels) assets/images/favicons/apple-touch-icon-60x60-precomposed.png
iPhone - Apply Apple style Allow device to apply styling to the icon?
options : Allow Styling, Leave It Alone
apple-touch-icon
iPhone Retina Icon (114x114) Upload an icon to be used by iPhone Retina as a bookmark (114 x 114 pixels) assets/images/favicons/apple-touch-icon-114x114-precomposed.png
iPhone Retina - Apply Apple style Allow device to apply styling to the icon?
options : Allow Styling, Leave It Alone
apple-touch-icon
iPad Icon (72x72) Upload an icon to be used by iPad as a bookmark (72 x 72 pixels) assets/images/favicons/apple-touch-icon-72x72-precomposed.png
iPad - Apply Apple style Allow device to apply styling to the icon?
options : Allow Styling, Leave It Alone
apple-touch-icon
iPad Retina Icon (144x144) Upload an icon to be used by iPad Retina as a bookmark (144 x 144 pixels) assets/images/favicons/apple-touch-icon-144x144-precomposed.png
iPad - Apply Apple style Allow device to apply styling to the icon?
options : Allow Styling, Leave It Alone
apple-touch-icon

Mobile

Here you can configure settings targeted at mobile devices

Name Description Default
Background Videos Here you can enable section background videos for mobile. By default it is set to off in order to save bandwidth. Section background image will be displayed as a fallback
options : On, Off
off

Google Analytics

Set your Google Analytics Tracker and keep track of visitors to your site.

Name Description Default
Google Analytics Paste your google analytics code here UA-XXXXX-X

WooCommerce

General WooCommerce Page Options

Change the way your shop page looks with these options.

Name Description Default
General Shop Swatch Choose a general colour scheme to use for your WooCommerce site. swatch-white-red
General Shop Decoration Choose a decoration style to use at the top of your shop pages.
options : No Decoration, Arrow, Circle, Clouds, Cross, Curtain, Left Slope, Right Slope, Lines, Rounded, Rounded Inverted, Triangle, Triange Inverted, Zig Zag, Zipper
none

Shop Page

Change the way your shop page looks with these options.

Name Description Default
Shop Layout Layout of your shop page. Choose among right sidebar, left sidebar, fullwidth layout
options : Right Sidebar, Full Width, Left Sidebar
full-width
Shop Page Columns Number of columns to use for the products on the main shop page. 3

Checkout Sidebar

Change the way your shop page looks with these options.

Name Description Default
Checkout Slide Sidebar Swatch Choose a color swatch for the cart that slides in from the side. swatch-white-red

Product Slideshow

Setup your product page flexslider options.

Name Description Default
Animation style Select how your slider animates
options : Slide, Fade
slide
Speed Set the speed of the slideshow cycling, in milliseconds 7000
Duration Set the speed of animations 600
Auto start Start slideshow automatically
options : On, Off
true
Show navigation arrows Shows the navigation arrows at the sides of the flexslider.
options : Hide, Show
hide
Navigation arrows type Type of the direction arrows, fancy (with bg) or simple.
options : Simple, Fancy
simple
Show controls If you choose hide the option below will be ignored
options : Hide, Show, Thumbnails
thumbnails
Choose the place of the controls Choose the position of the navigation controls
options : Inside, Outside
outside
Choose the alignment of the controls Choose the alignment of the navigation controls
options : Center, Left, Right
left

Single Product Page

This section allows you to set up your social icons for single products.

Name Description Default
Show Facebook Button Show facebook share button on your single product
options : Show, Hide
show
Show Tweet Button Show tweet share button on your single product
options : Show, Hide
show
Show Google+ Button Show G+ share button on your single product
options : Show, Hide
show
Show Pinterest Button Show Pinterest share button on your single product
options : Show, Hide
show
Show LinkedIn Button Show LinkedIn share button on your single product
options : Show, Hide
show

Cart Popup

Change the way your cart popup behaves with these options.

Name Description Default
Cart Popup If you choose show, cart popup will display when you click on the cart widget
options : Hide, Show
show

Default Site Colours

Default Swatches Install

Re-install the themes default swatches here. Warning this will remove any modifications you have made to the default swatches

Name Description Default
Re-install Default Swatches This button will reinstall all the default swatches for the site.

Save all swatches

This option will re-save all your enabled swatches.

Name Description Default
Save All Swatches This button will re-save all swatches.

Default Button Colours

Set the default bootstrap button colours here. See Bootstrap docs here.

Name Description Default
Text Colour Text colour to use for the default button. #FFF
Background Colour Background colour to use for the default button. #777777
Background Hover Colour Background colour when user hovers over the default button. #8B8B8B

Warning Button Colours

Set the warning bootstrap button colours here. See Bootstrap docs here.

Name Description Default
Warning Button - Text Colour Text colour to use for the warning button. #FFFFFF
Warning Button - Background Colour Background colour to use for the warning button. #F18D38
Warning Button - Background Hover Colour Background colour when user hovers over the warning button. #E57211

Danger Button Colours

Set the danger bootstrap button colours here. See Bootstrap docs here.

Name Description Default
Danger Button - Text Colour Text colour to use for the danger button. #FFFFFF
Danger Button - Background Colour Background colour to use for the danger button. #E74C3C
Danger Button - Background Hover Colour Background colour when user hovers over the danger button. #D62C1A

Success Button Colours

Set the success bootstrap button colours here. See Bootstrap docs here.

Name Description Default
Success Button - Text Colour Text colour to use for the success button. #FFFFFF
Success Button - Background Colour Background colour to use for the success button. #427E77
Success Button - Background Hover Colour Background colour when user hovers over the success button. #305D57

Info Button Colours

Set the info bootstrap button colours here. See Bootstrap docs here.

Name Description Default
Info Button - Text Colour Text colour to use for the info button. #FFF
Info Button - Background Colour Background colour to use for the info button. #5D89AC
Info Button - Background Hover Colour Background colour when user hovers over the info button. #486F8E

Button Icon Colours

Set the colours used for icons when used in buttons.

Name Description Default
Button Icon Colour Text colour to use for icons when used inside buttons. #FFFFFF
Button Icon Background Colour Background colour to be used in fancy buttons. #FFF
Button icon Background Opacity % How see through is the overlay in percentage. 20

Overlay Colours

Set the colours used in overlay areas.

Name Description Default
Overlay Text Text colour to text inside overlay areas. #FFF
Overlay Background Colour Background colour to be used in overlay areas. #000
Overlay Background Opacity % How see through is the overlay in percentage. 80

Magnific (image lightbox) Colours

Set the colours used in overlay when an image preview is clicked.

Name Description Default
Preview Background Colour Background colour to be used in overlay areas. #FFF
Preview Background Opacity % How see through is the overlay in percentage. 95
Close Button Icon Colour Text colour to use for preview close button icon. #FFF
Close Button Icon Background Colour Background colour to be used for preview close button. #E74C3C

Portfolio Hover Colours

Set the colours used in portfolios when you hover over an item.

Name Description Default
Hover Text Text colour to use inside hover . #FFF
Hover Button Icon Colour Icon colour to use for bottom buttons shown on hover. #FFF
Hover Button Icon Background Colour Background colour to use for bottom buttons shown on hover. #E74C3C
Hover Background Colour Background colour to be used when user hovers over item. #000
Hover Background Opacity % How see through is the hover overlay in percentage. 80

Go to top button Colours

Set the colours used in go to top button that appears on scrolling a page.

Name Description Default
Button Icon Colour Icon colour to use for go to top button. #FFF
Button Background Colour Background colour to use for go to top button. #E32F1C
Button Background Opacity % How see through is the go to top button in percentage. 100

Loader Colours

Set the colours of the loader.

Name Description Default
Loader Colour Color of the loader #ffffff
Loader background Background colour of the loader. #e74c3c

Typography Settings

Fonts settings section

Setup Fonts settings here.

Name Description Default
Font Stack:

Fonts

Google Fonts

Name Description Default
Fetch Google Fonts Click this button to fetch the latest fonts from Google and update your Google Fonts list.

TypeKit Fonts

If you have a TypeKit account and would like to use it in your site. Enter your TypeKit API key below and then click the Update your kits button.

Name Description Default
Typekit API Token Add your typekit api token here
TypeKit Kits Click this button to update your typography list with the kits available from your TypeKit account.