DOCUMENTATION

| Documentation

Thank you for purchasing this item. We provide support for all of our Items at http://templines.com/, but please make sure you read this documentation first. Thank you so much!

If you are not familiar with HTML and CSS, I highly recommend that you to hire a specialist. It will save your time and you will get only positive emotions while using our product.

Home Page

Let's look at the structure of Landing Page. It includes its own sections with content. On request you can add or remove sections of the site. Please, be careful when removing unwanted sections. It can cause errors in theme.js. All tags have to be closed properly.

Tools to help work:

section with parallax background

<section class="paralax" style="background-image: url('media/paralax/paralaximg.jpg');">
  <div class="container">
    CONTENT HERE
  </div>
</section>

slides section

<div class="owl-carousel enable-owl-carousel" data-single-item="true" data-pagination="false" data-auto-play="true"
 data-main-slider="true" data-stop-on-hover="true">
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
  <div class="item"> Your Content </div>
  ...
</div>
$(document).ready(function() {
  $(".enable-owl-carousel").each(function(i) {
    $(this).owlCarousel({
      // Here optins
    });
  });
});

Each section has its own class, which affects imaging of the content.

For some sections we use additional scripts which are located in the folder PLUGINS.

All scripts are connected in the basement of the site.

Color switcher settings

Install data attribute data-default-color="true" for change default color

plugins/switcher/

<link rel="alternate stylesheet" type="text/css" href="assets/switcher/css/color1.css" title="color1" media="all"
data-default-color="true" />

PAGE PRELOADING EFFECT

We use this effect only on Landing Page. It makes waiting process while page loading less boring for the user. It is relevant for large pages with large amount of information just like in our case.

Developer website

plugins/loader/

<!-- Loader Landing Page -->
<div id="ip-container" class="ip-container">
  <div class="ip-header" >
    <div class="ip-loader">
      <svg class="ip-inner" width="60px" height="60px" viewBox="0 0 80 80">
        <path class="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,39.3,10z"/>
        <path id="ip-loader-circle" class="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,
40.5S23.649,10,40.5,10z"/>
      </svg> 
    </div>
  </div>
</div>
<!-- Loader end -->

You can move this code to another page or delete it.

Animated

Developer website (CSS animations)

Developer website (Reveal Animations When You Scroll)

css/animate.css

js/wow.min.js

To add animations in elements

<h2 class="wow zoomIn" data-wow-delay="0.3s">GET IT FOR FREE</h2>

To global disable animations set data-scrolling-animations attribute false for body

<body data-scrolling-animations="false">

responsive carousel slider

Developer website

plugins/owl-carousel/

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

Contact Form

js/contact_me.js

Email Settings

mail/contact_me.php

Main Styles and Scripts

css/master.css

Global Theme Styles

css/theme.css

Theme Colors

css/color.css

Responsive Styles

css/responsive.css

Theme js

js/theme.js

Icons Fonts

fonts/font-awesome

fonts/flaticon

Debugging

Please for your own changes use custom.css file. It will help you to avoid problems after updating.

css/custom.css