Documentation

Thank you for your purchase! If you have any questions feel free to ask me through comment section on ThemeForest.

For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as theme issues get top priority. You will need some knowledge of HTML/CSS to edit this theme.

The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.

Step 1: Add HTML container

<!-- Container -->
    <div class="container"></div>
<!-- Container / End -->

Step 2: Add row and columns (from one to twelve)

<!-- Container -->
<div class="container">
    <div class="row">
            <div class="col-md-6">6 Columns - Content Here</div>
            <div class="col-md-6">6 Columns - Content Here</div>
        </div>
    </div>
<!-- Container / End -->

For More information, please visit http://getbootstrap.com/css/#grid

01. Import Section ...................... Imported variables.

02. Layout Components ................... Generic layout elements.
    # Header
    # Sticky Header
    # Back to top
    # Navigation
    # User Menu
    # jPanel mobile menu
    # Main Search Container
    # Range Slider
    # Chosen Plugin
    # Sort by custom select
    # Custom Chosen Dropdown
    # Input with dropdown
    # Panel Dropdown
    # Single Listing Page
    # Contact Page
    # Blog Styles
    # Listing Item Layout Style
    # Titlebar

03. Shortcodes .......................... Template elements.
    # Buttons
    # Tables
    # Accordion / Toggles
    # Share Buttons
    # Post Navigation
    # Pricing Tables
    # List Styles
    # Tooltips
    # Info Box
    # Notification Boxes
    # Testimonials
    # Tabs
    # Login Register
    # Social Icons
    # Custom Checkboxes

04. Dashboard ........................... User panel styles
    # Dashboard Navigation
    # Dashboard Titlebar
    # Dashboard Stats Boxes
    # Dashboard Pagination
    # Dashboard Messages
    # Dashboard List Box
    # Add Listing
    # Opening Hours
    # Pricing

05. Script Styles ....................... jQuery add-ons CSS.
    # Google Maps
    # Dropzone
    # Magnific Popup
    # Parallax Background
    # Slick Carousel

05. Others .............................. CSS helper classes etc.
    # Common Styles
    # Offsets

06. Media Queries ....................... Mobile style sheets.

To get started using the Google Maps click the button below, which guides you through the process of activating the Google Maps JavaScript API and any related services automatically.

Get a Key

Then paste your key to the Google API script at the bottom of HTML file:

<!-- Maps -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY></script>

Map locations are stored in maps.js file:

var locations = [

  // Sample
  [ locationData(
       locationURL,
       locationImg,
       locationTitle,
       locationAddress,
       locationRating,
       locationRatingCounter'),
       LocationLatitude,
       LocationLongitude,
       1,
       '<i class="im im-icon"></i>'
  ],

  // Locations
  [ locationData('page1.html','images/img1.jpg',"Title 1",'Address 1', '3.5', '1'), 40.90, -74.10, 1, '<i class="im im-icon-Chef-Hat"></i>'],
  [ locationData('page2.html','images/img2.jpg',"Title 2",'Address 2', '3.5', '1'), 42.90, -76.10, 2, '<i class="im im-icon-Chef-Hat"></i>'],

];

You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class="simple-slick-carousel">. Class "simple-slick-carousel" is mandatory to apply proper styles.

<div class="simple-slick-carousel">
    <div> Your Carousel Item </div>
    <div> Your Carousel Item </div>
    <div> Your Carousel Item </div>
    <div> Your Carousel Item </div>
</div>

For more informations, please visit http://kenwheeler.github.io/slick/

You can use one of predefinied colors or build custom CSS with color you want.

<link rel="stylesheet" href="css/colors/green.css" id="colors">

Single Image Lightbox

<a class="mfp-image" href="image1a.jpg" title="The Cleaner"><img src="image1b.jpg"></a>

Lightbox Gallery

<a class="mfp-gallery" href="image1a.jpg" title="The Cleaner"><img src="image1b.jpg"></a>
<a class="mfp-gallery" href="image2a.jpg" title="The Cleaner"><img src="image2b.jpg"></a>
<a class="mfp-gallery" href="image3a.jpg" title="The Cleaner"><img src="image3b.jpg"></a>

Popup With Video

<a class="mfp-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>
<a class="mfp-vimeo" href="https://vimeo.com/45830194">Open Vimeo video</a>

Popup With Content

<a class="popup-with-zoom-anim button color" href="#small-dialog" >Open</a>
     <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
          <h2>Title</h2>
          <p>Content Here</p>
     </div>
</a>

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

If you have a more general question relating to the themes on ThemeForest, basic HTML/CSS/JavaScript related questions, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Best Regards,
Vasterad