Dante WordPress Theme Documentation

Designed & Developed by Swift Ideas © 2014

Get SupportDeveloper DocumentationKnowledgebaseVideo TutorialsView ChangelogView Theme Demo

Introduction

Thank you for buying Dante! We have spent a very long time developing this theme and the framework which it is built upon. We've done our very best to make it as extensive and feature-rich as possible, while also keeping it incredibly easy and slick to use. We've also worked hard to improve the ease of customisation, and have provided a Developer Documentation reference for anyone who wishes to extend/modify the theme through a Child Theme.

Documentation Improvements

We would happily welcome feedback from you on how, if anywhere, you would like this documentation improved. If you would find anything a little bit easier and more helpful if we went into more detail, or explained something a little better - we'd be happy to hear it. We want Dante to be the best theme on the market! If you have any comments, please mail us via the form on http://www.themeforest.net/user/SwiftIdeas.

Video Tutorials

To help you better understand the theme, and for walkthroughs of certain aspects of Dante, please check out our tutorial videos:

Video Tutorials

WordPress Installation

This theme requires a working version of WordPress to already be installed on your server. If you need to install WordPress then please visit: http://wordpress.org/download/. If you need any help with the installation, please refer to the guide below:

Installing WordPress

Step By Step

Here is a brief step by step on how to install WordPress:

  1. Download and unzip the WordPress package if you haven't already.
  2. Create a database for WordPress on your web server, as well as a MySQL user who has all privileges for accessing and modifying it.
  3. Upload the WordPress files in the desired location on your web server:
    • If you want to integrate WordPress into the root of your domain (e.g. http://example.com/), move or upload all contents of the unzipped WordPress directory (but excluding the directory itself) into the root directory of your web server.
    • If you want to have your WordPress installation in its own subdirectory on your web site (e.g. http://example.com/blog/), create the blog directory on your server and upload WordPress to the directory via FTP.
    Note: If your FTP client has an option to convert file names to lower case, make sure it's disabled.
  4. Run the WordPress installation script by accessing wp-admin/install.php in a web browser.
    • If you installed WordPress in the root directory, you should visit: http://example.com/wp-admin/install.php
    • If you installed WordPress in its own subdirectory called blog, for example, you should visit: http://example.com/blog/wp-admin/install.php

Theme Installation

1) Uploading Dante

The theme files need to be uploaded before you can activate the theme for use. There are two ways you can do this, FTP upload or WordPress upload.

If you get an error saying that the stylesheet is missing, then you have uploaded the wrong folder. Please check that you are uploading the dante/dante.zip within the Theme Files folder. You may have to unzip the file that you download from ThemeForest to find this.


2) Activating Dante

Once you have uploaded the theme, you need to activate it by going to Appearance > Themes, and activate “Dante”.

Setting Up

1) Install Plugins

Now that you have activated Dante, you will see a yellow notice at the top of the screen. This notice is to let you know about the plugins that we recommend you install for use with the theme. Click 'Begin installing plugins' and install/activate the plugins one by one. You can also access this page by going to Appearance > Install Plugins.


2) WooCommerce Image Settings

You will need to set the WooCommerce image settings in order for the quality to be as high as expected. You can set these settings by going to WooCommerce > Settings. You'll then want to click the "Catalog" tab, and scroll down until you see "Image Options".

Above are the image settings which we use for our demo. We recommend you follow the same width, but you can choose your desired width/height ratio.

NOTE: If you're installing the theme on existing content, then you may need to use the Regenerate Thumbnails plugin to regenerate the images to use your newly set image sizes.


Demo Content Import (Optional)

NOTE: Before importing the demo content, make sure you have installed & activated "Contact Form 7" from within Appearance > Install Plugins, and also WooCommerce if you want the demo shop content.

Both the theme content and theme options have been provided so that you can set up the theme to look exactly like the demo in a few minutes.

Full Demo Import

We've provided the FULL demo content import file, that will allow you to replicate the demo site that we show. This file is titled "dante_demo-content.xml" and can be found within the "Demo Content" folder.


Alt Demo Import

If the Full demo import fails for you, it will likely be due to your server memory settings, which will be limiting the import. In this case, we have provided an XML file without the media included, which will should import fine 100%. You can find this file within the "/Demo Content" folder, named "dante_demo-content-alt.xml".

The Import Process

Theme Options Import

The theme options text file is to copy and paste the contents into the box provided within Theme Options, under the Import/Export sub-menu. You can find this file, named "dante_theme-options.txt" within the "Demo Content" folder.

Increase WordPress/PHP Memory Limit

If you have any issues with the import, i.e. any errors, then you'll likely need to increase the memory limit and try again. Here's a guide of how to proceed if you come across issues:

  1. Edit wp-config.php and enter the following at the bottom of the file: define('WP_MEMORY_LIMIT', '64M');
  2. If you have access to your server's PHP.ini file, then find the following line and increase the value, for example: memory_limit = 64M
  3. If you don't have access to your server's PHP.ini file, then try adding this to the bottom of the .htaccess file at the root of your WordPress site: php_value memory_limit 64M
  4. If you aren't confident enough to attempt the above yourself, or nothing has worked, then please contact your host directly - they will be able to help.

You can use the below image as reference for the setup we have on our server:

Speeding up your website

If you're looking to speed up your website, then why not super-charge it with a content delivery network. We've teamed up with MaxCDN to offer you a great deal on their CDN packages.

CLICK THROUGH THE LINK BELOW AND USE THE VOUCHER CODE "SWIFT" FOR AN EXCLUSIVE 10% DISCOUNT!



Setting it up on WordPress

Once you've signed up, all you need to do is follow this guide: http://support.maxcdn.com/pullzone/wordpress-w3-total-cache/.

Translation

Dante is 100% translation and multi-lingual ready, and we recommend that you use the very popular WPML plugin.

Multilingual WordPress

To translate the static strings, if you aren't using WPML then I recommend downloading PO Edit, from http://www.poedit.net/. Once you have installed please follow the steps below:

  1. Open the /dante/languages/ folder and duplicate the en_US.po file, then rename it to your desired language code. For example; for German you need to re-name it as de_DE.po for Spanish es_ES.po for Turkish tr_TR.po etc. You can find all the codes from this link http://codex.wordpress.org/WordPress_in_Your_Language
  2. Then you will need to open the .po file in PO Edit. Once opened, you will see all strings that needs to be translated. Type the translation of a string into the "Translation" column. Do not delete or edit "Original string" part.
  3. When you finish translating, save the file. This will create an .mo file in the same directory.
  4. Upload the new files into the languages folder of the theme /wp-content/themes/dante/languages/ and then follow this guide: http://codex.wordpress.org/Installing_WordPress_in_Your_Language#Single-Site_Installations

Send Us Your Translation!

If you translate Dante into a language that isn't included, then we'd really appreciate it if you could send it to us. This will benefit you as you won't have to re-upload it when you update the theme, and will also help out others. If you want to contact us about this, please use the form provided on the page here:

Contact Us

Posts / Blog

The Posts menu option on the left is where you add blog posts. To add a new blog post, select the Posts > Add New option from the left hand WordPress menu.

Creating A Post

Once you're on the Add New Post screen, you will then be able to set a title for the blog post, add the body content, and also provide all the meta information such as extra details and media. In the blog meta you can set the image for the thumbnail, and also the media type for the detail page.

You can use the Swift Page Builder to create the content of the item, which effectively allows you to have limitless possibilities for what you can display, and also how you can display it. If you do use the Page Builder to create the content, you will want to provide a custom excerpt (can be found in the item meta).

The item meta also contains post slider options, allowing you to set the image for the slide that will show if the item appears in a posts slider, and also the display for the caption.

Creating A Blog Page

To display your blog posts, you will then need to create a page that includes the "Blog", "Recent Posts" or "Posts Carousel" page builder asset:

The blog asset includes options such as the following, allowing you to customise the output to your liking:

NOTE: DO NOT set the posts page in Settings > Reading, as this will force your page to show the archive layout, and not follow your created page.

Portfolio

The Portfolio menu option on the left is where you add Portfolio items. To add a new portfolio item, select the Portfolio > Add New option from the left hand WordPress menu.

Creating A Portfolio Item

Once you're on the Add New Portfolio Item screen, you will then be able to set a title for the portfolio item, add the body content, and also provide all the meta information such as extra details and media. In the portfolio meta you can set the image for the thumbnail, and also the media type for the detail page.

You can add categories for each portfolio item's which act as the filters in the filtering system, and also a way to create multiple portfolio pages. You can have subcategories for filtering on a category Portfolio page, so none of the functionality is lost. When setting up categories, it is important that you name the slugs correctly. The slug of each category should be the same as the name, but all lowercase. If the category name contains spaces, then these should be represented in the slug with a '-'.

You can use the Swift Page Builder to create the content of the item, which effectively allows you to have limitless possibilities for what you can display, and also how you can display it. If you do use the Page Builder to create the content, you will want to provide a custom excerpt (can be found in the item meta).

Creating A Portfolio Page

To display your portfolio items, you will then need to create a page that includes the "Portfolio" page builder asset. The portfolio asset has the following options included, allowing you to customise the output to your liking:

Products

The Products menu option on the left is where you can add and manage products. To add a new product, select the Products > Add Product option from the left hand WordPress menu.

Adding A Product

Once you're on the Add New Product screen, you will then be able to set a title for the product item, add the description, and also provide all the data information such as price, stock status, attributes, etc.

You can add a featured image in the right column box, and above that set any other gallery images. Any images you add here will be used for the product slider images.

Creating a Variable Product

If you would like to create a product where you can select the size/colour of a product for example, then please check out the following guide:

Product Variations

Creating / Setting A Shop Page

To display your products, you will want to create a page, leave the content blank, and then set the "Shop Base Page" in WooCommerce > Settings > Pages.

If you would like to add products within a page that you create using the page builder, you can also use the Products & Products (Mini) assets.

Team

The Team menu option on the left is where you add team members. To add a new team member, select the Team > Add New option from the left hand WordPress menu.

Adding A Team Member

You will then be able to provide all the details for the team member through the team member meta box.

Displaying The Team Members

To show your team members, you will need to create a page that includes either the "Team" or "Team Carousel" page builder assets.

Clients

The Clients menu option on the left is where you add clients. To add a new client, select the Clients > Add New option from the left hand WordPress menu.

Adding A Client

You will then be able to provide an image for the client, and a link if you'd like through the client meta box.

Displaying The Clients

To display your clients, you will then need to create a page that includes either the "Clients" or "Clients (Featured)" page builder assets.

Testimonials

The Testimonials menu option on the left is where you add testimonials. To add a new testimonial, select the Testimonials > Add New option from the left hand WordPress menu.

Adding A Testimonial

You will then be able to provide the testimonial in the post content, and then the testimonial cite in the testimonial meta box.

Displaying The Testimonials

To display your testimonials, you will then need to create a page that includes either the "Testimonails", "Testimonials Carousel", or "Testimonials Slider" page builder assets.

Jobs

The Jobs menu option on the left is where you add job listings. To add a new job listing, select the Jobs > Add New option from the left hand WordPress menu.

Adding A Job

You will then be able to enter the content for the job in the post content editor.

Displaying The Jobs

To display your job listings, you will then need to create a page that includes either the "Jobs" or "Jobs Overview" page builder asset.

FAQs

The FAQS menu option on the left is where you add faqs. To add a new faq, select the FAQs > Add New option from the left hand WordPress menu.

Adding An FAQ

You will then be able to enter the question (the title of the faq), and the answer in the the post content editor. You will also need to add a topic for each faq.

Displaying The FAQs

To display your faqs, you will then need to create a page that includes the "FAQs" page builder asset.

Widget Areas

There are up to 13 widget areas that can be viewed under the Appearance > Widgets menu, eight sidebar areas, and four footer column widget areas. You can select which sidebars appear on the page through the page/post editor. The number of footer sidebars depends on the footer setup that you choose within Theme Options.

Setting Sidebars on Posts/Pages

When you create or edit a post/page/product, you have the option to override the default sidebar configuration. You can find these options in the meta options, which are visible below the content editor.

Twitter oAuth

To enable the use of Twitter widgets/assets within Dante, you will need to follow a few steps:

  1. Go to Plugins > Add New, and search for "oAuth Twitter Feed for Developers". Install and activate this plugin.
  2. Follow step 1 from the guide here to create your Twitter APP, and get the required keys/tokens – http://www.webdevdoor.com/php/authenticating-twitter-feed-timeline-oauth/
  3. Enter these keys/tokens in the Settings > Twitter Feed Auth panel within WordPress.

Child Theme

We have provided a child theme package ready for you to use if you wish to make changes to files, while keeping them through updates. The child theme is included within the main download folder, and is named "dante-child" all you need to do is upload this as well as the standard "dante" folder, and then activate the child theme in Appearance > Themes from the WordPress menu.

style.css

We've include the child theme css file ready for you to add your own styles, if you'd prefer to do it here rather than in the custom css box within the theme options. If you are adding styles here, but aren't seeing them on the front end, try adding !important to the end of the declaration. This is sometimes needed to override the dynamic css styles that are generated from the theme options customisations.

functions.php

We've also included a child theme functions.php file, which you can use to add your own php functions, or override functions from the parent theme. If you'd like to do this, make sure you check out the developers documentation for the theme.

Swift Page Builder

Overview

The Swift Page Builder (SPB) allows you to create unique and amazing pages, exactly the way you want them! The SPB is powered by shortcodes, which are embedded when you select the content elements you want, and edit them. You can see the source by going back to the classic editor, although you shouldn't ever need to do this and you should only make changes to this if you know what you're doing.



Editing Elements

To add a content element to the page, all you need to do is drag the element from the dropdown into the content area, or simply click on it to have it added automatically. You can then edit the column width (on applicable elements) by pressing the left/right arrows in the top left of the content element, and also edit the asset (the pencil), duplicate the element, or delete the element.




When you click on the edit button, you will be given the option of specifying a number of parameters based on the content element. Below is a screenshot from the edit screen of the Portfolio content element. As you can see there are a wide number of options for you to choose from.

Video Demo

Please watch the video below to get an idea of how to use the Page Builder:

Advanced Tips

The SPB includes a Blank Spacer element, which allows you to add spacing in between your content elements, to suit your needs. We decided on making this user controlled, so that there is never a case where you don't have the spacing you need.



We have added a field in most page builder assets called "extra class". This can be used to style a particular asset differently, or you can use our handy custom classes to remove default styling such as margins or paddings. Below is a list of our custom classes.

NOTE: Make sure you only enter "pb0" for example, you do not need to include the period in front of the class.

Color Customizer

The color customizer can be accessed by pressing the "Color Customizer" button within the WordPress admin bar, or through the Appearance > Themes menu. From the color customizer you can preview the themes color/skin changes as you make them.

Theme Options

The theme options can be used to customise the theme to suit your needs, including backgrounds, layouts and much more. You should take the time to go through all of these options to ensure that you are getting the most out of the theme.

Font Options



Dante allows you to use either Web Standard, Font Deck, or Google Fonts - separately for both Body & Headings text. If you are using Web Standard, or Google Fonts, then all you need to do is select the type from the button set, and then select the font family from the provided dropdowns.

FontDeck Options

If you are using Font Deck, then please follow the instructions that are provided in the description underneath the option title. You can also find the instructions here:

STEP ONE

Go to https://fontdeck.com/account, and add a website if you haven't already. If you have, then click on this website. You will then proceed to a page where you can see your font choices. In another browser tab, open up Theme Options > Font Options within your WordPress dashboard.

STEP TWO

At the bottom of the Theme Options > Font Options panel, you will find an option with a text area, with the option being named "FontDeck JS Code". In this text area paste the code that you can find from Step 1 of the FontDeck install options.




STEP THREE

In the Body/Heading sections of Theme Options > Font Options panel, you will find an option with a text area, with the option being named "Standard FontDeck Font" or "Heading FontDeck Font". In this text area paste the code that you can find from Step 2 of the FontDeck install options.

Uploading @font-face Fonts

If you would like to add your own @font-face fonts, then here are a few tips to do so. We'd recommend that you use the Font Squirrel web font generator, found here - http://www.fontsquirrel.com/tools/webfont-generator.

You'll need to upload your font files to your server via FTP, or you could upload them one by one to the WordPress Media Manager. Once you've uploaded them, you will need to reference them using the following css. You can add this to the custom css box within theme options, or within the child theme css if you are using a child theme. When you download the kit from Font Squirrel, you will find a file named "stylesheet.css" within the zipped folder. This file contains the full @font-face declaration for your uploaded font. We've placed a reference for you below:

@font-face { font-family: 'FONT_NAME'; src: url('FONT_URL.eot'); src: url('FONT_URL.eot?#iefix') format('embedded-opentype'), url('FONT_URL.woff') format('woff'), url('FONT_URL.ttf') format('truetype'), url('FONT_URL.svg#FONT_NAME') format('svg'); font-weight: normal; font-style: normal; } // BODY FONT body, h6 { font-family: "FONT_NAME", Arial, Helvetica, Tahoma, sans-serif; } // HEADINGS FONT h1, h2, h3, h4, h5, .custom-caption p, span.dropcap1, span.dropcap2, span.dropcap3, span.dropcap4, .spb_call_text, .impact-text, .impact-text-large, .testimonial-text, .header-advert, .sf-count-asset .count-number, #base-promo, .sf-countdown, .sf-icon-character, .fancy-heading h1 { font-family: "FONT_NAME", Arial, Helvetica, Tahoma, sans-serif; }

Subset/Cyrillic Google Fonts

If you would like to use Subset or Cyrillic Google Fonts, then you will need to include these manually. The code below is an example of what you would add to the custom css box within theme options, or the child theme css file:

// IMPORT THE FONT @import url(http://fonts.googleapis.com/css?family=PT+Serif&subset=latin,cyrillic); // BODY FONT body, h6 { font-family: "PT Serif", serif; } // HEADINGS FONT h1, h2, h3, h4, h5, .custom-caption p, span.dropcap1, span.dropcap2, span.dropcap3, span.dropcap4, .spb_call_text, .impact-text, .impact-text-large, .testimonial-text, .header-advert, .sf-count-asset .count-number, #base-promo, .sf-countdown, .sf-icon-character, .fancy-heading h1 { font-family: "PT Serif", serif; }

Meta Options

Dante uses meta options to allow you to upload images, provide information, and set up the way the page/post displays. You can find these below the content editor on Pages/Posts/Portfolio Items. Please spend some time exploring these, as knowing what they control will be very helpful in ensuring you are efficient with your content input. Below you can see where to find the meta options within any post type:

Swift Slider

On every page you create, you can optionally include the Swift Slider at the top of the page, with options for the number of posts to show, and what category to show posts from. You can select whether the slider pulls in posts, portfolio items, or both - the "Hybrid" option.

The Swift Slider does not require any special content to be created for it, as it is powered by posts and/or portfolio items. The Slider will use the featured image from the post/portfolio item, unless you have provided one in the meta options for that item. You can set the caption position per item, as seen below:

Revolution Slider

The theme includes the premium plugin - Revolution Slider. You can find documentation for this included within the Documentation > Revolution Slider Documentation folder.

Once you've installed and activated the Revolution Slider plugin (by going to Appearance > Install Plugins), you will then see the menu item appear at the bottom of the WordPress menu, as below:

Import Demo Revolution Slider

If you want to import our revolution slider example, you will need to run through the following steps:

  1. Install the Revolution Slider plugin (Appearance > Install Plugins)
  2. Open up the plugin from the left menu at the bottom.
  3. Press the "Import Slider" button on the right.
  4. Choose the zip file from the "Demo Content" folder of the main Dante zip download. It is named "homeslider.zip".
  5. Once you've imported the slider, you are free to change the settings and add/edit slides.

Custom Widgets

Dante includes 9 custom widgets, that you can use in the sidebars or footer area.

Swift Framework Advert Grid Widget - A custom widget to show an advert grid of up to 8 125 x 125 adverts in a single block.

Swift Framework Flickr Widget - This flickr widget shows off your flickr photos. You can get the required Flickr ID from here http://idgettr.com/.

Swift Framework InFocus Widget - A custom widget to show a focus of a single post.

Swift Framework Portfolio Grid - A custom widget to show recent portfolio items in a grid with an image and title tooltip.

Swift Framework Recent Comments - A custom widget to show recent comments.

Swift Framework Recent Portfolio - A custom widget to show recent portfolio items with an image.

Swift Framework Recent Posts - A custom widget to show recent posts with an image.

Swift Framework Tweets - A custom widget to show the latest tweets from a Twitter account.

Swift Framework Video Widget - The Video widget embeds a video from a url that you enter into the input field within the widget options. You can find out what type of video you can embed here.

Shortcode Generator

Dante includes the Swift Framework Shortcode Generator, which is a custom built feature for our themes. The generator allows you to embed shortcodes within your content quickly without having to remember the syntax. The generator allows you to select the type from the list, and provide parameters (if needed).

You can find the shortcode generator within the WordPress WYSIWYG editor. The button looks like this:

WooCommerce

We have provided compatibility pre-built into Dante for WooCommerce.

WooCommerce Customisation Options

If you go to Theme Options > WooCommerce Options you will find a whole panel of options to enable/disable and customise the way your shop works.

NOTE: You will need to edit and save each of the individual WooCommerce pages to enable the page headings.

Theme Image Sizes

Below are a list of the image sizes that the theme uses based on the different assets/locations within the theme:

Portfolio

Blog

Portfolio Detail

Blog Post

Widget Images

Button Shortcode

[sf_button colour="accent" type="standard" size="standard" link="#" target="_blank" icon="ss-erase" dropshadow="yes" extraclass="extra-class"]Button text[/sf_button]

Parameters

Chart Shortcode

[chart percentage="90" size="70" barcolour="#ff9900" trackcolour="#444" content="icon-magic" align="left"]

Parameters

Columns Shortcode

The column shortcode is used to split content into columns, and you can choose the size of each column using any of the shortcode configurations below. The last column of the row must be an "_last" shortcode, as this clears the columns for the content below.

1/2 + 1/2

[one_half]....[/one_half][one_half_last]....[/one_half_last]

1/3 + 1/3 + 1/3

[one_third]....[/one_third][one_third]....[/one_third][one_third_last]....[/one_third_last]

1/3 + 2/3

[one_third]....[/one_third][two_third_last]....[/two_third_last]

2/3 + 1/3

[two_third]....[/two_third][one_third_last]....[/one_third_last]

1/4 + 1/4 + 1/4 + 1/4

[one_fourth]....[/one_fourth][one_fourth]....[/one_fourth][one_fourth]....[/one_fourth][one_fourth_last]....[/one_fourth_last]

1/4 + 3/4

[one_fourth]....[/one_fourth][three_fourth_last]....[/three_fourth_last]

3/4 + 1/4

[three_fourth]....[/three_fourth][one_fourth_last]....[/one_fourth_last]

1/4 + 1/4 + 1/2

[one_fourth]....[/one_fourth]one_fourth]....[/one_fourth][one_half_last]....[/one_half_last]

1/4 + 1/2 + 1/4

[one_fourth]....[/one_fourth][one_half]....[/one_half][one_fourth_last]....[/one_fourth_last]

1/2 + 1/4 + 1/4

[one_half]....[/one_half][one_fourth]....[/one_fourth][one_fourth_last]....[/one_fourth_last]

Counters Shortcode

[sf_count from="0" to="100" speed="2000" refresh="25" textstyle="h3" subject="Subject"]

Parameters

Countdown Shortcode

[sf_countdown year="2014" month="10" day="15" fontsize="small" displaytext="Display Text"]

Parameters

Icons Shortcode

[icon image="ss-man" size="small" cont="yes" float="left"]

Parameters

NOTE: The color attribute was added in v2.0, and these can be set in the Color Customizer.

Icon Box Shortcode

[sf_iconbox image="fa-tachometer" type="standard" color="standard" title="Box Title" animation="fade-in" animation_delay="200"]Enter your Icon Box content here[/sf_iconbox]

Parameters

NOTE: The color attribute was added in v2.0, and these can be set in the Color Customizer.

Image Banner Shortcode

[sf_imagebanner image="image.jpg" animation="none" contentpos="left" textalign="right" extraclass="extra-class"]Enter your Image Banner content here[/sf_imagebanner]

Parameters

Labelled Pricing Table Shortcode

[labelled_pricing_table columns="3"] [lpt_label_column] [lpt_row_label alt="yes"] LABEL 0 [/lpt_row_label] [lpt_row_label] LABEL 1 [/lpt_row_label] [/lpt_label_column] [lpt_column] [lpt_price]$100/ mo.[/lpt_price] [lpt_package]Basic Package[/lpt_package] [lpt_row_label alt="yes"] LABEL 0 [/lpt_row_label] [lpt_row alt="yes"] DETAIL 0 [/lpt_row] [lpt_row_label] LABEL 1 [/lpt_row_label] [lpt_row] DETAIL 1 [/lpt_row] [lpt_button link="#" target="_self"]Buy Now[/lpt_button] [/lpt_column] [lpt_column highlight="yes"] [lpt_price]$100/ mo.[/lpt_price] [lpt_package]Basic Package[/lpt_package] [lpt_row_label alt="yes"] LABEL 0 [/lpt_row_label] [lpt_row alt="yes"] DETAIL 0 [/lpt_row] [lpt_row_label] LABEL 1 [/lpt_row_label] [lpt_row] DETAIL 1 [/lpt_row] [lpt_button link="#" target="_self"]Buy Now[/lpt_button] [/lpt_column] [/labelled_pricing_table]

Parameters

Lists Shortcode

[list] [list_item icon="ss-phonedisabled"]Item text 1[/list_item] [list_item icon="ss-phonedisabled"]Item text 2[/list_item] [list_item icon="ss-phonedisabled"]Item text 3[/list_item] [/list]

Parameters

Pricing Table Shortcode

[pricing_table type="standard" columns="2"] [pt_column] [pt_price]$100/ mo.[/pt_price] [pt_package]Basic Package[/pt_package] [pt_details]Details here [pt_button link="#" target="_self"]Buy Now[/pt_button] [/pt_details] [/pt_column] [pt_column highlight="yes"] [pt_price]$100/ mo.[/pt_price] [pt_package]Basic Package[/pt_package] [pt_details]Details here [pt_button link="#" target="_self"]Buy Now[/pt_button] [/pt_details] [/pt_column] [/pricing_table]

Parameters

Progress Bar Shortcode

[progress_bar percentage="75" name="COMPLETED" value="75%" type="" colour="#ff9900"]

Parameters

Fullscreen Video Shortcode

[sf_fullscreenvideo type="image-button" btntext="button text" imageurl="image.jpg" videourl="http://vimeo.com/78033138"]

Parameters

Responsive Visibility Shortcode

[sf_visibility class="visible-sm"] ENTER THE RESPONSIVE VISIBILITY CONTENT HERE [/sf_visibility]

Parameters

Social Shortcode

[social] [social size="large"] [social size="standard" type="twitter,vimeo,facebook"]

Parameters

Social Share Shortcode

[sf_social_share]

Parameters

There are no parameters for this shortcode.

Table Shortcode

[table type="standard_minimal"] [trow] [thcol]HEAD COL 1[/thcol] [thcol]HEAD COL 2[/thcol] [/trow] [trow] [tcol]ROW 1 COL 1[/tcol] [tcol]ROW 1 COL 2[/tcol] [/trow] [trow] [tcol]ROW 2 COL 1[/tcol] [tcol]ROW 2 COL 2[/tcol] [/trow] [/table]

Parameters

Tooltip Shortcode

[sf_tooltip link="#" direction="top" title="Tooltip text"]TEXT HERE[/sf_tooltip]

Parameters

Typography Shortcodes

[highlight]TEXT HERE[/highlight] [decorative_ampersand]TEXT HERE[/decorative_ampersand] [blockquote1]TEXT HERE[/blockquote1] [blockquote2]TEXT HERE[/blockquote2] [blockquote3]TEXT HERE[/blockquote3] [pullquote]TEXT HERE[/pullquote] [dropcap1]TEXT HERE[/dropcap1] [dropcap2]TEXT HERE[/dropcap2] [dropcap3]TEXT HERE[/dropcap3] [dropcap4]TEXT HERE[/dropcap4]

Parameters

There are no parameters for these shortcodes.

CSS Files

styles.css - The main css for the theme, which includes the layout and styling for all aspects of the theme.

bootstrap.min.css - Sleek, intuitive, and powerful front-end framework for faster and easier web development.. More info: Twitter Bootstrap.

editor-styles.css - Contains styles that are used within the content editor.

font-awesome.min.css - Font Awesome icon font. More info: Font Awesome.

responsive.css - The theme's responsive styles.

ss-gizmo.css - Symbolset Gizmo icon font. More info: Gizmo.

JavaScript Files

bootstrap.min.js - Sleek, intuitive, and powerful front-end framework for faster and easier web development.. More info: Twitter Bootstrap.

excanvas.compiled.js - Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. More info: Explorer Canvas.

functions.js - This is where all the custom magic happens. Feel free to edit any of this code, but make sure to keep a backup in case anything goes wrong!

jquery-ui-1.10.2.custom.min.js - jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. More info: http://jqueryui.com/.

jquery.carouFredSel.js - jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. More info: carouFredSel.

jquery.easing.js - A jQuery plugin from GSGD to give advanced easing options.. You can find out more here: http://gsgd.co.uk/sandbox/jquery/easing/.

jquery.elevateZoom.min.js - A jQuery image zoom plugin. You can find out more here: http://gsgd.co.uk/sandbox/jquery/easing/.

jquery.fitvids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.. You can find out more here: http://fitvidsjs.com/.

jquery.flexslider-min.js - an awesome, fully responsive jQuery slider plugin.. You can find out more here: http://www.woothemes.com/flexslider/.

jquery.infinitescroll.min.js - Infinite scroll plugin for the blog page builder asset. You can find out more here: http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/.

jquery.hoverIntent.min.js - hoverIntent is a plug-in that attempts to determine the user's intent. You can find out more here: http://cherne.net/brian/resources/jquery.hoverIntent.html.

jquery.isotope.min.js - Isotope: An exquisite jQuery plugin for magical layouts. You can find out more here: http://isotope.metafizzy.co/index.html.

respond.min.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more). You can find out more here: https://github.com/scottjehl/Respond.

sf-admin.js - jQuery for some of the admin panel functions within the theme.

theme-scripts.js - A packed scripts file for plugins that frequently used within the theme.

view.min.js - PREMIUM PLUGIN. A simple, lightweight, jQuery photo viewer for the web. You can find out more here: http://finegoodsmarket.com/view/.