20Script - All For WebMasters...

# GFXFree.Net - Download Unique Web Templates And Scripts

Created: 25/06/2013
By: bring the pixel team
Email: bringthepixel@gmail.com

Thank you for purchasing our Theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here.

We'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist. If you have a more general question relating to our themes you might consider visiting our support forum.

Thanks so much!

## Introduction

### Theme Areas

The Theme is divided into the 6 independent areas.

1. the Preheader (optional)
2. the Header
3. the Precontent
4. the Content
5. the Prefooter (optional)
6. the Footer

## Important Notes

### A Child Theme keeps your modifications safe

You will probably want to modify this theme somehow. We strongly recommend to use the Child Theme then. That way, when the parent theme is updated, your modifications are preserved. You don't have to create your own child theme, just use the one from the zipped file downloaded from ThemeForest.

Read more about Child Themes in the WordPress Codex

### Use the Help Mode when building your site

The Help Mode provides useful, context-aware tips throughout the site. The Help Mode means easier theme maintenance, less theme documentation and faster learning curve.

The Help Mode is visible only to users who have been assigned the administrator role, so regular site visitors won't see it.

You can enable/disable the Help Mode in the WordPress Admin › Appearance › Theme Options › General › Main section.

### Create unique slugs

Keep your category and tag slugs unique. This rule applies to every taxonomy: the post categories, the post tags, the work categories, the work tags, etc.
So having a post category and a work category with the name "Marketing" is OK, but their slugs must be different, like "marketing" and "marketing-works".

## Theme Installation

After unzipping the file downloaded from ThemeForest you should see the following folder structure:

- 3clicks - theme files - in case you want to upload the theme through the FTP
- 3clicks-child-theme - child theme files - in case you want to upload the child theme through the FTP
- Demo Content - demo content and theme options in XML files
- Documentation - theme documentation in the HTML format
- Licensing - theme license
- Resources - PSD files, Facebook Timeline Cover (extra!) and other resources
- 3clicks.zip - zipped theme files - in case you want to upload the theme through the WordPress admin
- 3clicks-child-theme.zip - zipped child theme files - in case you want to upload the child theme through the WordPress admin

Install the Theme as any other theme. Just make sure you upload to the 'wp-content/themes/' on your server only the 3clicks folder, not the whole pack.
If you want to know more about the installation process, check out the WordPress Codex Installing WordPress.

After activating the Theme you will see some changes in the WordPress Admin:

- The most important is the Theme Options located in the WordPress Admin › Appearance.
- You will also see a notice about available external plugins: Revolution Slider and G1 Social Icons.
  If you want to use them just follow the notice instructions.

## WooCommerce Integration

WooCommerce is a powerful FREE eCommerce plugin for WordPress.
The 3Clicks theme provides custom styles for this plugin so everything should look great out of the box.

#### How to install?

You can install the WooCommerce in the same way as any other WordPress plugin (WP Admin Panel > Plugins).
It can be also downloaded from the WooCommerce site.

#### Documentation

If you are not familiar with the WooCommerce or just don't know how to configure your shop,
you can look at the WooCommerce Documentation.

#### Demo Content

The WooCommerce comes bundled with dummy data which can be imported to instantly give you a working store with products to test the different features WooCommerce has to offer.
Read more about importing dummy data.

## WPML Integration

The WordPress Multilingual Plugin lets authors write content in different languages and translate content. It also includes advanced features for translation management and an interface for professional content translation.

### Requirements and Installation

The 3Clicks Theme v3.4+ is officialy compatible with the WPML plugin. You can purchase the WPML plugin by following our affiliate link here http://wpml.org/purchase/

The WPML is a paid plugin, so the installation process looks a little bit different - but no worries, it's still very easy.
Here's the WPML getting started guide

Once the installation process is completed, the WPML language switcher will automatically appear in the preheader theme area.

### How to set and translate main features of the theme / plugin

- Using translation management
- Translation Management & Features
- Translating URL slugs

### Translate strings coming from the theme

- How to scan strings coming from the theme?
- How to translate strings using String Translation?

## Revolution Slider

#### How to install?

The plugin is built into the theme so after theme activation you will be asked to install it.

#### Documentation

The full slider documentation is located inside the ThemeForest package, in the folder "Documentation/02 - Revolution Slider Documentation".

## G1 Social Icons

G1 Social Icons is a simple plugin that lets your users follow you via your social channels.

#### How to install?

The plugin is built into the theme so after theme activation you will be asked to install it.

#### Set Up

You can configure your icons in the WP Admin Panel > Settings > G1 Social Icons.

#### Add New Icon

To add new icon you need to use the "g1_social_icons_items" hook.
We strongly recommend to add all new icons via our child theme.
Below the child theme functions.php file showing how to use the hook to add/remove icon.
‹?php // Prevent direct script access if ( !defined( 'ABSPATH' ) ) die ( 'No direct script access allowed' ); /** * Child Theme Setup * * Always use child theme if you want to make some custom modifications. * This way theme updates will be a lot easier. */ function g1_childtheme_setup() { add_filter( 'g1_social_icons_items', 'add_remove_g1_social_icons' ); } add_action( 'after_setup_theme', 'g1_childtheme_setup' ); function add_remove_g1_social_icons ( $icons ) { $child_theme_dir = get_stylesheet_directory_uri(); // remove 'Facebook' icon unset( $icons['facebook'] ); // add new icon, let's call it 'myicon' // 'color' - defines icon background color // 'icon_dir' - defines where the folder with icon is located $icons['myicon'] = array( 'color' => '#ff0000', 'icon_dir' => $child_theme_dir . '/social-icons/' ); return $icons; }
Now, you need to add your icons to the folder you specified (via "icon_dir" parameter).
You should add icons in all sizes: 16px, 24px, 32px and 48px. Icons should be in the png format.
Your files structure should look like below.

#### Change Icons Order

The icon list interface is sortable. You can easily change an icon position just by dragging it (move mouse over a title) after/before other icon.

#### How to Update?

To update the plugin, go to the WP Admin Panel > Appearance > Install plugins,
find the "G1 Social Icons" plugin on the list and click "Update" right below it.
Notice
If you can't find the Install plugins link in the WP Admin > Appearance section, all you plugins are up to date and you don't need to update anything.

#### Shortcode & Widget

We provide with the plugin the [g1_social_icons] shortcode and widget.
Shortcode attributes:

- exclude - if you want to exclude specified icons (eg. facebook,twitter)
- include - if you want to include only specified icons (eg. facebook,twitter). Leave empty to include all
- template - you can choose between list-vertical and list-horizontal templates
- size - icon size in pixels. Allowed values: 16, 24, 32 and 48
- hide - use to hide icon elements (label,caption,icon)

Shortcode usage example:
[g1_social_icons size="32" template="list-vertical" exclude="twitter"]

## G1 Page Builder

G1 Page Builder is a plugin that lets you build your pages using intuitive graphic interface.

#### How to install?

The plugin is built into the theme so after theme activation you will be asked to install it.

#### Set Up

This plugin has no administration page, all you need to do is to go to any of your page and enable it.

#### How to Update?

To update the plugin, go to the WP Admin Panel > Appearance > Install plugins,
find the "G1 Page Builder" plugin on the list and click "Update" right below it.
Notice
If you can't find the Install plugins link in the WP Admin > Appearance section, all you plugins are up to date and you don't need to update anything.

#### Before first use

Please read this section if you start using the builder on a page that was previously created manually (with plain html and shortcodes).
Graphic interface should help you create your pages quicker and easier. You can stop thinking about shortcodes and focus on your significant content.
When you build your page from scratch using our builder, all your markup will be created correctly by the builder.
On the other hand, if you have pages created before the builder was launched, you can come across some little problems with your old markup.
Sometimes builder won't be able to recognise some elements (eg. if you made a typo with shortcode name). In this case you should check and fix your markup.
Important
After first switching to our builder, you will see the "Cancel" button. If you see any problems with your layout, please use it to return to original content. Check your markup, fix all problems and switch to the builder again.

## G1 GMaps

G1 GMaps is a plugin that lets you create beautiful google maps.
Thanks to it, you can add customized maps (color, multiple markers, show/hide map controls) wherever you want on a page.
You can add new map via shortcode, widget, page builder control or directly via page options.

#### How to install?

The plugin is built into the theme so after theme activation you will be asked to install it.

#### Set Up

This plugin has no administration page, all you need to do is to go to any of your page and enable/add it.

#### How to Update?

To update the plugin, go to the WP Admin Panel > Appearance > Install plugins,
find the "G1 GMaps" plugin on the list and click "Update" right below it.
Notice
If you can't find the Install plugins link in the WP Admin > Appearance section, all you plugins are up to date and you don't need to update anything.

#### Migration from old map

The plugin was introduced in theme version 3.3.
Your old map was migrated and now you can modify it in the WP Admin > G1 GMaps > Old map.

#### Troubleshooting

If something is not working as it should, please deactivate the G1 Gmaps plugin and let use know on support forum.
After plugin deactivation, your previous map should be available.

## Start with the DEMO Content

The Theme comes with the Demo Content which you can import from an XML file. This way you can easily check how everything works.
Keep in mind that you should perform import procedure only on a fresh | new WordPress installation.

#### Import content

1. Go to the WordPress Admin › Tools › Import
2. Click "WordPress" import system
3. Upload the "content.xml" file from the "Demo Content" folder
4. Click "Upload file and import"

If you want to know more about the content import feature, check out the WordPress Codex Importing Content

#### Import Skin (8 versions available)

1. Go to the WordPress Admin › Appearance › Theme Options › Import/Export
2. Click "Import Skin"
3. Choose a skin
4. Click "Import"

## Video Tutorials

We prepared some video tutorials to make your life a little bit easier:

- Change Single Work Template
- Set Up the Twitter Bar in the Prefooter Theme Area
- Hide the Page Title on a Sample Page
- Set Up Social Icons in the Preheader Theme Area
- CSS Custom Rules through Child Theme
- WooCommerce Overview
- Maintenace Mode
- Install the 3Clicks Theme
- Changing Map Visibility
- Update the Parent Theme
- Add A Custom Sidebar To A Sample Page
- Assign a Revolution Slider To the HomePage
- Change Works Layout
- Change Menu Style
- Change Header Layout
- Customize Google Map
- Change UI Corner Roundness

Visit Our YouTube Channel

## General setup

#### You must before anything:

- Upload your logo
- Set up the Navigation Menus
- Set up the Preheader Theme Area
- Set up the Prefooter Theme Area

## Style Setup

1. Go to the WordPress Admin › Appearance › Theme Options › Style section
   - Customize page corners style and background from the Main section
   - Customize fonts from the Fonts section
   - Set image sizes from the Image Sizes section
   - Change the preheader layout, composition, corners and customize the colors from the Preheader section
   - Customize the header colors, the logo margins, the primary navigation margins from the Header section
   - Customize the precontent layout and colors from the Precontent aection
   - Customize the content layout, composition, corners and customize the colors from the Content aection
   - Change the prefooter layout, customize the prefooter colors from the Prefooter section
   - Change the footer layout, customize the footer colors from the Footer section
2. Save

#### Use the Child Theme style.css file

Sometimes the WordPress Theme Options panel is not enough, then you should use the Child Theme style.css file. That way, when the parent theme is updated, your modifications are preserved.

1. Go to the WordPress Admin › Appearance › Editor
2. From the right side choose the "style.css"
3. Put your CSS rules into the editor
4. Update file

## Homepage & Subpages Setup

### Homepage

- Create the homepage
- Add a slider to the Precontent Theme Area
- Add some text to the Precontent Theme Area
- Hide comments
- Hide/show various page elements
- Assign some relation tags

### Customize an individual page

Not every single page must look the same. You can customize it in the following ways:

- Add a slider to the Precontent Theme Area
- Add some text to the Precontent Theme Area
- Assign a custom sidebar
- Hide comments
- Hide/show various page elements
- Assign some relation tags

## Blog Setup

### Basic Setup

These are the steps you should follow to basically set up the Blog site section:

1. Click on the "Posts" menu item from the WordPress Admin Menu
2. Add some categories | tags
3. Add some really simple posts - you will improve them later.
   (just fill in the title, provide some content, set the featured image and assign some categories | tags)
4. Create the Post Archive Page (the main Blog page)
5. Configure the default look & feel of all post categories & post tags
6. Configure the default look & feel of all single post pages
7. Add the Post Archive Page and post categories to navigation menus

### Customize an individual post

#### On a single post page

Not every single post page must look the same. You can customize it in the following ways:

- Change the template
- Assign a custom sidebar
- Customize the mediabox - a part of a template, that displays entry attachments
- Hide/show various page elements
- Assign some relation tags

## Works Setup

The Theme comes with a custom post type for works. It means, that regular blog entries are separated from works. You can notice it by looking at the main menu in the WordPress Admin. Besides the 'Posts' section, there is also the 'Works' section.

You can organize your works with work categories | tags.
Work categories | tags are built using custom taxonomy functionality, so they are separated from standard, built-in WordPress categories | tags.

### Basic Setup

These are the steps you should follow to basically set up the Works site section:

1. Click on the "Works" menu item from the WordPress Admin Menu
2. Add some work categories | tags
3. Add some really simple works - you will improve them later.
   (just fill in the title, provide some content, set the featured image and assign some work categories | tags)
4. Create the Work Archive Page
5. Configure the default look & feel of all work categories & work tags
6. Configure the default look & feel of all single work pages
7. Add the Work Archive page and work categories to navigation menus

### Customize an individual work category | work tag

Not every work category or work tag must look the same. You can customize it in the following ways:

- Change a template
- Change a number of maximum entries to display
- Assign a custom sidebar
- Hide/show various page elements

### Customize an individual work

#### On a single work page

Not every single work page must look the same. You can customize it in the following ways:

- Change the template
- Assign a custom sidebar
- Customize the mediabox - a part of a template, that displays entry attachments
- Hide/show various page elements
- Assign some relation tags

## When and how to use Post Formats

The Theme comes with a post formats support. We paid a lot of attention to each post format so all looks nicely and behaves as you might expect.

### Standard post format

#### When use it?

When other, more specific, post formats don't match.

#### How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view.
If you don't set the Featured Image, a placeholder (symbolic representation) will be used instead (lightbox doesn't apply in this case).
Both, featured image and placeholder, point to single view page.

#### How it looks and behaves in a single view?

In a single view you can use different "Media Box" options to present post attachments.
If the Featured Image is set and it's the only image attached to the post then media box has no much sense
but if you add more attachments, you can use media box option:

- List - to show all attachment as a simple list
- Featured Media - to show only the featured image as a single image
- Slider - to show all attachments as a slider
- None - to show nothing

### Image post format

#### When use it?

If an image is the most important part of your post.

#### How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view.
After clicking the image, the large version will be open in the lighbox popup.
If you don't set the Featured Image, a placeholder (symbolic representation) will be used instead (lightbox doesn't apply in this case).

#### How it looks and behaves in a single view?

The same as in the standard post format.

### Gallery post format

#### When use it?

If a set of images is the most important part of your post.

#### How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view.
After clicking the image, the whole gallery will be open in the lighbox popup.
If you don't set the Featured Image, a slider will be used.

#### How it looks and behaves in a single view?

The same as in the standard post format.

### Link post format

#### When use it?

If you want to share some information from another site.

#### How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view.
After clicking the image, you will be redirected to link url.
If you don't set the Featured Image, a placeholder (symbolic representation) will be used instead.

#### How it looks and behaves in a single view?

The same as in the standard post format.

### Video post format

#### When use it?

If a video is the most important part of your post.

#### How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view.
After clicking the image, the video will be open in the lighbox popup.
If you don't set the Featured Image, the video will be used.

#### How it looks and behaves in a single view?

The same as in the standard post format.

### Audio post format

#### When use it?

If an audio is the most important part of your post.

#### How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view.
After clicking the image, the audio will be open in the lighbox popup.
If you don't set the Featured Image, the audio will be used.

#### How it looks and behaves in a single view?

The same as in the standard post format.

### Chat post format

#### When use it?

If you want to present chat transcription.

#### How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view.
After clicking the image, you will be redirected to the post single page.
If you don't set the Featured Image, a placeholder (symbolic representation) will be used instead.

#### How it looks and behaves in a single view?

The same as in the standard post format.

### Status post format

#### When use it?

If you want to publish just a short message (similar to a Twitter status update).

#### How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view.
After clicking the image, you will be redirected to the post single page.
If you don't set the Featured Image, a placeholder (symbolic representation) will be used instead.

#### How it looks and behaves in a single view?

The same as in the standard post format.

### Quote post format

#### When use it?

If you want to quote somebody.

#### How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view.
After clicking the image, you will be redirected to the post single page.
If you don't set the Featured Image, a placeholder (symbolic representation) will be used instead.

#### How it looks and behaves in a single view?

The same as in the standard post format.

### Aside post format

#### When use it?

If you want to publish just a short note (similar to a Facebook note update).

#### How it looks and behaves in a collection view?

If you set the Featured Image for this post type, it always be used to present post in a collection view.
After clicking the image, you will be redirected to the post single page.
If you don't set the Featured Image, a placeholder (symbolic representation) will be used instead.

#### How it looks and behaves in a single view?

The same as in the standard post format.

## Feeds Setup

The Theme comes with the G1 Social Icons plugin.
It's external plugin provided with the theme so you should install it first. You'll be asked to install it right after theme activation.

These are the steps you should follow to basically set up your feeds:

- Go to the WordPress Admin › Settings › G1 Social Icons section
- Set a label, caption, link and linking strategy for desired feed
- Save changes
- To show feeds in the preheader theme area go to the WordPress Admin › Theme Options › Style › Preheader and turn on Social Icons option

## Map Setup

The Theme comes with the built-in Google Maps feature.

These are the steps you should follow to basically set up your maps:

- Go to the WordPress Admin › Theme Options › Map section
- Configure map settings (only the latitude and longitude are required)
- To show map in the prefooter theme area go to the WordPress Admin › Theme Options › Style › Prefooter and turn on Map option
- Save changes

You can also show map in the precontent theme area (eg. on contact page):

- Go to your page edition view
- Change GMap option to show in the Single Page Options metabox
- Publish

## Twitter Setup

The Theme comes with the built-in Twitter feature.

These are the steps you should follow to basically set up your tweets:

- Go to the WordPress Admin › Theme Options › Twitter section
- Configure Twitter settings (username and max tweets)
- To show tweets in the prefooter theme area go to the WordPress Admin › Theme Options › Style › Prefooter and turn on Twitter Toolbar option
- Save changes

You can also show tweets in any other theme area using our built-in G1 Twitter shortcode and widget.

## Sidebars Setup

You can add unlimited custom sidebars to the theme:

- Go to the WordPress Admin › Theme Options › Sidebars section
- Add your sidebar
- Go to the WordPress Admin › Appearance › Widgets section
- Add some widgets to the new created sidebar

## Sliders Setup

The Theme comes with a huge variety of built-in sliders:

- Awesome Revolution Slider
- Brand new Viewport, Relay and Stand Out sliders
- Well known Ken Burns slider
- Simple post attachments (images) slider
- Content slider (any html content supported)

### Setup & Use Revolution Slider

The Theme comes with the Revolution Slider plugin.
It's external plugin provided with the theme so you should install it first. You'll be asked to install it right after theme activation.

- Go to the WordPress Admin › Revolution Slider section
- Configure the slider
- Go to a page/post/work on which you want to use the slider
- Select you slider from the Slider list (located in the "Single Page Options" metabox)
- Publish

### Setup & Use Viewport, Relay, Stand Out and Ken Burns sliders

- Go to the WordPress Admin › Sliders › Add new section
- Configure the slider
- Go to a page/post/work on which you want to use the slider
- Select you slider from the Slider list (located in the "Single Page Options" metabox)
- Publish

Inline use

You can put your sliders inside your page content via shortcode: [simple_slider slider="SLIDER_ID_GOES_HERE" class="g1-primary"]

### Setup & Use post attachments slider

- Go to a page/post/work on which you want to use a slider
- Add some images to the post/page/work
- Select the Slider option from the Media Box list (located in the "Single Page Options" metabox)
- Publish

Caution:
If you want to change slider default behaviour, you can do that in the WordPress Admin › Theme Options › Sliders section.

### Setup & Use content slider

- Go to a page/post/work on which you want to use a slider
- Click [/] to open shortcode generator
- Select the html_rotator shortcode
- Chose the number of elements you want to rotate
- In the html_elements field put some html IMG tags (eg. <img src="IMAGE_PATH" />), each in new line
- Click Insert
- Publish

## Full Width Sections Setup

Since version 2.0 the 3Clicks handles full width sections. This gives you ability to build creative (parallax) pages.

### Setup

To use sections do as follows:

1. Create new page
2. Set its template to Page: Full Sections
3. Open our shortcode generator (the [/] icon in the content editor toolbar) and select section
4. Configure section parameters:
   - id - set if you want to specify an id for an HTML element.
   - class - set if you want to specify a class for an HTML element.
   - background color - section background color (eg. #ff0000 for red color).
   - background image - path to section background image (eg. /wp-content/uploads/2013/09/monster_bg_v01.png). Remember to use relative paths.
   - background repeat - set repeat-x/repeat-y to repeat horizontally/vertically, repeat for both.
   - background position - set background start alignment.
   - background attachment - set fixed and background will stay in place during page scroll.
   - background scroll - set to standard to enable parallax effect.
   - border size - top and bottom section border width (eg. 3px).
   - padding top - top section padding (eg. 10px).
   - padding bottom - bottom section padding (eg. 10px).
   - content - any text/HTML content
5. Click Insert button to add configured section into WP content editor.
6. Add another sections in the same way.

### Caution

Remember that a whole page need to be built using sections if you use the Page: Full Sections template. You shouldn't put any content outside the [section] shortcodes.

## Custom Shortcodes

The Theme comes with many custom shortcodes you can use to spice up your content.

When you're editing content in the Visual | HTML Mode, click the "[/]" icon (see image below) to open up the Shortcode Generator. This little tool provides a user friendly interface for all shortcodes and code snippets.

## Custom Wigdets

The Theme comes with some custom widgets ready to use. All custom widgets names start with prefix G1 prefix

- G1 Twitter - a widget alternative for the [twitter] shortcode
- G1 GMap - a widget alternative for the [gmap] shortcode
- G1 Contact Form - a widget alternative for the [contact_form] shortcode
- G1 Custom Pages - a widget alternative for the [custom_pages] shortcode
- G1 Related Pages - a widget alternative for the [related_pages] shortcode
- G1 Custom Posts - a widget alternative for the [custom_posts] shortcode
- G1 Popular Posts - a widget alternative for the [popular_posts] shortcode
- G1 Recent Posts - a widget alternative for the [recent_posts] shortcode
- G1 Related Posts - a widget alternative for the [related_posts] shortcode
- G1 Custom Works - a widget alternative for the [custom_works] shortcode
- G1 Popular Works - a widget alternative for the [popular_works] shortcode
- G1 Recent Works - a widget alternative for the [recent_works] shortcode
- G1 Related Works - a widget alternative for the [related_works] shortcode

## Theme Folder Structure

- css - stylesheets for the Theme
- docs - sample code examples to use in your child theme
- g1-framework - mini-framework for WordPress Themes
- images - images for the Theme
- js - javascripts for the Theme
- languages - .POT translation template file for the Theme.
  Read more about translating themes at WordPress Codex
- lib - Theme specific files
- plugins - external plugins provided with the Theme
- template-parts - Theme specific template parts

## CSS files

#### Reset Styles

The first rules in g1-screen.css file are generic reset rules. Many browser interpret the default behavior of html elements differently. By using a general reset styles, we can work round this.

#### General Styles

The main css file g1-screen.css is separated into sections:

    	1. BASE
            1.1 Reset
    		1.2 Tools

    	2. DEFAULT STYLES
    	    2.1 Typography
    		2.2 Images
    		2.3 Tables
    		2.4 Forms

    	3. ELEMENTS
    		3.1 Icons
    		3.2 Lists
    		3.3 Dropcaps
    		3.4 Buttons
    		3.5 Dividers
    		3.6 Messages
    		3.7 Quotes
    		3.8 Leads
    		3.9 Placeholders
    		3.10 Duplicators
    		3.11 Numbers
    		3.12 Frames
    		3.13 Audio Player
    		3.14 Breadcrumbs
    		3.15 Pagination
    		3.16 Heading groups
    		3.17 Boxes
    		3.18 Tables
    		3.19 Toggles
    		3.20 Tabs
    		3.21 Progress Bars
    		3.22 Progress Circles
    		3.23 Countdowns
    		3.24 Before & After
    		3.25 Carousel
    		3.26 Simple Sliders
    		3.27 Revolution Slider Customizations
    		3.28 Twitter
    		3.29 Google Maps

        4. MODULES
            4.1 Basic Entry
            4.2 Aside Post Format
            4.3 Audio Post Format
            4.4 Chat Post Format
            4.5 Image Post Format
            4.6 Gallery Post Format
            4.7 Link Post Format
            4.8 Status Post Format
            4.9 Quote Post Format
            4.10 Video Post Format
            4.11 Related Entries
            4.12 Gallery
            4.13 Galleria
            4.14 Collections
            4.15 Isotope
            4.16 Widgets
            4.17 Comments
            4.18 About Author
            4.19 Custom Fields
            4.20 Sidebars
            4.21 Side Navigation
            4.22 Mediaboxes

        5. GLOBAL LAYOUT
    		5.1 Body
    		5.2 Preheader
    		5.3 Header
    		5.4 Precontent
    		5.5 Content
    		5.6 Prefooter
    		5.7 Footer

    	6. PAGE SPECIFIC LAYOUT
            6.1 Home
    		6.2 Pages
    		6.3 Posts
    		6.4 Works
    		6.5 Search
    		6.6 404
    		6.7 Extras

    	7. Plugins
    		7.1 WPML (the WordPress Multilingual Plugin
            7.2 Sociable Plugin

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited. Sections are marked as follows:

    /* ----------------------------------------------------------------------------

    1 . SAMPLE SECTION NAME

    ----------------------------------------------------------------------------- */

## Javascripts

Except plugin files, the Theme uses:

- main.js - theme specific functions and plugins initializations
- core.compiled.js - core libraries and functions
- post-formats.js - post formats functions
- simple-sliders.js - built-in sliders definitions

The main power behind this theme is the famous javascript framework jQuery. All plugins and theme specific functionalities are based on it.

## PSD files

We've included following PSDs with the Theme:

- homepage
- global elements (like audio player)

## Sources and Credits

When creating the Theme or the preview version for ThemeForest, we've used following resources:

##### Photos, images & icons

- Photos from photodune
- Graphics from graphicriver
- Font Awesome
- Linecons Icon Set
- Simple Icons

##### Javascripts

- jQuery - Javascript framework
- jQuery Easing Plugin - advance easing options
- jQuery Metadata Plugin - extracting metadata data attribute
- jQuery Isotope - an exquisite jQuery plugin for magical layouts
- jQuery Waypoints - makes it easy to execute a function whenever you scroll to an element
- hoverIntent jQuery Plug-in - determining the user's hover intent
- html5shiv - HTML5 IE enabling script
- jPlayer - The jQuery HTML5 Audio / Video Library
- jQuery Rangeinput @ jQuery TOOLS - HTML5 range input for humans
- Respond.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
- A Responsive Images approach - mimics the proposed picture element
- Breakpoints.js - fire custom events when the browser enters and/or exits specific page width
- skrollr - parallax scrolling
- jQuery carouFredSel - a circular, responsive carousel
- Galleria - image gallery
- jQuery Countdown - show a countdown to a given time
- jQuery TouchSwipe - detects single and multiple finger swipes, pinches

##### Miscellaneous

- Free, open source fonts from FontSquirrel
- Free, open source fonts from Google Fonts Directory

## Routines

### Setting Up the Logo

By default the Theme displays the site title in the Header Theme Area. You can easily change this and display the logo image instead:

1. Go to the WordPress Admin › Appearance › Theme Options › General › Branding section
2. Upload four logo images:
   1. Desktop logo - for desktop computers
   2. Desktop logo (High DPI) - for desktop computers with HDPI screens (like the Retina Screen)
   3. Mobile logo - for mobile devices
   4. Mobile logo (High DPI) - for mobile devices with HDPI screens (like the Retina Screen)
3. Click "Save Changes"

Now you can adjust the margins around the logo in the WordPress Admin › Appearance › Theme Options › Style › Header section.

### Setting Up the Navigation Menus

The Theme comes with three predefined menu locations: "Primary Navigation", "Secondary Navigation" and "Footer Navigation".
All are based on custom navigation menus functionality introduced in WordPress 3.0.

#### How to set up a Navigation Menu?

1. Go to the WordPress Admin › Appearance › Menus
2. Create a new menu.
3. Before adding menu items: make sure to configure screen options in the top-right section of the WordPress Admin. Some boxes can be hidden by default.
4. Start adding menu items from the boxes located on the left side
5. Customize menu:
   - select menu type: drop-down, tiles (metro style) or columns. Keep in mind that's only for highest menu level
   - select color. This works only for metro style menu
   - select icon. This works only for metro style menu
6. Save menu.
7. Assign menu to one of the menu locations in the "Theme Locations" box on the left side.
8. Save.

If you want to know more about custom navigation menus, check out WordPress Codex chapter Appearance Menus SubPanel

### Setting Up the Preheader

The preheader is a collapsible, widget-ready theme area above the header.

#### How to enable the Preheader?

- Go to the WordPress Admin › Appearance › Theme Options › Style › Preheader section
- From the "Composition" option select a non-empty layout.
- Select the way how you would like to open it (overlay or expand)
- Turn on/off social icons and search
- Save
- The first column will then display preheader-1 sidebar, the second column will display preheader-2 sidebar and so on. To assign some widgets to these sidebars go to the Widgets section

### Setting Up the Prefooter

The prefooter is a widget-ready theme area below the content and above the footer.

#### How to enable the Prefooter?

- Go to the WordPress Admin › Appearance › Theme Options › Style › Prefooter section
- From the "Composition" option select a non-empty layout.
- Save
- The first column will then display preheader-1 sidebar, the second column will display preheader-2 sidebar and so on. To assign some widgets to these sidebars go to the Widgets section

### Setting Up the Homepage

By default WordPress displays latest blog entries on the homepage. Of course you can change it easily.

#### How to create a static home page?

1. Add new page in WordPress Admin › Pages › Add New
2. Go to the WordPress Admin › Appearance › Theme Options › Pages section
3. Select your previously created page from the "Home Page" dropdown menu
4. Save

#### How to create a home page similar to the ones from the preview installation of the Theme?

1. When editing the home page content open up the Shortcode Generator by clicking on the "[/]" icon.
2. From the "Select Item" dropdown menu select one of the predefined snippets under the " HOME PAGE SNIPPETS" group.
3. Insert it into the editor.
4. Save

Probably you will want to add this page to the Navigation Menus

### Hide Comments on a Page

#### When editing a page:

1. Make sure "Discussion" box is visible: configure your screen options in the top-right section of the WordPress Admin. Sometimes this box can be hidden.
2. Uncheck "Allow comments" and "Allow trackbacks and pingbacks on this page".
3. Save changes

### Setting Up the Post Archive Page (Blog Page)

1. After creating a regular page with whichever template, go to the WordPress Admin › Appearance › Theme Options › Posts › Posts Archive Page section
2. Select this page from the "Archive Page" dropdown
3. Choose the template ( previous page template will be ignored ), decide which elements should be hidden or shown by default, etc.
4. Save

From now on, this page will display all posts. Also it will be added to the breadcrumbs navigation when appropriate.

Probably you will want to add this page to the Navigation Menus

### Setting Up the Work Archive Page

1. After creating a regular page with whichever template, go to the WordPress Admin › Appearance › Theme Options › Works › Works Archive Page section
2. Select this page from the "Archive Page" dropdown
3. Choose the template ( previous page template will be ignored ), decide which elements should be hidden or shown by default, etc.
4. Save

From now on, this page will display all works. Also it will be added to the breadcrumbs navigation when appropriate.

Probably you will want to add this page to the Navigation Menus

### Configure the default look & feel of category | tag pages

1. Go to the WordPress Admin › Appearance › Theme Options
2. Select the "Posts" or "Works" section and then click on the "Archive Page" section
3. Choose the default template, decide which elements should be hidden or shown by default, etc.
4. Save

From now on, all category | tag pages will inherit those default values. Keep in mind, that you can still override some values for an individual category | tag page. You can do it, while editing a category | tag.

### Configure the default look & feel of single entry pages

1. Go to the WordPress Admin › Appearance › Theme Options
2. Select the "Posts" or "Works" section and then click on the "Posts/Works Single Page" section
3. Choose the default template, decide which elements should be hidden or shown by default, etc.
4. Save

From now on, all single entry pages will inherit those default values. Keep in mind, that you can still override some values for an individual entry. You can do it, while editing an entry.

### Add a slider to the Precontent Theme Area

The precontent is a theme area below the header and above the content.

#### How to add a simple slider?

1. Go to the WordPress Admin › Sliders
2. Create a new slider (remember about filling in the title and adding some slides)
3. Now go to the edit screen of your chosen page and scroll down to the "Single Page Elements" metabox
4. Choose your previously created slider from the "Slider" dropdown menu
5. Save changes

#### How to add a Revolution Slider?

1. Go to the WordPress Admin › Revolution Slider (keep in mind that Revolution Slider plugin must be activated)
2. Create a new Revolution Slider
3. Now go to the edit screen of your chosen page and scroll down to the "Single Page Elements" metabox
4. Choose your previously created slider from the "Slider" dropdown menu
5. Save changes

### Add some text to the Precontent Theme Area

The precontent is a theme area below the header and above the content.

#### How to add some text?

1. Go to the edit screen of your chosen page
2. In the content editor, wrap some text with the [precontent] shortcode
3. Save changes

### Change the template of a single entry | category | tag page

1. Go to the edit screen of a single entry, a category or a tag
2. From the "Template" option click the image which symbolizes your desired template
3. Save

### Assign a custom sidebar to a single entry | category | tag page

1. Go to the WordPress Admin › Appearance › Theme Options › Sidebars
2. Create a new sidebar. The Sidebar name can only consist of: lowercase letters, digits, underscores and hyphens.
3. Save
4. Go to the WordPress Admin › Appearance › Widgets and add some widgets to this sidebar
5. Then, when editing a single entry, a category or a tag, select this newly created sidebar from the "Primary sidebar" dropdown
6. Save

### Change a number of maximum entries to display on a category | tag page

1. Go to the edit screen of a category or a tag
2. Fill in the "Entries per page" option with your desired number
3. Save

### Customize the media box on a single entry page

The media box is a part of a template, that displays entry attachments. The following media boxes are available:

- List - displays image & audio attachments.
- Featured media - displays only featured image.
- Slider - displays only image attachments.
- None - displays nothing

#### You can customize the media box in the following way:

1. Go to the edit screen of a single entry
2. From the "Media box" dropdown, select your desired choice
3. Save

### Hide/show various elements on a single entry | category | tag page

1. Go to the edit screen of a single entry | category | tag page
2. From the available dropdowns, select "hide" for all elements you want to definitely hide
3. And select "show" for all elements you want to definitely show
4. Save

Keep in mind that you should do it only for unusual entries | categories | tags. For all the other ones most of the available options should be leaved to their default (inherited) value.

### Managing Relation Tags

The relation tags are not displayed anywhere - use them to relate different content (posts, pages, etc.), so that you can benefit from special shortcodes ([related_posts], [related_pages], etc.) or widgets.

It is strongly advised to prepend every relation tag with the r- prefix, to clearly differentiate these tags, thus keep their slugs unique.

The relation tags are built using custom taxonomy functionality, so they are separated from the standard WordPress tags.

#### Here is a sample usage:

1. Assign the r-home tag to your home page.
2. Assign the r-home tag to some blog posts.
3. Insert the [related_posts] shortcode into the content editor, when editing the home page.
4. Save changes and all related posts will be on your home page.

## Design Audits

Our support includes more than just a regular help with configuration. We want you to be proud of the final result, so when you think your site is ready, stop for a while and aks our designer what he thinks about it. It's completely free for you and the only thing you can lose is a total satisfaction.

### 01. Who

Michael, our designer. You bought the theme desgined by him so who may be more appropriate for this task!

### 02. What

We'll review the entire page and make a suggestion what can be improved.

### 03. When

At the end of your work - when your site is ready to be publish.