Welcome Everyone!

Footer

Place your footer content here.

   <footer id="footer">
        
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                </div>
                <div class="col-sm-12"> 
                        ...
            </div>
        </div>

        <div class="scroll-top">
                    <div class="entry-footer">
                        Copyright © 2015 - All Rights Reserved
                </div>
            </div>
        </div>
 </footer>

Widgets

Following classes control how the widget design their inside content. Structured in aside or div tag and titled h5 heading for your SEO reference. Widget markups are same on sidebar & footer areas but styled by their containers, so see the complete markup from the blog.html and footer.html files.

<div class="widget">
    <h5 class="widget-title">...</h5>
    <div class="recent-posts">
        ...
    </div>
</div>

Cascading Style Sheets

CSS Structure

Our template based on Bootstrap layout and included this library. Then you can use any css and helpers there for your need from it. Theme styles are included after the libraries and they are overwrite default styles. But we've tried to use all possibe default styles and write less additional styles.

This is a contents of style.css and you can find it on at top of the file. Please find your desired styles by index numbers from following map that needs to be changed.

    Table of Contents
    01. Header
    02. Helpers
    03. Elements
    04. Content
    05. Blog
    06. Comments
    07. Page
    08. Portfolio
    09. Widgets
    10. Footer
    11. Responsive

Template Helper Classes

We are explaining possibile classes on their relevant sections. But here we have following classes those aren't mentioned enough. They aren't abandoned because power of those are limitless. You can find many aspect of these on the demo pages.

<section class="padding2x no-padding-bottom">

Bootstrap Helper Classes

Collected following useful classes for your conent editing from all Bootstrap classes. These are used frequently on template files and you can build anything with those classes and combinations.

Site Header

Header

Here is the header layout structure. Please make your changes in it and use on next to Body tag.

   <header id="header">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    
                    <a href="index.php" class="logo">
                        <img alt="Image" src="images/logo.png">
                    </a>

                    <nav>
                        ...
                    </nav>

                </div>
            </div>
        </div>
    </header>

Logo and Branding

Currently we use SVG logo format which is vector and doens't scall badly on any custom screens including retina displays. Then please replace your one in images directory.

Now logo's outer container has 142px wide and 110px high. Then your logo will be nested in this area. But you can change it to whatever for your need and set your changes in style.css file in line 170.

.has-slider .header .logo {
    width: 130px;
    height: auto;
}

Menu

Main navigation should place in the header tag and it has to be nav tag.

   <header id="header">
        <div class="container">
            <div class="row">
                <div class="col-sm-5 ">
                    
                    <nav>

                        <!-- YOUR NAVIGATION --> 
                        <ul> 
                         <navigation-left> 
                            <li><a href="home.php">Home</a></li>
                            <li><a href="about us.php">About us</a></li>
                            <li><a href="portfolio.php">Portfolio</a></li>
                            <li><a href="fortfolio-single.php">Folio single</a></li>
                            <li><a href="single.php">Blog Single</a></li>
                            <li><a href="contact.php">Contact us </a></li>
                        </ul>

                    </nav>

                </div>
            </div>
        </div>
    </header>

Note Just draw your menu with clean ul, li and next level structure. You don't need to add extra class or configuration on those because scripts allow their required classes.

Extras & More Information

Font Switching

This short guide explains how to use the Google Fonts API to add fonts to your web pages. It's free and easy to implement a much wider variety of type into a website.

1. Choose new font(s) from Google Fonts
2. Add a stylesheet link to request the desired web font(s) on the head tag which locates at the top of your markup

   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

3. Edit style.css file and set font family name or Style elements with the requested web font like this

   body {
     font-family: 'Font Name', serif;
   }
   #header .main-menu li {
     font-family: 'Font Name', serif;
   }
   h1,h2,h3,h4,h5,h6 {
     font-family: 'Font Name', serif;
   }
   .widget-title {
     font-family: 'Font Name', serif;
   }
                                               

4. Delete old font(s) link from the head section.

If you need to implement other fonts then this, you should follow the instuction of your selected font library and follow the steps #3 and #4.

Get Purchase Code

A Purchase Code is a unique code associated with your item purchase, it’s individual to you. You'll need a Purchase Code to access the Support Forum. Follow below steps to find the code:

1. Log into your Envato Market account
2. From your account drop down links, select Downloads
3. Click the ‘Download’ button that corresponds with the template
4. Select the ‘License certificate & purchase code’ download link:

Your Purchase Code will be displayed within the License Certificate: