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.
    # Topbar
    # Header
    # Sticky Header
    # Back to top
    # Navigation
    # jPanel mobile menu
    # Search Forms Styling
    # Full Width Search Form
    # Parallax Background
    # Titlebar
    # Agents List
    # Listings Styles
    # Fullwidth Sections
    # Pagination
    # Property Page
    # Submit page
    # Image Hovers
    # Contact Form
    # Blog Styles

03. Script Styles ....................... jQuery add-ons CSS.
    # Google Maps
    # Owl Carousel
    # Slick Carousel
    # Magnific Popup
    # Dropzone
    # Chosen Plugin
    # Input with dropdown

04. Shortcodes .......................... Template elements.
    # Buttons
    # Pricing Tables
    # Accordion / Toggles
    # Tabs
    # Tables
    # Notification Boxes
    # Social Icons
    # Info Box
    # Testimonials
    # Icon Boxes
    # Info Banner
    # Counters

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

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

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

Alternatively, follow these steps to get an API key:

1. Go to the Google API Console.
2. Create or select a project.
3. Click Continue to enable the API and any related services.
4. On the Credentials page, get an API key (and set the API key restrictions).
   Note: If you have an existing unrestricted API key, or a key with browser restrictions, you may use that key.
5. To prevent quota theft, secure your API key following these best practices.
6. (Optional) Enable billing. See Usage Limits for more information.

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>
<script type="text/javascript" src="scripts/infobox.min.js"></script>
<script type="text/javascript" src="scripts/markerclusterer.js"></script>
<script type="text/javascript" src="scripts/maps.js"></script>

Map locations are stored in maps.js file:

var locations = [

  // Sample
  [ locationData(
      'LocationURL',
      'LocationPrice',
      'LocationPriceDetails',
      'LocationIMG',
      'LocationTitle',
      'LocationAddress'),
       LocationLatitude,
       LocationLongitude,
       1, markerIcon
  ],

  // Locations
  [ locationData('location1.html','$900','monthly','location1.jpg','Location 1 Title',"Location 1 Address"), 40.7043786, -73.9867401, 1, markerIcon ],
  [ locationData('location2.html','$900','monthly','location2.jpg','Location 2 Title',"Location 2 Address"), 40.7043786, -73.9867401, 2, markerIcon ],
];

1. Set up your HTML

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="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles.

<div id="owl-example" class="owl-carousel">
    <div> Your Carousel Item </div>
    <div> Your Carousel Item </div>
    <div> Your Carousel Item </div>
    <div> Your Carousel Item </div>
</div>

2. Call the plugin

Now call the Owl initializer function and your carousel is ready.

$(document).ready(function() {
    $("#owl-example").owlCarousel();
});

For more informations, please visit http://owlgraphic.com/owlcarousel/#how-to

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">

You don't have to know PHP. To change email adress, open "contact.php", find and edit code below:

$address = "mail@example.com";

To create nice and stylish content use section background class which will affect on your content's background:

<section class="fullwidth" data-background-color="#fffae2">
     <div class="container">
          <div class="row">
               <div class="col-md-12">
                    Your Content
               </div>
          </div>
     </div>
</section>

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