Theme Options
An overview of how to all the theme options available
An overview of how to all the theme options available
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 |
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 |
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 |
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 |
Activates the Google Maps JavaScript API.
Name | Description | Default |
---|---|---|
Google Maps API key | Necessary for the Google Map shortcode. |
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 |
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 |
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 |
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
|
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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.
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 |
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. |
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 |
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 |
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 |
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 |
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 |
Set your Google Analytics Tracker and keep track of visitors to your site(UA-XXXXX-X).
Name | Description | Default |
---|---|---|
Google Analytics | Paste your google analytics code here |
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 |
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 |
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 |
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 |
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 |
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. |
This option will re-save all your enabled swatches.
Name | Description | Default |
---|---|---|
Save All Swatches | This button will re-save all swatches. |
Set the default bootstrap button colours 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 |
Set the warning bootstrap button colours 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 |
Set the danger bootstrap button colours 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 |
Set the success bootstrap button colours 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 |
Set the info bootstrap button colours 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 |
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 |
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 |
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 |
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 |
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 |
Set the colours of the loader.
Name | Description | Default |
---|---|---|
Loader Colour | Color of the loader | #ffffff |
Loader background | Background colour of the loader. | #e74c3c |
Setup Fonts settings here.
Name | Description | Default |
---|---|---|
Font Stack: |
Name | Description | Default |
---|---|---|
Fetch Google Fonts | Click this button to fetch the latest fonts from Google and update your Google Fonts list. |
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. |