# Karma Wordpress Theme Documentation

###### A Premium WordPress Theme by TrueThemes

## Thank You

First and foremost we want to give a huge thank you for purchasing this theme. We truly appreciate your support!

As a TrueThemes customer you now have full access to our amazing support services. We highly encourage you to watch the Training Videos before proceeding any further. The Training Videos are super helpful and will walk you through every single aspect of setting up and using your awesome new theme.

Watch the Training Videos →

## Wordpress Optimization

This section provides you with instructions for optimizing your Wordpress installation. These steps are not required, however we highly recommend them.

### Modify Upload Path

Modifying your upload path is a very beneficial modification. It keeps things nice and tidy and makes it much easier should you ever have to move your website and locate files in the future.

1. Log into your Wordpress Dashboard.
2. Click on `Settings > Media`.
3. Scroll to the bottom and un-check the box labeled "Organize my uploads into month- and year-based folders"
4. Save Changes.

### Update Permalink Structure

This will give you SEO-friendly page links.

1. Log into your Wordpress Dashboard.
2. Click on `Settings > Permalinks`.
3. Choose `Custom Structure` and type `/%postname%` into the provided field.
4. Save Changes.

## Theme Installation

### Please follow these steps to install your new Wordpress Theme:

1. Download the ZIP package from Themeforest and Unzip it.
2. Within the unzipped folder you will see a file named `Karma.zip` - this is the actual Wordpress Theme.
3. Log into your Wordpress Dashboard and click on `Appearance > Themes`.
4. Next click on `Install Themes` then click on `Upload`.
5. Click `Browse` then locate the file named `Karma.zip` and click `Install Now`.
6. After the theme has installed click on `Activate Theme` and you are all set! Your new theme is now installed!

## Site Options Panel

This theme comes with a very powerful Site Options panel. After the theme is installed you can access this panel by logging into the Wordpress dashboard and clicking on `Appearance > Site Options`. All options are very self explanitory and are covered in detail in the instructional Training Videos.

## Menus and Navigation

You can access the Menu control panel by clicking on `Appearance > Menus`. Full details are also covered in the Training Videos.

### Main Menu, Footer Menu & Top Menu Setup:

1. Log into your Wordpress dashboard and click on `Appearance > Menus`.
2. Enter a Name for your Menu and click on `Create Menu`.
3. Add Pages to your menu by checking off the check boxes and hitting `Add to Menu`
4. To re-order the pages of your menu items simply drag and drop them into place.
5. After your menu is completed hit `Save Menu`.
6. After Your menu is saved you'll need to choose your navigation from the dropdown list under the 'Theme Locations' section.
7. Hit save and you are all complete. Your menu is now setup.

## Install Premium Plugins

Karma comes with 3rd-party premium plugins as well as a list of recommended plugins to improve your website experience completely free of charge. To install these plugins simply click on 'Appearance > Install Plugins' and follow the on-screen instructions. You can also visit the LayerSlider section of this documentation for additional information.

## Page Setup

### Overview:

Karma offers a variety of different page templates for all of your website needs. All page templates within the theme are fully interchangeable and can be used for any area of your website. We've eliminated the need for "page-specific templates" by adding the ability to add a Slider or Contact form to every page template. For example, if you'd like for your Homepage to have a Sidebar and a jQuery-1 Slider, you will simply create a new page and choose the "Right Sidebar" or "Left Sidebar" page template. You will then use Karma's "Slider Settings" box on the page editing screen to define a slider for that page. For more details about Slider setup please visit the Karma jQuery Sliders section of this documentation.

### Available Page Templates:

- `Default Template:` This is "locked in" by Wordpress and is similar to a full width page template. We encourage against using this template.
- `Blank Canvas:` Great for home pages or landing pages. This is a full width template which strips out the utility bar/search box, etc. It's literally a completely empty content area ready for awesomeness.
- `Blog:` Standard Blog page.
- `Contact (Google Map):` This is a full width page template which has a full-width Google map under the header area of the page.
- `Contact (iPhone):` This is similar to a Right Sidebar page template. It's got a widget-ready sidebar which has an iPhone background for some really nice visual appeal.
- `Filterable Gallery:` Perfect for image galleries or portfolios. This is a full width page template that will pull in Gallery Posts and "auto-magically" add some awesome filtering and animation.
- `Full Width:` Standard full width page template.
- `Left Nav:` Great for "content pages" such as a "company" section within your site. This page template will automatically pull in child pages of the current section and display them in a beautiful left-sub-navigation. You can also create a Custom Menu under 'Appearance > Menus' and display it on your left-nav-template instead.
- `Left Nav + Sidebar:` Same as Left Nav template but this one's also got a Right Sidebar.
- `Left Sidebar:` Standard Left Sidebar page template.
- `Right Nav:` Same as Left Nav template but this nab is displayed on the right.
- `Right Nav + Sidebar:` Same as above but this one's also got a Left Sidebar.
- `Right Sidebar:` Standard Right Sidebar page template.
- `Sitemap:` This page template "auto-magically" pulls in all pages on your website and organizes them into a beautiful Sitemap. Simply create the page, choose this template and you're done. (any content inputted into Wordpress' WYSIWYG editor will not display on this page)
- `Sitemap 2:` Another great option for Sitemaps. This one's also got a widget-ready sidebar and a few customization options so don't forget to visit the following areas if using this template: `Appearance > Widgets' and 'Appearance > Site Options > Utility Pages`

## Blog Setup

Setting up your Blog section is a very straightforward process. It simply entails creating a new page, choosing the proper page template and pointing Wordpress to your new Blog page. Full details are also covered in the Training Videos.

### Creating the Blog page:

1. Log into your Wordpress Dashboard.
2. Click on `Pages > Add New`.
3. Give your Page a title and choose the `Blog` page template.
4. Save and rejoice! :)

### Pointing Wordpress to your Blog page:

1. Log into your Wordpress Dashboard.
2. Click on `Settings > Reading`.
3. Choose the radio button labeled `A static page (select below)` .
4. Choose your Homepage for `Front Page`, and choose your Blog page for `Posts Page`.
5. All done. Your Blog is now fully functional.
6. You can visit the Site Options Panel for further Blog customizing. `Appearance > Site Options`

## Gallery

### Create Gallery Posts:

- Karma has a custom post type called "Gallery Posts". All available options are clearly described on the Gallery Posts editing screen.
- To create a post simply click on `Gallery Posts > Add New` and follow the on-screen instructions.
- The most important thing to make note of is the Category that you assign to your post. Full details are listed below:

### Filtering Categories

- A "filtering category" is the category displayed in the small menu at the top of a Gallery Page. When your visitors click one of these categories the Posts below will animate to only display posts within that category.
- Assigning the categories works just like a normal Wordpress post so no new learning curve here.
- There is one important difference: Each Gallery Post must be saved into a Child Category. This will enable you to choose it's Parent Category when configuring the actual gallery page.

### Here's an example:

- Let's say we want to create a Gallery Page which has 3 filtering categories: Web, Print, Video
- We will need to house these 3 categories under a Parent Category so that we can properly configure our gallery page. These categories look something like this:
- Work Posts <----- Parent Category
- Web
- Print
- Video
- Organizing them like this will enable us to choose "Work Posts" when creating our Gallery page and the Gallery page will then automatically display posts within Web, Print and Video.
- Please note that the name of the Parent Category never gets displayed on the front end of your website.
- Confused by Parent/Child Categories? A quick search on Google for "wordpress parent/child categories" will take the bacon.

### Configure Gallery Page:

- Configuring the Gallery page is a very straightforward process. You can have an unlimited amount of Gallery pages all displaying their own unique content.
- To create a Gallery page simply do as normal and click on `Pages > Add New`
- On the right side of the screen within the `Page Attributes` section choose `Filterable Gallery` for the page template.
- Scroll down the page a bit and under the Wordpress Content Editor you will see Karma's "Gallery Settings" options. This is where you configure the page as per your desired layout, image frame style, etc.
- All items are very self explanatory however the most important part of this section is choosing the proper category to pull from. Using the example above we would choose the "Work Posts" category and our gallery would display posts from Web, Print and Video.

## Karma jQuery Sliders

Karma comes with 3 custom jQuery sliders that are all powered by the very popular FlexSlider Plugin. You can create an unlimited amount of sliders, all with unique content, and display them on any of the page templates. The first step is to create the Slider Posts that you plan to display within the slider. Full details outlined below.

### Create Slider Posts

- Karma has a custom post type called "Slider Posts". All available options are clearly described on the Slider Posts editing screen.
- To create a post simply click on `Slider Posts > Add New` and follow the on-screen instructions.
- Just make note of the Category you've saved your posts in so that you can properly display them on the page of your choice. Note: Parent/Child categories are not required for Slider Posts.

### Add a Slider to any page

- Once you've finished creating your Slider Posts you are now ready to add them to a Slider on your desired page.
- Edit your desired page just as you normally would. Click on `Pages` and then hover over the desired page and clicking `Edit`.
- Once the Page Editing Screen scroll down and you will see a `Slider Settings` box located the Wordpress WYSIWYG Editor. All options are very self explanatory. Choose your desired slider type (Karma jQuery 1, Karma jQuery 2 or Karma jQuery 3), then use the on-screen instructions to customize your slider.

## Premium Sliders

### 3D CU3ER Slider

The 3D sliders in this theme are powered by the amazing new CU3ER v1. Slider setup is covered in full detail in the online Training Videos.

3D Slider plugin

The folks at CU3ER did an amazing job with their 3D plugin. This plugin will allow you to easily create, modify and insert an unlimited amount of sliders on your website. You can download the plugin here.

$10 Discount Promo Code

As a TrueThemes customer you are entitled to a $10 discount off the CU3ER Pro License. This License will enable you to remove all CU3ER branding from your 3D sliders as well as give you full access to the online CU3ER cManager tool.

Click here to purchase a CU3ER Pro License ← $10 Discount Promo Code: KARMAPROMO10

### Layer Slider

Karma saves you money by including the very popular LayerSlider and Revolution Sliders completely free of charge.

- To install these premium plugins simply click on `Appearance > Install Plugins`.
- On this page you will be presented with a list of premium and free plugins that are ready to be installed.
- To install a plugin simply hover the item on the list and click 'Install'

Official LayerSlider Documentation:
http://www.docs.purethemes.net/sukces/layerslider/documentation/documentation.html

### Revolution Slider

To install the Revolution Slider plugin simply follow the instructions as outlines above in the LayerSlider section.

Official Revolution Slider Video documentation:
http://www.themepunch.com/codecanyon/revolution_wp/liveguide/01.video.html

## Shortcodes

This theme comes with over 100 built-in shortcodes. To insert a Shortcode simply edit the page or post you wish to modify, and click on the Shortcode Manager button located directly in the Wordpress WYSIWYG editor. Instructions are listed within each Shortcode Panel. Full details are also covered in the Training Videos.

### Homepage Layouts

Homepage Layout 3 Columns + Images

    [callout1]
    Callout Content goes here...
    [/callout1]
    [one_third]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="three_col_large"]
    Content goes here...
    [/one_third]
    [one_third]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="three_col_large"]
    Content goes here...
    [/one_third]
    [one_third_last]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="three_col_large"]
    Content goes here...
    [/one_third_last]

Homepage Layout 4 Columns + Images

    [callout1]
    Callout Content goes here...
    [/callout1]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth]
    [one_fourth_last]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth_last]

Homepage Layout Video Left

    [video_left]
    [video_frame]
    [iframe url="URL to video here..." width="572" height="312"]
    [/video_frame]
    [video_text]
    [h2]Title goes here...[/h2]
    Content goes here...
    [/video_text]
    [/video_left]
    [callout1]
    Callout Content goes here...
    [/callout1]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth]
    [one_fourth_last]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth_last]

Homepage Layout Video Right

    [video_right]
    [video_frame]
    [iframe url="URL to video here..." width="572" height="312"]
    [/video_frame]
    [video_text]
    [h2]Title goes here...[/h2]
    Content goes here...
    [/video_text]
    [/video_right]
    [callout1]
    Callout Content goes here...
    [/callout1]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth]
    [one_fourth_last]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth_last]

### Columns

Two Columns

    [one_half]
    Content goes here...
    [/one_half]
    [one_half_last]
    Content goes here...
    [/one_half_last]

Three Columns

    [one_third]
    Content goes here...
    [/one_third]
    [one_third]
    Content goes here...
    [/one_third]
    [one_third_last]
    Content goes here...
    [/one_third_last]

Four Columns

    [one_fourth]
    Content goes here...
    [/one_fourth]
    [one_fourth]
    Content goes here...
    [/one_fourth]
    [one_fourth]
    Content goes here...
    [/one_fourth]
    [one_fourth_last]
    Content goes here...
    [/one_fourth_last]

Five Columns

    [one_fifth]
    Content goes here...
    [/one_fifth]
    [one_fifth]
    Content goes here...
    [/one_fifth]
    [one_fifth]
    Content goes here...
    [/one_fifth]
    [one_fifth]
    Content goes here...
    [/one_fifth]
    [one_fifth_last]
    Content goes here...
    [/one_fifth_last]

Six Columns

    [one_sixth]
    Content goes here...
    [/one_sixth]
    [one_sixth]
    Content goes here...
    [/one_sixth]
    [one_sixth]
    Content goes here...
    [/one_sixth]
    [one_sixth]
    Content goes here...
    [/one_sixth]
    [one_sixth]
    Content goes here...
    [/one_sixth]
    [one_sixth_last]
    Content goes here...
    [/one_sixth_last]

One Fourth and Three Fourth Column Layout

    [one_fourth]
    Content goes here...
    [/one_fourth]
    [three_fourth_last]
    Content goes here...
    [/three_fourth_last]

Three Fourth and One Fourth Column Layout

    [three_fourth]
    Content goes here...
    [/three_fourth]
    [one_fourth_last]
    Content goes here...
    [/one_fourth_last]

Two Third and One Third Column Layout

    [two_thirds]
    Content goes here...
    [/two_thirds]
    [one_third_last]
    Content goes here...
    [/one_third_last]

One Third and Two Third Column Layout

    [one_third]
    Content goes here...
    [/one_third]
    [two_thirds_last]
    Content goes here...
    [/two_thirds_last]

### Columns and Images/Lightboxes

Full Width - Two Column + Images

    [one_half]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" float="" lightbox="" lightbox_group=""  size="two_col_large"]
    Content goes here...
    [/one_half]
    [one_half_last]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="two_col_large"]
    Content goes here...
    [/one_half_last]

Full Width - Three Column + Images

    [one_third]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="three_col_large"]
    Content goes here...
    [/one_third]
    [one_third]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="three_col_large"]
    Content goes here...
    [/one_third]
    [one_third_last]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="three_col_large"]
    Content goes here...
    [/one_third_last]

Full Width - Three Column + Portrait Images

    [one_third]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="portrait_thumb"]
    Content goes here...
    [/one_third]
    [one_third]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="portrait_thumb"]
    Content goes here...
    [/one_third]
    [one_third_last]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="portrait_thumb"]
    Content goes here...
    [/one_third_last]

Full Width - Four Column + Images

    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth]
    [one_fourth_last]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]
    Content goes here...
    [/one_fourth_last]

Side Nav - Two Column + Images

    [one_half]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="two_col_small"]
    Content goes here...
    [/one_half]
    [one_half_last]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="two_col_small"]
    Content goes here...
    [/one_half_last]

Side Nav - Three Column + Images

    [one_third]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="three_col_small"]
    Content goes here...
    [/one_third]
    [one_third]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="three_col_small"]
    Content goes here...
    [/one_third]
    [one_third_last]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="three_col_small"]
    Content goes here...
    [/one_third_last]

Side Nav - Four Column + Images

    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_small"]
    Content goes here...
    [/one_fourth]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_small"]
    Content goes here...
    [/one_fourth]
    [one_fourth]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_small"]
    Content goes here...
    [/one_fourth]
    [one_fourth_last]
    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_small"]
    Content goes here...
    [/one_fourth_last]

### Various Shortcodes

Business Contact

    [business_contact phone_number="" skype_username="" skype_label="Skype" email_address="" directions_url="" directions_label="get driving directions"]

FontAwesome Icon

    [tt_vector icon="" size="fa-3x" border="false" pull="" color=""]

FontAwesome IconBox

    [tt_vector_box icon="" size="fa-4x" color="" link_to_page="" target="" description=""]
    <h3>Title here</h3>
    ...content here...
    [/tt_vector_box]

Social Icons - Vector

    [social style="vector" show_title="true" rss="" twitter="" facebook="" email="" flickr="" youtube="" linkedin="" pinterest="" foursquare="" delicious="" digg="" google="" dribbble="" skype="" rss_title="RSS" twitter_title="Twitter" facebook_title="Facebook" email_title="Email" flickr_title="Flickr" youtube_title="YouTube" linkedin_title="Linkedin" pinterest_title="Pinterest" foursquare_title="FourSquare" delicious_title="Delicious" digg_title="Digg" google_title="Google +" dribbble_title="Dribbble" skype_title="Skype"]

Social Icons - Vector Color

    [social style="vector_color" show_title="true" rss="" twitter="" facebook="" email="" flickr="" youtube="" linkedin="" pinterest="" foursquare="" delicious="" digg="" google="" dribbble="" skype="" rss_title="RSS" twitter_title="Twitter" facebook_title="Facebook" email_title="Email" flickr_title="Flickr" youtube_title="YouTube" linkedin_title="Linkedin" pinterest_title="Pinterest" foursquare_title="FourSquare" delicious_title="Delicious" digg_title="Digg" google_title="Google +" dribbble_title="Dribbble" skype_title="Skype"]

Latest Tweets

    [latest_tweets user="your_user_name_here" num="3"]

Related Posts

    [related_posts limit="5" title="Related Posts"]

Single Accordion

    [accordion class='accord1']
    [slide name="title1"]slide content 1[/slide]
    [slide name="title2"]slide content 2[/slide]
    [slide name="title3"]slide content 3[/slide]
    [/accordion]

Multiple Accordion

    [accordion class='accord1' active='1']
    [slide name="Accordion 1 title 1"]You can make this slide open by default by using active='1'[/slide]
    [slide name="title 2"]slide content 2[/slide]
    [slide name="title 3"]slide content 3[/slide]
    [/accordion]
    [accordion class='accord2' active='2']
    [slide name="Accordion 2 title 1"]slide content 1[/slide]
    [slide name="title 2"]You can make this slide open by default by using active='2'[/slide]
    [slide name="title 3"]slide content 3[/slide]
    [/accordion]

Tabs

    [tabset tab1="tab 1 title" tab2="tab 2 title"]
    [tab]tab 1 content[/tab]
    [tab]tab 2 content[/tab]
    [/tabset]

Testimonials

    [testimonial_wrap]
    [testimonial]Content goes here...
    [client_name]John Doe, Company Name[/client_name]
    [/testimonial]
    [testimonial]Content goes here...
    [client_name]John Doe, Company Name[/client_name]
    [/testimonial]
    [testimonial]Content goes here...
    [client_name]John Doe, Company Name[/client_name]
    [/testimonial]
    [/testimonial_wrap]

Team Members

    [team_member members_name="" members_title="" style="modern" image_path="" link_to_page="" description=""]
    <h4>John Doe, CEO</h4>
    <p>Insert Bio Here</p>
    [/team_member]

Left Video Layout

    [video_left]
    [video_frame]
    [iframe url="URL to video here..." width="572" height="312"]
    [/video_frame]
    [video_text]
    [h2]Title goes here...[/h2]
    Content goes here...
    [/video_text]
    [/video_left]

Right Video Layout

    [video_right]
    [video_frame]
    [iframe url="URL to video here..." width="572" height="312"]
    [/video_frame]
    [video_text]
    [h2]Title goes here...[/h2]
    Content goes here...
    [/video_text]
    [/video_right]

### Text Styling

Heading With Horizontal Line

    [heading_horizontal type="h6" margin_top="20px" margin_bottom="20px"]
    Text goes here...
    [/heading_horizontal]

Callout Text 1

    [callout1]
    Content goes here...
    [/callout1]

Callout Text 2

    [callout2]
    Content goes here...
    [/callout2]

Heading 1 (H1)

    [h1]
    Text goes here...
    [/h1]

Heading 2 (H2)

    [h2]
    Text goes here...
    [/h2]

Heading 3 (H3)

    [h3]
    Text goes here...
    [/h3]

Heading 4 (H4)

    [h4]
    Text goes here...
    [/h4]

Heading 5 (H5)

    [h5]
    Text goes here...
    [/h5]

Heading 6 (H6)

    [h6]
    Text goes here...
    [/h6]

### Bulleted List Shortcodes

Arrow List

    [arrow_list]
    [list_item]Item 1...[/list_item]
    [list_item]Item 2...[/list_item]
    [list_item]Item 3...[/list_item]
    [/arrow_list]

Caret List

    [caret_list]
    [list_item]Item 1...[/list_item]
    [list_item]Item 2...[/list_item]
    [list_item]Item 3...[/list_item]
    [/caret_list]

Check List

    [check_list]
    [list_item]Item 1...[/list_item]
    [list_item]Item 2...[/list_item]
    [list_item]Item 3...[/list_item]
    [/check_list]

Circle List

    [circle_list]
    [list_item]Item 1...[/list_item]
    [list_item]Item 2...[/list_item]
    [list_item]Item 3...[/list_item]
    [/circle_list]

Double Angle List

    [double_angle_list]
    [list_item]Item 1...[/list_item]
    [list_item]Item 2...[/list_item]
    [list_item]Item 3...[/list_item]
    [/double_angle_list]

Full Arrow List

    [full_arrow_list]
    [list_item]Item 1...[/list_item]
    [list_item]Item 2...[/list_item]
    [list_item]Item 3...[/list_item]
    [/full_arrow_list]

Plus List

    [plus_list]
    [list_item]Item 1...[/list_item]
    [list_item]Item 2...[/list_item]
    [list_item]Item 3...[/list_item]
    [/plus_list]

Star List

    [star_list]
    [list_item]Item 1...[/list_item]
    [list_item]Item 2...[/list_item]
    [list_item]Item 3...[/list_item]
    [/star_list]

### Callout Boxes

This is an example of a Callout Box shortcode.

    [callout font_size="13px" style="alphagreen"]
    Content goes here...
    [/callout]

### Buttons

This is an example of a Button shortcode.

    [button url="http://" target="" size="small" style="alphagreen" icon="" popup="" title=""]
    Content goes here...
    [/button]

### Notification Boxes

This is an example of a Notification Box shortcode.

    [notify_box font_size="13px" style="green"]
    Content goes here...
    [/notify_box]

### Dividers

Basic Divider.

    [hr]

Shadow Divider.

    [hr_shadow]

Top Link Divider.

    [top_link]
    text for link
    [/top_link]

### Individual Image Frames

Full width (Banner).

    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="banner_full"]

Full width (Portrait Fullsize).

    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="portrait_full"]

Full width (Portrait Thumbnail).

    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="portrait_full"]

Full width (One Half).

    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="two_col_large"]

Full width (One Third).

    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="three_col_large"]

Full width (One Fourth).

    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_large"]

Side Nav (Banner).

    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="banner_regular"]

Side Nav (One Half).

    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="two_col_small"]

Side Nav (One Third).

    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="three_col_small"]

Side Nav (One Fourth).

    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="four_col_small"]

Sidebar + Side Nav (Banner).

    [frame style="modern" image_path="" link_to_page="" target="" description="" float="" lightbox="" lightbox_group="" size="banner_small"]

### Latest Blog Posts

Default Layout (Small Thumbnails).

    [blog_posts count="4" post_category="" title="From the Blog" link_text="Read More" character_count="115" layout="default"]

Full Width - 2 Columns.

    [blog_posts count="2" post_category="" title="From the Blog" link_text="Read More" character_count="115" layout="two_col_large" style="modern"]

Full Width - 3 Columns.

    [blog_posts count="3" post_category="" title="From the Blog" link_text="Read More" character_count="115" layout="three_col_large" style="modern"]

Full Width - 4 Columns.

    [blog_posts count="4" post_category="" title="From the Blog" link_text="Read More" character_count="115" layout="four_col_large" style="modern"]

Side Nav - 2 Columns.

    [blog_posts count="2" post_category="" title="From the Blog" link_text="Read More" character_count="115" layout="two_col_small" style="modern"]

Side Nav - 3 Columns.

    [blog_posts count="3" post_category="" title="From the Blog" link_text="Read More" character_count="115" layout="three_col_small" style="modern"]

Side Nav - 4 Columns.

    [blog_posts count="4" post_category="" title="From the Blog" link_text="Read More" character_count="115" layout="four_col_small" style="modern"]

### Image Frame Shortcodes

All images within the image frames get automatically re-sized to the dimensions below.

- large banner - `922px x 201px`
  banner image for full width page templates.
- medium banner - `703px x 201px`
  banner image for the following page templates: Left Nav, Left Sidebar, Right Nav, Right Sidebar.
- small banner - `493px x 201px`
  banner image for the following page templates: Left Nav + Sidebar, Right Nav + Sidebar.
- 2 columns - `437px x 234px`
  two column layout on full width page templates.
- 2 columns small - `324px x 180px`
  two column layout on the following page templates: Left Nav, Left Sidebar, Right Nav, Right Sidebar.
- 3 columns - `275px x 145px`
  three column layout on full width page templates.
- 3 columns small - `202px x 113px`
  three column layout on the following page templates: Left Nav, Left Sidebar, Right Nav, Right Sidebar.
- 4 columns - `190px x 111px`
  four column layout on full width page templates.
- 4 columns small - `135px x 76px`
  four column layout on the following page templates: Left Nav, Left Sidebar, Right Nav, Right Sidebar.

## Sidebars

Creating Sidebars is an absolute breeze. Simply create the Sidebar, add your Widgets and assign the Sidebar to your chosen page. Full details are also covered in the Training Videos.

### Creating a new Sidebar:

1. Log into your Wordpress Dashboard.
2. Click on `Appearance > Sidebars`.
3. Click on `+ Add New Sidebar`.
4. Give your Sidebar a name and click `OK`. (note: the name of the sidebar is never displayed to your end users.)

### Adding Widgets to a Sidebar:

1. Log into your Wordpress Dashboard.
2. Click on `Appearance > Widgets`.
3. Locate the Sidebar you just created. It will be located toward the bottom right of your screen.
4. Drag your desired Widgets into your Sidebar.

### Assigning Sidebar to Page:

1. Log into your Wordpress Dashboard.
2. Click on `Pages` and edit your desired page. (please note that you must be using either a
   `Left Sidebar` or `Right Sidebar` page template.)
3. Scroll down and locate the custom meta box labeled `Sidebars`.
4. Select your Sidebar from the Dropdown list.
5. Save your page and rejoice! :)

## WooCommerce

This theme is fully compatible with the WooCommerce Plugin. This is a popular E-Commerce plugin that enables you to turn your website into a fully functional E-Commerce shop.

** Please note: We did not develop the WooCommerce Plugin so we are only available to provide support for our Wordpress Theme as it relates to the plugin. **

### Sidebars:

- This theme comes with 2 custom sidebars that are automatically displayed on all WooCommerce Pages.
- `WooCommerce Sidebar` ← This Sidebar is displayed on all default WooCommerce Pages.
- `WooCommerce - Cart + Checkout` ← This Sidebar is displayed on all WooCommerce Checkout Pages.
- The sidebars are modified and widgets are added just like any regular sidebar.
  From within the Wordpress Dashboard: `Appearance > Widgets`

### WooCommerce Resources:

- Installing WooCommerce
- WooCommerce Administration
- Official WooCommerce User Manual