“Simplo - Responsive WordPress Blog / Personal” Documentation by “Nesia”

“Simplo WordPress Theme”

Created: 15/01/2013
By: Nesia
Email: Contact us from here

Thank you for purchasing Simplo WordPress Theme! Have any questions that are beyond the scope of this documentation file, bugs or future plan? Don't hesitate, feel free to join our forum too for better support!

Introduction
Installing WordPress Theme
Setting your WordPress theme through themepanel
1. How to use dummy data provided by nesia?
Template Pages
1. How to set page as homepage
Available Widgets
CSS Files and Structure
Javascript Files and Common Plugins (Plugins that used on template)
PSD Files (master files for custom or modificatioin)
Source and Credits (Really thank you for those awesome people)

2013-02-10 - v1.0.1

Add: Options to change body, header, sidenav background color
Fix: Comment form when jetpack is active
Fix: Can't change link colour from theme panel
Fix: Proportionally resize the logo on WP Login page
Fix: Contact form sent email twice
Fix: "From" field on contact form
Fix: Update language file (.po and .mo)
Fix: Contact form when options "Send copy email" checked

2013-01-26 - v1.0

First release

A) Introduction - top

Powered by Compass (SASS) framework for stylesheet preprocessors,HTML5 Boilerplate, Font Awesome Icons for each icon and last but not least is Twitter Bootstrap framework. Yes, we build this template on top (very) rock-solid framework and that's all already inside this template, just for you!

We try to be flexible and minimalistic for placement on each page inside Simplo WordPress theme. Homepage comes with some alternative layout to choose, four homepage already inside the package, just pick one and assign it as your default homepage. With all intelligence from our designer, it looks like that this template have multiple column. Extending from widget and layout, the design for Simplo WordPress theme feel more engaging to visitors. Take a look screenshot below, pretty nice? Yeah, that's all for you.

Click to view larger image using fancybox popup

So let's go to another section on how to install Simplo WordPress theme for your site, get ready.

B) Installing WordPress Theme - top

There are two ways to install Simplo WordPress Themes for your site and we will explain each way in this section step-by-step and you will not going wrong or make mistakes if you follow these instruction. But you need to keep remind yourself, that we're not going more detail, just step to install because it's a general common approachment by using WordPress platform. Before you install please make sure you are using the latest version of WordPress and make sure that your hosting is running the latest version of PHP and MySQL.

Install via WordPress Dashboard (recommended)
Install through FTP client (you need FTP software/apps)

B1. Install via WordPress Dashboard (recommended) - back to install list

Following this instruction is easy, all you can do just login to your WordPress Dashboard. Make sure that you have level Administrator or similar to have an access to install theme or plugins. If you're allready login through your dashboard, please follow these step below.

Navigate to your WordPress menu on the left and choose Appearence, then Themes section. Theme installation page will be open.
Click Install Theme tab on top of section page.
Select or click link Upload and browse theme in zip file from folder "Theme" inside Package that you're download from us.
Ready to upload? Click Install now, then Activate theme. Please see screenshot below if you're getting confused.

Click to view larger image using fancybox popup

If these steps are done, you will see our theme name on the left menu.

B2. Install through FTP client - back to the list

Before you continue within these steps below, please make sure that you already have FTP client, which is software or apps to communicate with your server and your computer to upload files or our theme into server. If you ready, please take a look steps below.

Open up your FTP client, such as Cyberduck, Forklift, Filezilla etc.
Login to your server, input your server username, password, port then make sure that you're login to your server.
Navigate to your wordpress site folder and find your wp-content folder.
Go to Themes folder and extract our theme-name.zip. Note: find our theme-name.zip inside Theme folder from the package.
Login to your WordPress Dashboard.

How easy is that? Now you're good to go to the next step how to set up and more.

C) Setting your WordPress theme through themepanel - top

After installing our theme, by default you will be redirected to our theme panel to set up your theme, after you open our themepanel you should click the green button SAVE ALL CHANGES on the bottom of our themepanel page and wait until you see splaash screen OPTIONS UPDATED, this is important. If you have save changes for the first time, now it's time to refresh your site layout (it's not refresh page on the dashboard, but your site front-end) if your site looks good using our theme, then it's done.

Setting options through Theme Options
Sidebar manager, what is this?
Backup settings your site options using themepanel.
How to import all settings and posts with the data provided by nesia?

C1. Setting options through Theme Options - back to the list

It's time to customizing your layout now using themepanel, it's not confusing your mind, our themepanel designed to be good purpose and good functionality so you will easy to maintain and keep your site under control. This is screenshot our themepanel, take a look.

Click to view larger image using fancybox popup

The green button at the bottom, please click after you install our theme it's important. Then now please fill the form that are necessary, we recommended you fill all the form like upload your logo, upload favicon (small icon for your page title on browser tab), google analytics setting, rss url, mail subscription, contact form email, pagination etc. Image above are visualization for each option under Theme Options menu on the left on our themepanel.

That's it. It doesn't seem huge data to send into database, because we take benefit from ajax when saving your data theme setting. After input all these form, then refresh your homepage, you're good to go. Next, we take you to see Sidebar manager. What is this? Let's continue read next section.

C2. Sidebar manager, what is this? - back to the list

We build these options and commands for being useful customization via our themepanel. Useful in this case means you can create more widget area that are different from another page you have. So each of your page can be use different sidebar to display to your visitor's eyes, it's useful if you have many data to display and promote through your sidebar. Then how to use this feature and functionality into our theme? Let's take step-by-step below.

Navigate through Sidebar Manager option on the left menu on your WordPress Dashboard.
Choose what page to be have different widget sidebar (sidebar or footer), click section on the left. Let say, Contact page.
After you choose page on the left, give it a name for your new widget area. By example, name it as contact.
Choose one widget area sidebar to replace, for example choose sidebar General will replace your General sidebar.
Click Add Sidebar to confirm your new sidebar area.
Once you click Add sidebar are to confirm your new sidebar area, your list of widget area will show on the bottom.
You can remove, canceling or save setting after you make changes for current sidebar.
Click Reset Sidebar Manager will remove all widget area, see screenshot below for more detail about this steps.

Screnshot below will help you quickly to manage, create and remove sidebar area on your site.

Click to view larger image using fancybox popup

C3. Backup settings your site options using themepanel - back to the list

If you need to backup all your post data and all setting (both from theme options and sidebar manager) that are already inside your site, you can use this feature. Export in easy way, just choose All settings then Download Export Files under Export Settings. If you want to import, just browse your downloaded file before, then click Upload File and Import. That's all. So easy, huh?

C4. How to use dummy data- back to the list

To use all dummy data that we've been provided inside the package (for staging, demo to your client etc) some files is already inside the package after extracting zip file. The dummy data are located inside DUMMYDATA folder inside the package (extract it first from themeforest) and files are listed below:

import-settings.json — you can import this file through theme panel > export-import.
import-data.xml — it's standard export from wordpress, through Tools > Import and make sure WordPress Importer already installed.
import-widget.json — this one is for importing your widget like the demo. Install this plugin Widget settings export-import before import the widget content through import-widget.json and could be used for each widgets, except for the custom sidebar.

That's all. Happy crafting!

D) Template Pages - top

Well we need this theme flexible and useful for you site layout but keep 'em still minimalist and of course we've made it. These page for templates of your page are already inside, what you have to do just use it for your page. What template pages that are available to use? Let's take a look list below and how to set it up for your site.

Homepage
Contact
Archive monthly
Archive tags
Archive categories
Blog page (Standard default)

Then how to assign each page into our page? That is easy, relax. We'll show you how to do that.

Navigate to left menu, click Pages.
Then click Add New to create new page.
Write your Title for your page.
Write down your Detail information for its page.
Select Template page on the right column, what page to display.

See screenshot below to quick understanding how to create and assign page template.

Click to view larger image using fancybox popup

Then how to use those page template (such as one of homepage template) for your homepage? That would be easy to do, see steps below.

Go to your Settings page through menu on the left on your WordPress Dashboard.
Navigate to Reading menu under Settings page above.
Choose A static page option, it need to be choosen from default layout (blog layout)
Select your front page, from previously section that you've creating page with template Homepage applied.
Select your blog page, from page that have template blog applied.
Control your item to display, pinterest layout for homepage and blog layout will get affected.
Click Save Changes to apply all your settings before.

See screenshot below for quick understandi how to set your homepage and blog layout.

Click to view larger image using fancybox popup

E) Available Widgets - top

Let's dig into each widget, but remember We're not gonna explain all widget description and markup in here. Just general overview from each widget, so you can understand how to use it based on widget area structure of our layout. Here's global markup for each widget, any widget inside the template based on this structure with an "aside" container. You need to define each widget with "widget" class before widget class name.


<aside class="widget">
  <div class="widget-title">
    <h5>Widget Name Here</h5>
  </div>
  <div class="widget-inner-container">
	<!-- content here -->
  </div>
</aside>

Standard custom widget from our framework will be listed below:

Nesia twitter – Let you pull your twitter stream into widget area, both sidebar and footer area. Just type number tweet to display.
Nesia flickr – Show your photostrem on sidebar, you can define by group or by user photostream.
Nesia adspace – Ads to display, put you image path and link then you're good to go.
Nesia subscribe & connect – allow you to display more links about you and your popular social networks profile.
Nesia posts – allow you to display post by Views, Popular, Recent and Category.

Just drag your widget into widget areas on your widget dashboard to get it work within your site then refresh your page, you'll see each widget on your defined widget areas, both sidebar or footer and it will have same look, feel and style across your widget areas. Snippets below are comes from Standard widget if you using our framework, our themes. Purpose for these snippets are customizeable and flexible, so if you want to modify it you'll know what part that need to be changed. Pay attention for each class on container or wrapper and try to not ripped all of this with your class functionality, we suggest you to keep it as standard.

1. Subscribe and social accounts


<aside class="widget widget_subscribe">
  <div class="widget-title">
    <h5>The title widget in here</h5>
  </div>
  <div class="widget-inner-container">
    <p>
      Text description here
    </p>
    <form class="subscribe-form" method="post" action="" accept-charset="UTF-8"><input placeholder="Email Address" class="input-text" name="email" type="text" />
    <input value="Subscribe" class="input-button" type="submit" />
    </form>
    <ul>
      <li>
        <a href="#">Follow us on Twitter</a>
      </li>
      <li>
        <a href="#">Like our Facebook page!</a>
      </li>
      <li>
        <a href="#">Join our circle on Google plus</a>
      </li>
      <li>
        <a href="#">Streamline on Flickr</a>
      </li>
      <li>
        <a href="#">Subscribe newsletter (mailchimp)</a>
      </li>
      <li>
        <a href="#">Subscribe mail newsletter</a>
      </li>
    </ul>
  </div>
</aside>

If you want to display this widget so user could subscribe into your site, that's good. You should use this snippet, place your url account for each link inside widget and remember "widget_subscribe" class should be there on aside markup.

2. Twitter snippet markup


<aside class="widget widget_tweets">
  <div class="widget-title">
    <h5>We're Tweeting Too Dude!</h5>
  </div>
  <div class="widget-inner-container"></div>
</aside>

This widget are ready to use within site template, all you have to do just look up before </body> closing tag section on the bottom of source page document, then find var tweet. Edit the value inside, for this example we use query html5. After you done that, all your tweets will be pulled in "widget-tweets" class. Pretty simple, huh? This twitter widget powered by jTweetsAnywhere V1.3.1 you can go there to find more complete documentation.

3. Flickr photos streamline


<aside class="widget widget_flickr_list">
  <div class="widget-title">
    <h5>Flickr Stream</h5>
  </div>
  <div class="widget-inner-container"></div>
</aside>

what you need to do is just change flickrid variable before </body> closing tag section with your own ID's. And remember, in this example we use group pool that pulled data request as json format from flickr. Use Idgettr to know your Flickr ID.

4. Post list


<aside class="widget widget_post_list">
  <div class="widget-title">
    <h5>Posts list title</h5>
  </div>
  <div class="widget-inner-container">
    <ul class="list-post-type">
      <li class="large-post-type">
        <h5 class="title-item">
          <a href="#">Sample title</a>
        </h5>
        <div class="entry-item">
          <p>Some description text</p>
        </div>
        <div class="meta-item">
          <span class="item-likes">213 Likes</span>
          <a class="item-comments" href="#">8 Comments</a>
        </div>
      </li>
    </ul>
  </div>
</aside>

Standard posts list to display your blog posts with likes status and comment count on the bottom markup structure.

F) CSS Files and Structure - top

How about structure of the document, I mean CSS file? Yes here we go explain it to you. Not to forget, we use normalize.css (have been customized) for reset file, so you don't need to reset this document template with any reset css that you can find on the internet. Why we use normalize.css? Just because it's our standard and it's got effective for layout. Cross browser? Just don't worry about it.

How to change the color of this template? Easy, just override style.css on the <head> section with one those name above, then you're good to go! So let's take a look into stylesheet document, and it has to be separated so you can understand faster.


/*
 *
 * Main Stylesheet
 *  
 * ================================================================ */
/* !Start Main Stylesheet
 *
 * ================================================================ */
body {
  background-color: #333333;
  font-family: Georgia, "Times New Roman", Times, serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Times, "Times New Roman", Baskerville, Georgia, serif;
}

img {
  height: auto;
}

/* Container type
----------------------------- */
.alt-container {
  background: #F2F2F2;
}

.extra-container {
  background: #191919;
}

.bottom-container {
  color: #bbb;
  background: #111;
  border-top: 1px solid #292929;
}

.main-container {
  padding-top: 27px;
  margin-bottom: 40px;
}

/* Font Face
----------------------------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue/BebasNeue-webfont.eot");
  src: url("../fonts/bebas-neue/BebasNeue-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/bebas-neue/BebasNeue-webfont.woff") format("woff"), url("../fonts/bebas-neue/BebasNeue-webfont.ttf") format("truetype"), url("../fonts/bebas-neue/BebasNeue-webfont.svg#BebasNeueRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*==================================================================== 
  Custom Header
=================================================================== */
.custom-header {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  position: absolute;
}
.custom-header.custom-background {
  overflow: hidden;
}

/* Pattern
------------------------------------------------------------------- */
.pat-a .pattern-container {
  background-image: url(../images/pattern/pat-stripe.png);
}

.pat-noise .noise-container {
  background-image: url(../images/pattern/pat-noise.png);
}

.header-container {
  background-repeat: no-repeat;
  background-image: -webkit-gradient(radial, circle, 0, circle, 90, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(90%, rgba(0, 0, 0, 0.3)));
  background-image: -webkit-radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3) 90%);
  background-image: -moz-radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3) 90%);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.3) 90%);
}
.no-gradient .header-container {
  background-image: none;
}

/* Boxed Container
------------------------------------------------------------------- */
.outer-container {
  margin: 0 auto;
  background: #fff;
}
.boxed .outer-container {
  width: 980px;
}
@media (min-width: 1200px) {
  .boxed .outer-container {
    width: 1200px;
  }
}
@media (max-width: 979px) and (min-width: 768px) {
  .boxed .outer-container {
    width: 768px;
  }
}
@media (max-width: 767px) {
  .boxed .outer-container {
    width: 100%;
  }
}


/*==================================================================== 
  Topnav Section
=================================================================== */
.header-container {
  position: relative;
  background-color: #174789;
}
.header-container .topnav-section,
.header-container .primarynav-section,
.header-container .branding-section {
  z-index: 10;
  position: relative;
}
.header-container .topnav-section {
  z-index: 110;
}

.topnav-section {
  color: #fff;
  font-family: sans-serif;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}

/* Hide cloned topnav section for mobile device */
.topnav-section.mobilemenu {
  display: none !important;
  -webkit-transition: 0.25s all ease-in;
  -moz-transition: 0.25s all ease-in;
  -ms-transition: 0.25s all ease-in;
  -o-transition: 0.25s all ease-in;
  transition: 0.25s all ease-in;
}

.active-menu .topnav-section.mobilemenu {
  margin-top: 0 !important;
}

.lt-ie9 .nav-collapse.collapse {
  overflow: visible !important;
}

/* Top Navigation
------------------------------------------------------------------- */
.top-nav {
  float: left;
  padding: 18px 0;
}
.top-nav ul {
  margin: 0;
  list-style: none;
}
.top-nav li {
  float: left;
  margin-right: 12px;
}
.top-nav a {
  color: #fff;
  display: block;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 12px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
}

.top-nav a:hover {
  color: #fff;
}

.top-nav a:hover,
.top-nav .current-menu-item a,
.top-nav .current_page_item a {
  text-decoration: none;
  background: #0f2d57;
  background: rgba(0, 0, 0, 0.2);
}

/* Top Bar
------------------------------------------------------------------- */
.top-bar {
  float: right;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar ul {
  margin: 0;
  list-style: none;
}
.top-bar li {
  float: left;
  font-size: 12px;
  font-weight: bold;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.top-bar a {
  color: #fff;
  display: block;
  padding: 13px 12px;
  text-decoration: none;
}

.author-menu .menu-inner > a:hover,
.social-buttons a:hover {
  color: #fff;
}

.top-bar .social-buttons {
  border: none;
}

.facebook-button,
.twitter-button {
  line-height: 39px;
  background: rgba(0, 0, 0, 0.1);
}
.facebook-button a,
.twitter-button a {
  font-size: 14px;
  padding-left: 24px;
  padding-right: 24px;
  text-align: center;
}

.facebook-button a:hover {
  background-color: #166FC9;
}

.twitter-button a:hover {
  background-color: #1EBFF3;
}

.top-nav a,
.social-buttons a {
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

/* Author Menu
------------------------------------------------------------------- */
.author-menu .avatar {
  margin-right: 9px;
}
.author-menu .menu-inner {
  padding-right: 36px;
}
.author-menu i {
  top: 0;
  right: 0;
  padding: 0 5px;
  line-height: 65px;
  position: absolute;
}
.author-menu:hover .author-dropdown {
  display: block;
}
.author-menu:hover i,
.author-menu .open i {
  color: #444444;
  background: #fff;
}
.author-menu .dropdown-toggle {
  min-width: 120px;
}

.author-dropdown {
  right: 0;
  padding: 0;
  left: auto;
  border: none;
  min-width: 180px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 4px 4px 0 0 rgba(35, 35, 35, 0.1);
  -moz-box-shadow: 4px 4px 0 0 rgba(35, 35, 35, 0.1);
  box-shadow: 4px 4px 0 0 rgba(35, 35, 35, 0.1);
}
.author-dropdown li {
  float: none;
  border: none;
  color: #4d4d4d;
}
.author-dropdown label, .author-dropdown input {
  font-size: 13px;
}
.author-dropdown .input-text {
  margin-top: 5px;
}
.author-dropdown .btn-login {
  float: right;
}
.author-dropdown .block-remember {
  float: left;
}
.author-dropdown a {
  padding: 8px;
  display: block;
  color: #2470d8;
}
.author-dropdown .forgot {
  padding: 0;
}

.login-form {
  padding: 12px;
  margin-bottom: 0;
}

/*==================================================================== 
  Branding Section
=================================================================== */
.branding-section {
  color: #fff;
  padding: 40px 0 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.branding-section .divider-vertical {
  float: left;
}
.branding-section .contact-button-wrapper {
  float: right;
}
.branding-section .branding {
  float: none;
}

.contact-button {
  color: #fff;
  float: left;
  font-size: 18px;
  padding: 21px 16px;
  font-family: "Bebas Neue", sans-serif;
  background: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.contact-button i {
  font-size: 24px;
  margin-right: 5px;
  line-height: 0.3em;
}
.contact-button:hover {
  color: #fff;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.3);
}

/* Logo
------------------------------------------------------------------- */
.branding {
  overflow: hidden;
}
.branding .logo {
  float: left;
}
.branding .tagline {
  float: right;
  width: 45%;
  font-size: 15px;
  line-height: 20px;
  text-align: right;
  padding-top: 1em;
  font-style: italic;
  font-weight: normal;
  font-variant: small-caps;
}

/*==================================================================== 
  Primary Nav Section
=================================================================== */
.primarynav-section {
  background-color: #f4f4f4;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #f1f1f1));
  background-image: -webkit-linear-gradient(#f8f8f8, #f1f1f1);
  background-image: -moz-linear-gradient(#f8f8f8, #f1f1f1);
  background-image: linear-gradient(#f8f8f8, #f1f1f1);
  border-bottom: 1px solid #c2c2c2;
}
.primarynav-section .container {
  top: -25px;
  position: relative;
}

/* Hide cloned primary nav section */
.primarynav-section.mobilemenu {
  display: none !important;
  margin-bottom: 0;
}

Yes that is our normalize css, and it's separated for each style formatting based on element. Next we're go to the basic style formatting. Here we go


/*==================================================================== 
  Font Set
=================================================================== */
.wf-loading body, .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4, .wf-loading h5, .wf-loading h6 {
  font-family: Times, "Times New Roman", Baskerville, Georgia, serif;
}

/* Simonetta
------------------------------------------------------------------- */
body.body-simonetta {
  font-family: 'Simonetta', cursive;
}

.heading-simonetta h1, .heading-simonetta h2, .heading-simonetta h3, .heading-simonetta h4, .heading-simonetta h5, .heading-simonetta h6 {
  font-family: 'Simonetta', cursive;
}

/* Gentium Basic
------------------------------------------------------------------- */
body.body-gentium-basic {
  font-family: 'Gentium Basic', serif;
}

.heading-gentium-basic h1, .heading-gentium-basic h2, .heading-gentium-basic h3, .heading-gentium-basic h4, .heading-gentium-basic h5, .heading-gentium-basic h6 {
  font-family: 'Gentium Basic', serif;
}

/* Vollkorn
------------------------------------------------------------------- */
body.body-vollkorn {
  font-family: 'Vollkorn', serif;
}

.heading-vollkorn h1, .heading-vollkorn h2, .heading-vollkorn h3, .heading-vollkorn h4, .heading-vollkorn h5, .heading-vollkorn h6 {
  font-family: 'Vollkorn', serif;
}

/* PT Serif
------------------------------------------------------------------- */
body.body-pt-serif {
  font-family: 'PT Serif', serif;
}

.heading-pt-serif h1, .heading-pt-serif h2, .heading-pt-serif h3, .heading-pt-serif h4, .heading-pt-serif h5, .heading-pt-serif h6 {
  font-family: 'PT Serif', serif;
}

/* Droid Serif
------------------------------------------------------------------- */
body.body-droid-serif {
  font-family: 'Droid Serif', serif;
}

.heading-droid-serif h1, .heading-droid-serif h2, .heading-droid-serif h3, .heading-droid-serif h4, .heading-droid-serif h5, .heading-droid-serif h6 {
  font-family: 'Droid Serif', serif;
}

/* Abril Fatface
------------------------------------------------------------------- */
body.body-abril-fatface {
  font-family: 'Abril Fatface', serif;
}

.heading-abril-fatface h1, .heading-abril-fatface h2, .heading-abril-fatface h3, .heading-abril-fatface h4, .heading-abril-fatface h5, .heading-abril-fatface h6 {
  font-family: 'Abril Fatface', serif;
}

/* Bree Serif
------------------------------------------------------------------- */
body.body-bree-serif {
  font-family: 'Bree Serif', serif;
}

.heading-bree-serif h1, .heading-bree-serif h2, .heading-bree-serif h3, .heading-bree-serif h4, .heading-bree-serif h5, .heading-bree-serif h6 {
  font-family: 'Bree Serif', serif;
}

/* Playfair Display
------------------------------------------------------------------- */
body.body-playfair-display {
  font-family: 'Playfair Display', serif;
}

.heading-playfair-display h1, .heading-playfair-display h2, .heading-playfair-display h3, .heading-playfair-display h4, .heading-playfair-display h5, .heading-playfair-display h6 {
  font-family: 'Playfair Display', serif;
}

/* Ledger
------------------------------------------------------------------- */
body.body-ledger {
  font-family: 'Ledger', serif;
}

.heading-ledger h1, .heading-ledger h2, .heading-ledger h3, .heading-ledger h4, .heading-ledger h5, .heading-ledger h6 {
  font-family: 'Ledger', serif;
}

/* Cantata One
------------------------------------------------------------------- */
body.body-cantata-one {
  font-family: 'Cantata One', serif;
}

.heading-cantata-one h1, .heading-cantata-one h2, .heading-cantata-one h3, .heading-cantata-one h4, .heading-cantata-one h5, .heading-cantata-one h6 {
  font-family: 'Cantata One', serif;
}

/* Crimson Text
------------------------------------------------------------------- */
body.body-crimson-text {
  font-family: 'Crimson Text', serif;
}

.heading-crimson-text h1, .heading-crimson-text h2, .heading-crimson-text h3, .heading-crimson-text h4, .heading-crimson-text h5, .heading-crimson-text h6 {
  font-family: 'Crimson Text', serif;
}

/* Cardo
------------------------------------------------------------------- */
body.body-cardo {
  font-family: 'Cardo', serif;
}

.heading-cardo h1, .heading-cardo h2, .heading-cardo h3, .heading-cardo h4, .heading-cardo h5, .heading-cardo h6 {
  font-family: 'Cardo', serif;
}

/* Merryweather
------------------------------------------------------------------- */
body.body-merryweather {
  font-family: 'Merryweather', serif;
}

.heading-merryweather h1, .heading-merryweather h2, .heading-merryweather h3, .heading-merryweather h4, .heading-merryweather h5, .heading-merryweather h6 {
  font-family: 'Merryweather', serif;
}

/* Neuto
------------------------------------------------------------------- */
body.body-neuton {
  font-family: 'Neuton', serif;
}

.heading-neuton h1, .heading-neuton h2, .heading-neuton h3, .heading-neuton h4, .heading-neuton h5, .heading-neuton h6 {
  font-family: 'Neuton', serif;
}

/* Vidaloka
------------------------------------------------------------------- */
body.body-vidaloka {
  font-family: 'Vidaloka', serif;
}

.heading-vidaloka h1, .heading-vidaloka h2, .heading-vidaloka h3, .heading-vidaloka h4, .heading-vidaloka h5, .heading-vidaloka h6 {
  font-family: 'Vidaloka', serif;
}

/* Old Standard TT
------------------------------------------------------------------- */
body.body-old-standard-tt {
  font-family: 'Old Standard TT', serif;
}

.heading-old-standard-tt h1, .heading-old-standard-tt h2, .heading-old-standard-tt h3, .heading-old-standard-tt h4, .heading-old-standard-tt h5, .heading-old-standard-tt h6 {
  font-family: 'Old Standard TT', serif;
}

/* Alegreya
------------------------------------------------------------------- */
body.body-alegreya {
  font-family: 'Alegreya', serif;
}

.heading-alegreya h1, .heading-alegreya h2, .heading-alegreya h3, .heading-alegreya h4, .heading-alegreya h5, .heading-alegreya h6 {
  font-family: 'Alegreya', serif;
}

/* Gentium Book Basic
------------------------------------------------------------------- */
body.body-gentium-book-basic {
  font-family: 'Gentium Book Basic', serif;
}

.heading-gentium-book-basic h1, .heading-gentium-book-basic h2, .heading-gentium-book-basic h3, .heading-gentium-book-basic h4, .heading-gentium-book-basic h5, .heading-gentium-book-basic h6 {
  font-family: 'Gentium Book Basic', serif;
}

/* Lora
------------------------------------------------------------------- */
body.body-lora {
  font-family: 'Lora', serif;
}

.heading-lora h1, .heading-lora h2, .heading-lora h3, .heading-lora h4, .heading-lora h5, .heading-lora h6 {
  font-family: 'Lora', serif;
}

Font-face from google webfonts. Then general formatting guideline for template document. Next for Webfont icon.




@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome-webfont.eot");
  src: url("../fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff") format("woff"), url("../fonts/fontawesome-webfont.ttf") format("truetype"), url("../fonts/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"), url("../fonts/fontawesome-webfont.svg#FontAwesomeRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, .btn-cart:before, .navbar-search:before, .nav .dropdown i.arrow:before, .nav .dropdown .dropdown i.arrow:before, #slider-container .slide-title:before, #slider-container.threedee .nav-prev:before, #slider-container.threedee .nav-next:before, .post-list .entry-link:before, .single .entry-link:before, .page .entry-link:before, .post-list .entry-footer .datetime:before, .single .entry-footer .datetime:before, .page .entry-footer .datetime:before, .post-list .innercontainer:after, .single .innercontainer:after, .page .innercontainer:after, .post-list article.post .post-comment span:before, .single article.post .post-comment span:before, .page article.post .post-comment span:before, .post-list article.format-gallery .post-header nav .next:before, .post-list article.format-gallery .post-header nav .prev:before, .single article.format-gallery .post-header nav .next:before, .single article.format-gallery .post-header nav .prev:before, .page article.format-gallery .post-header nav .next:before, .page article.format-gallery .post-header nav .prev:before, .post-list article.format-video .entry-thumb a:after, .single article.format-video .entry-thumb a:after, .page article.format-video .entry-thumb a:after, .cat-block .entry-tag:after, .blog-list .post aside.entry-meta li:before, .blog-list .product aside.entry-meta li:before, .single .post aside.entry-meta li:before, .single .product aside.entry-meta li:before, .page .post aside.entry-meta li:before, .page .product aside.entry-meta li:before, .single-product .product .product-meta span:before, .single-product .product-images .thumbnails a:after, #reply-title:before, .widget_post_list .meta-item a:before, .widget_post_list .meta-item span:before,
.widget_tabs .meta-item a:before,
.widget_tabs .meta-item span:before, .star-rating .star:before, .widget_tabs .ui-tabs-nav li a:before, .jp-interface .jp-controls a:before, .jp-interface .jp-toggles a:before, .dk_toggle:after,
[class*=" icon-"]:before {
  font-family: "FontAwesome";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
}

.icon-large:before {
  font-size: 4/3em;
}

.btn [class^="icon-"], .cart-table .actions input[type="submit"] [class^="icon-"],
.cart-table .actions .checkout-button [class^="icon-"], .shipping-calculator-form button [class^="icon-"], .single-product .product .single-variation-wrap button [class^="icon-"], #submit [class^="icon-"], .widget_login_form .forgot [class^="icon-"], .widget_subscribe .forgot [class^="icon-"], .widget_shopping_cart .buttons span [class^="icon-"], .widget_subscribe .input-button [class^="icon-"], .widget_price_filter .price_slider_amount .button [class^="icon-"],
.btn [class*=" icon-"],
.cart-table .actions input[type="submit"] [class*=" icon-"],
.cart-table .actions .checkout-button [class*=" icon-"],
.shipping-calculator-form button [class*=" icon-"],
.single-product .product .single-variation-wrap button [class*=" icon-"],
#submit [class*=" icon-"],
.widget_login_form .forgot [class*=" icon-"],
.widget_subscribe .forgot [class*=" icon-"],
.widget_shopping_cart .buttons span [class*=" icon-"],
.widget_subscribe .input-button [class*=" icon-"],
.widget_price_filter .price_slider_amount .button [class*=" icon-"] {
  line-height: .9em;
}

li [class^="icon-"],
li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}
li .icon-large[class^="icon-"],
li .icon-large[class*=" icon-"] {
  width: 1.875em;
}

li[class^="icon-"],
li[class*=" icon-"] {
  margin-left: 0;
  list-style-type: none;
}
li[class^="icon-"]:before, li.btn-cart:before, li.navbar-search:before, #slider-container li.slide-title:before, #slider-container.threedee li.nav-prev:before, #slider-container.threedee li.nav-next:before, .post-list li.entry-link:before, .single li.entry-link:before, .page li.entry-link:before, .post-list .entry-footer li.datetime:before, .single .entry-footer li.datetime:before, .page .entry-footer li.datetime:before, .post-list li.innercontainer:after, .single li.innercontainer:after, .page li.innercontainer:after, .post-list article.format-gallery .post-header nav li.next:before, .post-list article.format-gallery .post-header nav li.prev:before, .single article.format-gallery .post-header nav li.next:before, .single article.format-gallery .post-header nav li.prev:before, .page article.format-gallery .post-header nav li.next:before, .page article.format-gallery .post-header nav li.prev:before, .cat-block li.entry-tag:after, .blog-list .post aside.entry-meta li:before, .blog-list .product aside.entry-meta li:before, .single .post aside.entry-meta li:before, .single .product aside.entry-meta li:before, .page .post aside.entry-meta li:before, .page .product aside.entry-meta li:before, li#reply-title:before, .star-rating li.star:before, li.dk_toggle:after,
li[class*=" icon-"]:before {
  text-indent: -2em;
  text-align: center;
}
li[class^="icon-"].icon-large:before, li.icon-large.btn-cart:before, li.icon-large.navbar-search:before, #slider-container li.icon-large.slide-title:before, #slider-container.threedee li.icon-large.nav-prev:before, #slider-container.threedee li.icon-large.nav-next:before, .post-list li.icon-large.entry-link:before, .single li.icon-large.entry-link:before, .page li.icon-large.entry-link:before, .post-list .entry-footer li.icon-large.datetime:before, .single .entry-footer li.icon-large.datetime:before, .page .entry-footer li.icon-large.datetime:before, .post-list li.icon-large.innercontainer:after, .single li.icon-large.innercontainer:after, .page li.icon-large.innercontainer:after, .post-list article.format-gallery .post-header nav li.icon-large.next:before, .post-list article.format-gallery .post-header nav li.icon-large.prev:before, .single article.format-gallery .post-header nav li.icon-large.next:before, .single article.format-gallery .post-header nav li.icon-large.prev:before, .page article.format-gallery .post-header nav li.icon-large.next:before, .page article.format-gallery .post-header nav li.icon-large.prev:before, .cat-block li.icon-large.entry-tag:after, .blog-list .post aside.entry-meta li.icon-large:before, .blog-list .product aside.entry-meta li.icon-large:before, .single .post aside.entry-meta li.icon-large:before, .single .product aside.entry-meta li.icon-large:before, .page .post aside.entry-meta li.icon-large:before, .page .product aside.entry-meta li.icon-large:before, li.icon-large#reply-title:before, .star-rating li.icon-large.star:before, li.icon-large.dk_toggle:after,
li[class*=" icon-"].icon-large:before {
  text-indent: -4/3em;
}

.icon-glass:before {
  content: "\f000";
}

.icon-music:before {
  content: "\f001";
}

.icon-search:before, .navbar-search:before {
  content: "\f002";
}

.icon-envelope:before, .blog-list .post.format-contact .entry-meta-symbol:before, .blog-list .product.format-contact .entry-meta-symbol:before, .single .post.format-contact .entry-meta-symbol:before, .single .product.format-contact .entry-meta-symbol:before, .page .post.format-contact .entry-meta-symbol:before, .page .product.format-contact .entry-meta-symbol:before {
  content: "\f003";
}

.icon-heart:before, .widget_tabs .ui-tabs-nav li.likes a:before {
  content: "\f004";
}

.icon-star:before, .star-rating .star:before, .widget_tabs .ui-tabs-nav li.latest a:before {
  content: "\f005";
}

.icon-star-empty:before {
  content: "\f006";
}

.icon-user:before, .blog-list .post .entry-meta .entry-meta-author:before, .blog-list .product .entry-meta .entry-meta-author:before, .single .post .entry-meta .entry-meta-author:before, .single .product .entry-meta .entry-meta-author:before, .page .post .entry-meta .entry-meta-author:before, .page .product .entry-meta .entry-meta-author:before {
  content: "\f007";
}

.icon-film:before {
  content: "\f008";
}

.icon-th-large:before {
  content: "\f009";
}

.icon-th:before {
  content: "\f00a";
}

.icon-th-list:before {
  content: "\f00b";
}

.icon-ok:before {
  content: "\f00c";
}

.icon-remove:before {
  content: "\f00d";
}

.icon-zoom-in:before, .single-product .product-images .thumbnails a:after {
  content: "\f00e";
}

.icon-zoom-out:before {
  content: "\f010";
}

.icon-off:before {
  content: "\f011";
}

.icon-signal:before {
  content: "\f012";
}

.icon-cog:before {
  content: "\f013";
}

.icon-trash:before {
  content: "\f014";
}

.icon-home:before {
  content: "\f015";
}

.icon-file:before {
  content: "\f016";
}

.icon-time:before {
  content: "\f017";
}

.icon-road:before {
  content: "\f018";
}

.icon-download-alt:before {
  content: "\f019";
}

.icon-download:before {
  content: "\f01a";
}

.icon-upload:before {
  content: "\f01b";
}

.icon-inbox:before {
  content: "\f01c";
}

.icon-play-circle:before {
  content: "\f01d";
}

.icon-repeat:before, .jp-interface .jp-controls .jp-repeat:before, .jp-interface .jp-toggles .jp-repeat:before, .jp-interface .jp-controls .jp-repeat-off:before, .jp-interface .jp-toggles .jp-repeat-off:before {
  content: "\f01e";
}

.icon-refresh:before {
  content: "\f021";
}

.icon-list-alt:before, .post-list article.format-note .innercontainer:after, .single article.format-note .innercontainer:after, .page article.format-note .innercontainer:after, .cat-block .entry-tag:after, .blog-list .post.format-note .entry-meta-symbol:before, .blog-list .product.format-note .entry-meta-symbol:before, .single .post.format-note .entry-meta-symbol:before, .single .product.format-note .entry-meta-symbol:before, .page .post.format-note .entry-meta-symbol:before, .page .product.format-note .entry-meta-symbol:before, .page article .innercontainer:after,
.page article .entry-meta-symbol:before {
  content: "\f022";
}

.icon-lock:before {
  content: "\f023";
}

.icon-flag:before {
  content: "\f024";
}

.icon-headphones:before {
  content: "\f025";
}

.icon-volume-off:before, .jp-interface .jp-controls .jp-unmute:before, .jp-interface .jp-toggles .jp-unmute:before {
  content: "\f026";
}

.icon-volume-down:before, .jp-interface .jp-controls .jp-mute:before, .jp-interface .jp-toggles .jp-mute:before {
  content: "\f027";
}

.icon-volume-up:before, .post-list article.format-audio .innercontainer:after, .single article.format-audio .innercontainer:after, .page article.format-audio .innercontainer:after, .blog-list .post.format-audio .entry-meta-symbol:before, .blog-list .product.format-audio .entry-meta-symbol:before, .single .post.format-audio .entry-meta-symbol:before, .single .product.format-audio .entry-meta-symbol:before, .page .post.format-audio .entry-meta-symbol:before, .page .product.format-audio .entry-meta-symbol:before, .jp-interface .jp-controls .jp-volume-max:before, .jp-interface .jp-toggles .jp-volume-max:before {
  content: "\f028";
}

.icon-qrcode:before {
  content: "\f029";
}

.icon-barcode:before {
  content: "\f02a";
}

.icon-tag:before {
  content: "\f02b";
}

.icon-tags:before, .blog-list .post .entry-meta .entry-meta-tags:before, .blog-list .product .entry-meta .entry-meta-tags:before, .single .post .entry-meta .entry-meta-tags:before, .single .product .entry-meta .entry-meta-tags:before, .page .post .entry-meta .entry-meta-tags:before, .page .product .entry-meta .entry-meta-tags:before, .single-product .product .product-cat:before {
  content: "\f02c";
}

.icon-book:before, .blog-list .post .entry-meta .entry-meta-category:before, .blog-list .product .entry-meta .entry-meta-category:before, .single .post .entry-meta .entry-meta-category:before, .single .product .entry-meta .entry-meta-category:before, .page .post .entry-meta .entry-meta-category:before, .page .product .entry-meta .entry-meta-category:before, .single-product .product .sku:before {
  content: "\f02d";
}

.icon-bookmark:before {
  content: "\f02e";
}

.icon-print:before {
  content: "\f02f";
}

.icon-camera:before, .post-list article.format-image .innercontainer:after, .single article.format-image .innercontainer:after, .page article.format-image .innercontainer:after, .blog-list .post.format-image .entry-meta-symbol:before, .blog-list .product.format-image .entry-meta-symbol:before, .single .post.format-image .entry-meta-symbol:before, .single .product.format-image .entry-meta-symbol:before, .page .post.format-image .entry-meta-symbol:before, .page .product.format-image .entry-meta-symbol:before {
  content: "\f030";
}

.icon-font:before {
  content: "\f031";
}

.icon-bold:before {
  content: "\f032";
}

.icon-italic:before {
  content: "\f033";
}

.icon-text-height:before {
  content: "\f034";
}

.icon-text-width:before {
  content: "\f035";
}

.icon-align-left:before {
  content: "\f036";
}

.icon-align-center:before {
  content: "\f037";
}

.icon-align-right:before {
  content: "\f038";
}

.icon-align-justify:before {
  content: "\f039";
}

.icon-list:before {
  content: "\f03a";
}

.icon-indent-left:before {
  content: "\f03b";
}

.icon-indent-right:before {
  content: "\f03c";
}

.icon-facetime-video:before, .post-list article.format-video .innercontainer:after, .single article.format-video .innercontainer:after, .page article.format-video .innercontainer:after, .blog-list .post.format-video .entry-meta-symbol:before, .blog-list .product.format-video .entry-meta-symbol:before, .single .post.format-video .entry-meta-symbol:before, .single .product.format-video .entry-meta-symbol:before, .page .post.format-video .entry-meta-symbol:before, .page .product.format-video .entry-meta-symbol:before {
  content: "\f03d";
}

.icon-picture:before, .post-list article.format-gallery .innercontainer:after, .single article.format-gallery .innercontainer:after, .page article.format-gallery .innercontainer:after, .blog-list .post.format-gallery .entry-meta-symbol:before, .blog-list .product.format-gallery .entry-meta-symbol:before, .single .post.format-gallery .entry-meta-symbol:before, .single .product.format-gallery .entry-meta-symbol:before, .page .post.format-gallery .entry-meta-symbol:before, .page .product.format-gallery .entry-meta-symbol:before {
  content: "\f03e";
}

.icon-pencil:before {
  content: "\f040";
}

.icon-map-marker:before {
  content: "\f041";
}

.icon-adjust:before {
  content: "\f042";
}

.icon-tint:before {
  content: "\f043";
}

.icon-edit:before {
  content: "\f044";
}

.icon-share:before, .post-list article.format-link .innercontainer:after, .single article.format-link .innercontainer:after, .page article.format-link .innercontainer:after, .blog-list .post.format-link .entry-meta-symbol:before, .blog-list .product.format-link .entry-meta-symbol:before, .single .post.format-link .entry-meta-symbol:before, .single .product.format-link .entry-meta-symbol:before, .page .post.format-link .entry-meta-symbol:before, .page .product.format-link .entry-meta-symbol:before {
  content: "\f045";
}

.icon-check:before {
  content: "\f046";
}

.icon-move:before {
  content: "\f047";
}

.icon-step-backward:before {
  content: "\f048";
}

.icon-fast-backward:before {
  content: "\f049";
}

.icon-backward:before {
  content: "\f04a";
}

.icon-play:before, .post-list article.format-video .entry-thumb a:after, .single article.format-video .entry-thumb a:after, .page article.format-video .entry-thumb a:after, .jp-interface .jp-controls .jp-play:before, .jp-interface .jp-toggles .jp-play:before {
  content: "\f04b";
}

.icon-pause:before, .jp-interface .jp-controls .jp-pause:before, .jp-interface .jp-toggles .jp-pause:before {
  content: "\f04c";
}

.icon-stop:before, .jp-interface .jp-controls .jp-stop:before, .jp-interface .jp-toggles .jp-stop:before {
  content: "\f04d";
}

.icon-forward:before {
  content: "\f04e";
}

.icon-fast-forward:before {
  content: "\f050";
}

.icon-step-forward:before {
  content: "\f051";
}

.icon-eject:before {
  content: "\f052";
}

.icon-chevron-left:before, #slider-container.threedee .nav-prev:before, .post-list article.format-gallery .post-header nav .prev:before, .single article.format-gallery .post-header nav .prev:before, .page article.format-gallery .post-header nav .prev:before {
  content: "\f053";
}

.icon-chevron-right:before, .nav .dropdown .dropdown i.arrow:before, #slider-container.threedee .nav-next:before, .post-list article.format-gallery .post-header nav .next:before, .single article.format-gallery .post-header nav .next:before, .page article.format-gallery .post-header nav .next:before {
  content: "\f054";
}

.icon-plus-sign:before {
  content: "\f055";
}

.icon-minus-sign:before {
  content: "\f056";
}

.icon-remove-sign:before {
  content: "\f057";
}

.icon-ok-sign:before {
  content: "\f058";
}

.icon-question-sign:before {
  content: "\f059";
}

.icon-info-sign:before {
  content: "\f05a";
}

.icon-screenshot:before {
  content: "\f05b";
}

.icon-remove-circle:before {
  content: "\f05c";
}

.icon-ok-circle:before {
  content: "\f05d";
}

.icon-ban-circle:before {
  content: "\f05e";
}

.icon-arrow-left:before {
  content: "\f060";
}

.icon-arrow-right:before {
  content: "\f061";
}

.icon-arrow-up:before {
  content: "\f062";
}

.icon-arrow-down:before {
  content: "\f063";
}

.icon-share-alt:before {
  content: "\f064";
}

.icon-resize-full:before {
  content: "\f065";
}

.icon-resize-small:before {
  content: "\f066";
}

.icon-plus:before {
  content: "\f067";
}

.icon-minus:before {
  content: "\f068";
}

.icon-asterisk:before {
  content: "\f069";
}

.icon-exclamation-sign:before {
  content: "\f06a";
}

.icon-gift:before {
  content: "\f06b";
}

.icon-leaf:before {
  content: "\f06c";
}

.icon-fire:before {
  content: "\f06d";
}

.icon-eye-open:before, #slider-container .slide-title:before, .post-list .entry-link.more-link:before, .single .entry-link.more-link:before, .page .entry-link.more-link:before, .blog-list .post .entry-meta .entry-meta-views:before, .blog-list .product .entry-meta .entry-meta-views:before, .single .post .entry-meta .entry-meta-views:before, .single .product .entry-meta .entry-meta-views:before, .page .post .entry-meta .entry-meta-views:before, .page .product .entry-meta .entry-meta-views:before {
  content: "\f06e";
}

.icon-eye-close:before {
  content: "\f070";
}

.icon-warning-sign:before {
  content: "\f071";
}

.icon-plane:before {
  content: "\f072";
}

.icon-calendar:before, .post-list .entry-footer .datetime:before, .single .entry-footer .datetime:before, .page .entry-footer .datetime:before {
  content: "\f073";
}

.icon-random:before {
  content: "\f074";
}

.icon-comment:before, .widget_tabs .ui-tabs-nav li.comments a:before {
  content: "\f075";
}

.icon-magnet:before {
  content: "\f076";
}

.icon-chevron-up:before {
  content: "\f077";
}

.icon-chevron-down:before, .nav .dropdown i.arrow:before, .dk_toggle:after {
  content: "\f078";
}

.icon-retweet:before {
  content: "\f079";
}

.icon-shopping-cart:before, .btn-cart:before, .post-list .entry-link.add-to-cart:before, .single .entry-link.add-to-cart:before, .page .entry-link.add-to-cart:before, .post-list .product .innercontainer:after, .single .product .innercontainer:after, .page .product .innercontainer:after {
  content: "\f07a";
}

.icon-folder-close:before {
  content: "\f07b";
}

.icon-folder-open:before {
  content: "\f07c";
}

.icon-resize-vertical:before {
  content: "\f07d";
}

.icon-resize-horizontal:before {
  content: "\f07e";
}

.icon-bar-chart:before, .widget_tabs .ui-tabs-nav li.reads a:before {
  content: "\f080";
}

.icon-twitter-sign:before {
  content: "\f081";
}

.icon-facebook-sign:before {
  content: "\f082";
}

.icon-camera-retro:before {
  content: "\f083";
}

.icon-key:before {
  content: "\f084";
}

.icon-cogs:before {
  content: "\f085";
}

.icon-comments:before, .post-list article.post .post-comment .comment-number:before, .single article.post .post-comment .comment-number:before, .page article.post .post-comment .comment-number:before, #reply-title:before, .widget_post_list .meta-item .item-comments:before,
.widget_tabs .meta-item .item-comments:before, .widget_tabs .ui-tabs-nav li.discuss a:before {
  content: "\f086";
}

.icon-thumbs-up:before, .post-list article.post .post-comment .like-number:before, .single article.post .post-comment .like-number:before, .page article.post .post-comment .like-number:before, .widget_post_list .meta-item .item-likes:before,
.widget_tabs .meta-item .item-likes:before, .widget_tabs .ui-tabs-nav li.popular a:before {
  content: "\f087";
}

.icon-thumbs-down:before {
  content: "\f088";
}

.icon-star-half:before {
  content: "\f089";
}

.icon-heart-empty:before {
  content: "\f08a";
}

.icon-signout:before {
  content: "\f08b";
}

.icon-linkedin-sign:before {
  content: "\f08c";
}

.icon-pushpin:before, .blog-list .post .entry-meta .entry-meta-maps:before, .blog-list .product .entry-meta .entry-meta-maps:before, .single .post .entry-meta .entry-meta-maps:before, .single .product .entry-meta .entry-meta-maps:before, .page .post .entry-meta .entry-meta-maps:before, .page .product .entry-meta .entry-meta-maps:before {
  content: "\f08d";
}

.icon-external-link:before {
  content: "\f08e";
}

.icon-signin:before {
  content: "\f090";
}

.icon-trophy:before {
  content: "\f091";
}

.icon-github-sign:before {
  content: "\f092";
}

.icon-upload-alt:before {
  content: "\f093";
}

.icon-lemon:before {
  content: "\f094";
}

That's it, all structure are done. We may let you know that this template already include print.css so you don't need to embed more print style inside the css document.

G) Javascript Files and Common Plugins - top

We're now about explain javascript files that are included to the template document. Including twitter, addthis and much more, here is the list.

Standard menu list dropdown (already built-in).
Overthrow v.0.1.0.
Cookie plugins jquery (for cookies).
jTweetsAnywhere (for twitter widget on the sidebar).
Twitter hovercard (hovercard, auto link to twitter username and hovercard information).
Wookmark jQuery plugin (for Pinterest-like layout).
jQuery carouFredSel (for carousel and more).
jQuery easing (ease effect for jquery).
GMAP3 Plugin for JQuery.
jQuery ImagesLoaded plugin v2.0.1.

All scripts are included on plugins.js on js folder inside your template bundle.

H) PSD Files - top

We have psds files within this template just for bonus. You can use it for customizing or modify that fits with your needs. All psds are organize for each layer inside, so you can understand in a minute to play with our psd and start create/modify something on these files. Files contain:

Homepage
Homepage (alternative header schema)
Page format
Single post
Archive category
Archive monthly
Default page (blog listing)
Homepage (dark version)

That's a huge files and we have to compressed these files for the package and you need to make a request through our contact form.

I) Sources and Credits - top

I've used the following images, icons or other files as listed.

Once again, thank you so much for purchasing this template. As I said at the beginning, we would be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist from Indonesia. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Nesia

Go To Table of Contents