Logo

Lineage - Documentation

Lineage Responsive Mutipurpose Template Documentation version 1.0


Introduction


First of all, Thank you so much for purchasing and using this template. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from us directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.


About Lineage

Lineage is a Creative Responsive Multipurpose HTML Template built with Bootstrap version 3.3.7 and SASS. This template can be used for any small to medium sized corporate company/agency or individulas to build and publish their online profiles, services and branding. This template comes with developer/non developer friendly coding styles as well as it has rich customization capabilities that is suitable for any kind of small business or creative farms. Creative design, stunning animations, eye catching google map and functional contact form are the main features of this template.

We hope, you will be pleased with this mobile friendly template and for any clarification please visit the demo and carefully read this documentation. This document will assist you to have a better idea about this tamplate's structure and functionalities. Though we tried to cover every single details regarding this template, however, for any issue, that is not coverd here, please feel free to communicate us via email.


Tips

Be careful while editing the template. If not edited properly, the design layout may break completely.

For correct operation of all functions of the template, including Contact and quote forms, you must upload the template to a web-server.

Use Firebug or Chrome Developer Tools to find out the problems.

Getting an error message? Someone might have seen it too, try a google search for a quick fix.

Explore the live demo for pages ideas and sample code.

Getting Started Back to Top

Requirements

You will need the following sofwares to customize this template.

  1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad++)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
  3. FTP Tool to upload files to Server (eg: FileZilla)

Installation

Follow the steps below to get started with your Site Template:

  1. Open the lineage Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below:
    • lineage/assets - Assets directory, contains CSS, JS, Images...etc
      • assets/_scss - This template is built using SASS. All of the sass files are present in this folder.
      • assets/css - Contains all the Vendor CSS files and dynamically generated master CSS file 'style.css'.
      • assets/fonts - Contains fonts files (font Awesome / Glyphicons / Flaticons).
      • assets/img - Contains images used in the template (images are structured with sub-directories).
      • assets/js - Contains all the vendor plugins JS files as well as the master JS file 'main.js'.
      • assets/videos - Contains the videos used in this template i.e. on Home-2 and Home-3.
    • lineage/index.html - Index file / Homepage.
    • lineage/sendemail.php - Responsible for processing "Contact Us" form.
    • lineage/sendquote.php - Responsible for processing "Request a Quote" form.
    • Other files that can be used according to your preferences.
  4. You're now good to go! Start editing your site and show off your Brand New Website with pride.

Images used on the demo is not included in the template you downloaded, rather you will see preview images with the image dimension mentioned in the template. You can always replace those images. For somooth layout, use images with specified dimension and also please compare with the demo to have a better idea.

Basic Template Structure Back to Top

The template has a responsive layout and is based on the Bootstrap Framework Version 3.3.7. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.


HTML Structure

lineage follows a simple coding structure. Here is a sample of general HTML stucture used in the pages:

                                    <!DOCTYPE html>
                                    <html lang="zxx">
                                    <head>

                                        <!-- Your Page Metas, Stylesheets, Favicon, Fonts, Scripts & Title
                                            ================================================================ -->

                                    </head>

                                    <body>

                                        <!-- Mobile Menu Wrapper
                                            ========================== -->
                                        
. . .
<!-- Whole Site Wrapper ========================== -->
<!-- Header ========================== -->
. . .
<!-- Slider / Page Titles ========================== -->
. . .
<!-- Main Content Wrapper ========================== -->
<!-- Section 1 ========================== -->
[ Section Contents ]
<!-- Section 2 ========================== -->
[ Section Contents ]
. . . . . .
<!-- End of Main Content Wrapper --> <!-- Footer ========================== -->
. . .
<!-- End of Whole Site Wrapper --> <!-- Mobile Menu Masking ========================== -->
<!-- Scroll to Top Button ========================== -->
. . .
<!-- Photoswipe Initialization =============================== --> <!-- All Page Javascripts =============================== --> <script>...</script> <script>...</script> </body> </html>

CSS Structure

Here is a list of all the general CSS used in the template:

                                    <!-- CSS files
                                    ============================================ -->

                                    <!-- Boostrap stylesheet -->
                                    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
                                    
                                    <!-- Icon Font CSS -->
                                    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
                                    <link rel="stylesheet" href="assets/css/flaticon.css">

                                    <!-- Plugins stylesheet -->
                                    <link rel="stylesheet" href="assets/css/plugins.css">

                                    <!-- Master stylesheet -->
                                    <link rel="stylesheet" href="assets/css/style.css">

                                
  • Following is some basic ideas of what these files do:
  • ----------------------------------------------
  • bootstrap.min.css : Includes the main stylesheet of Bootstrap Framework.
  • font-awesome.min.css : Includes Font Awesome icon stylesheet.
  • flaticon.css : Includes Flaticons icon stylesheet.
  • plugins.css : Includes all vendor CSS. If you don't want to use any plugins from this file. You can simply remove those lines from this file.
  • style.css : This is a main stylesheet of the template, This file is dynamically generated with SASS.

Javascript Structure

You will find all necessary JS files at the bottom of every page's source code. Please note that, as this template contains multiple pages, some of the pages have JS files that is specific for that page only (for example Contact Us pages use google map js), which you will find on the source code (at the very bottom) of those pages. Here is combined list of all JS files that has been used throughout all pages of this template:

                                    <!-- JS
                                    ============================================ -->

								    <!-- modernizr JS
								    ============================================ -->
								    <script src="assets/js/modernizr-custom.min.js"></script>

                                    <!-- jQuery JS -->
                                    <script src="assets/js/jquery.1.12.4.min.js"></script>

                                    <!-- Bootstrap JS -->
                                    <script src="assets/js/bootstrap.min.js"></script>

                                    <!-- Plugins JS -->
                                    <script src="assets/js/plugins.js"></script>

								    <!-- google map api and gmaps JS -->
								    <script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_API"></script>
								    <script src="assets/js/gmaps.min.js"></script>
								    
								    <!-- Loading Map Custom Scripts -->
								    <script src="assets/js/custom-map.js"></script>

								    <!-- Particles JS -->
								    <script src="assets/js/particles.min.js"></script>

                                    <!-- Main JS -->
                                    <script src="assets/js/main.js"></script>

                                 
  • Following is some basic ideas of what these files do:
  • ----------------------------------------------
  • modernizr-custom.min.js : Modernizr JS for cross browser compatibility.
  • jquery.1.12.4.min.js : This is the JavaScript Library file. You must need this file to run any javascript. Do not change or edit this file.
  • bootstrap.min.js : Includes the main Javascript of Bootstrap Framework.
  • plugins.js : Includes all vendor JS. If you don't want to use any plugins from this file. You can simply remove those lines from this file.
  • https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_API : Includes the Google Map API to display Map in the pages. In order to use it, you need to replace 'GOOGLE_MAP_API' with your own Google Map API.
  • gmaps.min.js: Includes the gmap JS to properly display Google Map.
  • particles.min.js: Includes the particle JS for a particle effect in a specific area. It is used in the Homepage-3 slider area.
  • main.js: Includes all small scripts from the template. All script has commented code so you can easily remove unnecessary code from this file. Make sure you remove/add proper file before you remove or add anything in this file.

Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list. There are many online favicon icon generator to generate .ico file.

You can add/replace Favicon to your Website using the following code found in top of every template:


								    <!-- favicon
								    ============================================ -->
								    

                                

Page Transition

You can show Interactive loader to your Visitors while the Pages of you Website loads in the background & then Reveal your Pages with CSS3 Transitions. Page Loading Transition is enabled by default.

Disabling Page Transition

To disable the Transition, you can simply remove animsition class from all pages from the <div> that contains whole-site-wrapper class and whole ID as demonstrated below:


								    <!-- Start of Whole Site Wrapper with mobile menu support -->
								    
. . .

Customizing Page Loading Transition

To customize the transition or to change the CSS3 page loader, you need to go to assets/js/main.js and find the code block that is responsible for the page loading transition. The code block can be found after the comment block
s01 - Preloader as demonstrated below:


							        $pageloader.animsition({
							            inClass: 'fade-in',
							            outClass: 'fade-out',
							            inDuration: 800,
							            outDuration: 600,
							            linkElement: 'a:not([target="_blank"]):not([href^="#"]):not([href^="mailto:"]):not([href^="tel:"]):not(.venobox):not(.img)',
							            loading: true,
							            loadingParentElement: 'body',
							            loadingClass: 'cx-pageloader-wrapper',
							            loadingInner: '
', timeout: false, timeoutCountdown: 5000, onLoadEvent: true, browser: [ 'animation-duration', '-webkit-animation-duration'], overlay : false, overlayClass : 'animsition-overlay-slide', overlayParentElement : 'body', transition: function(url){ window.location.href = url; } });

  • Details of the javascript:
  • -------------------------------
  • inClass - Page entering transition animation.
  • outClass - Page exiting transition animation.
  • inDuration - Page entering transition animation duration.
  • outDuration - Page exiting transition animation duration.
  • linkElement - Classes/tags to activate the transition animation.
  • loadingClass - Wrapper class for page loader.
  • loadingInner - Inner classes/tags for loader.

So you can customize the codes as per your preferences.

Note: If you need to change the page loader, replace the contents of loadingInner parameter. Or if you want no page loader, only need to show the page transition animation, delete the loadingInner parameter content i.e. put loadingInner: ''.

If you need more assistance, please check out the official documentation of the plugin.


Logo Settings

The Logo can be found in the Header Container - <header class="header">


                                    

                                

The recommended logo size is 200x100 in px. If you have different height logo, please resize/crop your logo proportionally to match with the header.


Changing Fonts

You can add/change the site font with the one that suits you the best. We have used all fonts from Google Web Font Services.

  • Fonts used in Lineage:
  • Google font - Lato - Used for body text font.
  • Google font - Raleway - Used for Heading/Title font.

You can find the font link in top of all HTML file. See example below:


								    <!-- Google Fonts
								    ============================================ -->
								    

                                

To include new font you can simply add another link like this:


								    <!-- Google Fonts
								    ============================================ -->
								    

									<!-- Open Sans font -->
									

                                

Or add an Pipe separator (%7C) and paste Open+Sans:400,400i,600,700,800 after default website fonts link.

In this way you can include (or remove existing) Google Fonts. If you plan to use a self hosted font, here is an Example of using Self Hosted Fonts.


Changing Colors

Lineage comes with the below color scheme:

  • Primary Color#947cb0
  • Secondary Color#d7706d
  • Tertiary Color#3e3e3e
  • Grey Color#9aabb8
  • Offset Color#f8f9fa
  • Border Color#ddd
  • Text Color#545454

As said earlier, the template is built with SASS. So all the colors are controlled with SASS. Please visit this section to have a detail idea if you want to customize the SASS files. All the colors are kept at assets/_scss/abstract/_variables.scss file. So if you want to change colors, please open the _variables.scss file. You can see all the colors there.

Template Customization Back to Top

Open the page template you want to edit with any text editor like Notepad++ or Sublime Text and you will have the access to the codes immediately. Now please follow below sections or choose from the left side menu to edit specific sections.


Modification of SASS Files

You will find all SASS files (have an extension of .scss) inside assets/_scss folder

  • _scss/abstracts - Contains SASS Functions, Mixins and Variables.
  • _scss/base - Contains Base CSS including Placeholders and Typography.
  • _scss/components - Contains all the SASS components used in this template.
  • _scss/layouts - Contains all the SASS layouts used in this template.
  • _scss/styles.scss - Main SASS file that compiles into master CSS file.

Please note that, you should have some knowledge of SASS to modify these SASS files. If you are not familiar with SASS files, please skip these section. Theses files are only for developers.


You will be needed a SASS proprocessor applications (for example Prepros, Codekit etc.) to complie the SCSS files and generatong the CSS files dynamically.

As you can See there are 4 folders and one "styles.scss" file. Each folder have different SASS files.

  •    All SASS variables are present inside abstract/_variable.scss file.
  •    All HTML components stylings are present inside components folder.
  •    All HTML layouts stylings are present inside layouts folder.
  •    style.scss file is compiled into assets/css/style.css file.

Modification of CSS Files

If you are not familiar with SASS, and want to modify the styles using CSS only, please follow below procedure:

Note: It is strongly recommended not to modify any existing css files as those are generated dynamically using SASS.

  1. Create a new file named modifications.css and keep it inside assets/css folder
  2. Link up this newly created CSS files just below the Master Stylesheet style.css that is present at header
  3. Place your new css code in the modifications.css file

You can visualize the process below:

                                    <!-- CSS files
                                    ============================================ -->

                                    <!-- Boostrap stylesheet -->
                                    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
                                    
                                    <!-- Icon Font CSS -->
                                    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
                                    <link rel="stylesheet" href="assets/css/flaticon.css">

                                    <!-- Plugins stylesheet -->
                                    <link rel="stylesheet" href="assets/css/plugins.css">

                                    <!-- Master stylesheet -->
                                    <link rel="stylesheet" href="assets/css/style.css">

									<!-- Place the modifications.css file here -->
                                    <link rel="stylesheet" href="assets/css/modifications.css">

                                

CSS Helper Classes

Margin related CSS

You can add this helper class to any element in your HTML code to make a margin. See example below:

Class Description
.mb0 margin-bottom: 0
.mt0 margin-top: 0
.mb-full margin-bottom: {section-height}
.mt-full margin-top: {section-height}
.mb-half margin-bottom: 0.5 * {section-height}
.mt-half margin-top: 0.5 * {section-height}
.vmargin margin-top: {section-height};
margin-bottom: {section-height}
.nomargin margin: 0

Padding related CSS

You can add this helper class to any element in your HTML code to make a padding. See example below:

Class Description
.pb0 padding-bottom: 0
.pt0 padding-top: 0
.pb-full padding-bottom: {section-height}
.pt-full padding-top: {section-height}
.pb-half padding-bottom: 0.5 * {section-height}
.pt-half padding-top: 0.5 * {section-height}
.vpadding padding-top: {section-height};
padding-bottom: {section-height};
.nopadding padding: 0

Text Color Related CSS

You can add this helper class to any element in your HTML code to apply text colors. See example below:

Class Description
.color-primary color: {primary-color}
.color-secondary color: {secondary-color}
.color-tertiary color: {tertiary-color}
.color-fourth color: {fourth-color}
.color-offse color: {offset-color}
.color-white color: #fff
.color-transparent color: transparent;

Background Color Related CSS

You can add this helper class to any element in your HTML code to apply background colors. See example below:

Class Description
.bgc-primary background-color: {primary-color}
.bgc-secondary background-color: {secondary-color}
.bgc-tertiary background-color: {tertiary-color}
.bgc-fourth background-color: {fourth-color}
.bgc-grey background-color: {grey-color}
.bgc-offset background-color: {offset-color}
.bgc-white background-color: #fff
.bgc-transparent background-color: transparent;

Border Related CSS

You can add this helper class to any element in your HTML code to make borders. See example below:

Class Description
.rb-bordered border-right: 1px solid {border-color};
border-bottom: 1px solid {border-color};
.tr-bordered border-top: 1px solid {border-color};
border-right: 1px solid {border-color};
.bl-bordered border-bottom: 1px solid {border-color};
border-left: 1px solid {border-color};
.lt-bordered border-left: 1px solid {border-color};
border-top: 1px solid {border-color};
.top-bordered border-top: 1px solid {border-color}
.right-bordered border-right: 1px solid {border-color}
.bottom-bordered border-bottom: 1px solid {border-color}
.left-bordered border-left: 1px solid {border-color}
.border-offset border-color: {offset-color}
.border-text border-color: {text-color}

Social Media Color Related CSS

You can add this helper class to any element in your HTML code to make a background color. See example below:

Class Description
.bg-facebook background: #3B5998
.bg-twitter background: #00ACEE
.bg-gplus background: #DD4B39
.bg-pinterest background: #C8232C
.bg-linkedin background: #0E76A8
.bg-instagram background: #3F729B
.bg-skype background: #00AFF0
.bg-youtube background: #C4302B
.bg-reddit background: #FF4500

Label Related CSS

You can add this helper class to any element in your HTML code to make a label. Simply add label and label-danger (or any class given below) class where you want to add a label. See example below:


									Label name

                                

Class Description Result
label-default Default label Default
label-primary Primary label Primary
label-success Success label Success
label-info Info label Info
label-warning Warning label Warning
label-danger Danger label Danger

Other helper Classes
Class Description
.visually-hidden Completely hides an element
.section-overlay Creates an gradient overlay that uses primary and secondary colors
.default-overlay Creates an overlay that uses color rgba(0, 0, 0, 0.45)
.bt-shadow Creates a bottom shadow of 0 27px 60px -25px rgba(0, 0, 0, 0.3)
.spreaded-shadow Creates a spreaded shadow of 0 60px 135px rgba(0,0,0,0.15), 0 15px 65px rgba(0,0,0,0.15)
.rounded-corners Gives element a border-radius of 4px
.circle Gives element a border-radius of 50%
.overflow-hidden overflow: hidden
.jarallax-default Background Image Parallax Effect with default speed
.jarallax-slow Background Image Parallax Effect with slow speed
.footer-dark Convert light Footer to Dark scheme
.fixed-footer Convert Normal Footer to Fixed footer
.wrapper-with-right-padding padding-right: {heading-margin-bottom}
.wrapper-with-left-padding padding-left: {heading-margin-bottom}

Header Back to Top

Lineage uses an intelligent and smart header which detects mouse scrolling to show header contents. Also header contains the Top Bar, Logo and Main Navigation Menu when user first visit the site.

Note: Header top bar is only included in Homepage version 3.


Header Types

We have provided 2 header color types. Use below class to change header color style. See example below.

							        <!-- Start of Header -->
							        
[Header Contents]
<!-- End of Header -->

Here are the predefined classes you can use to toggle white/transparent header:

Classes Description
<header class="header bgc-white header-white"> Default Header with white background
<header class="header bgc-transparent"> Transparent Header

Also there are three variations of header available. To check these headers, please see Home-1, Home-2 and Home-3. Also check the corresponding markups in the HTML files.

Header Image
Left Logo, Right Menu
Header Image
Left Logo, Center Menu, Right Socials
Header Image
Left Logo, Right Menu with Header Top Bar

Header Top Bar

You need to search inside <header> tag and find the code block that is wrapped with a <div> like this:
<div class="header-top">. Top bar contains social and contact information. You can change/alter the these texts and links there. You can find the top bar code in Home-3 HTML file.

Header Top Image
Header Top Bar
                                	
. . . <!-- Header Top Bar -->
[Header Top Bar Contents]
. . .

Note: To disable Header Top bar, you need to delete the HTML code block that contains it.


Main Navigation Menu

You need to search inside <header> tag and find the code block that is wrapped with an <nav> like this:
<nav id "main-nav" class="stellarnav hidden-xs hidden-sm">. You can change/alter the menu text and links from there.

                                	
. . . <!-- Start of Main Navigation --> <!-- End of Main Navigation --> . . .

Also, if you need to add a new dropdown child menu, just add a <ul> with a class sub-menu in the corresponding <li> tag.

                                	
. . . <!-- Start of Main Navigation --> <!-- End of Main Navigation --> . . .

Mobile Navigation Menu

Lineage uses a beautiful sliding mobile menu with dropdown support. Mobile navigation menu is not inside <header> tag. You can find it just after the start of <body> tag and it is wrapped with an <div> like this: <div class="mobile-menu">.
You can change/alter the menu text and links under <ul class="c-menu__items">. Also if you need a new dropdown child menu, just add an <ul> in the corresponding <li> tag.


                                	<body>

									    <!-- Start of Mobile Menu -->
									    
<!-- end of #c-menu slide-left -->
<!-- End of Mobile Menu -->

Sliders Back to Top

Lineage includes following 2 Unique Sliders to be used on any Page with many Options.

  1. Slider Pro
  2. Swiper Slider

Slider Pro

Slider Pro is a modular, responsive and touch-enabled jQuery slider plugin that enables you to create elegant and professionally looking sliders.

Please find the online documentation of Slider Pro.

You can find the code block contains Slider Pro in Homepage-1, Homepage-2 and Homepage-3 just after the end tag of <header> wrapped around like this: <section class="full-screen-slider-section">.


							        <!-- Start of Slider Section -->
							        
[ All Slides ]
<!-- end of #primary-slider -->
<!-- End of Slider Section -->

Basic Structure of Slider Pro

Inside the slider pro wrapper section, each slide is wrapped with sp-slide class. Please check the below HTML structure of Slider:


							        <!-- Start of Slider Section -->
							        
[ Slide Content ]
[ Slide Content ]
[ Slide Content ]
<!-- end of #primary-slider -->
<!-- End of Slider Section -->

The structure you see in the code above (slider-pro > sp-slides > sp-slide) as well as the class names used are required. If you add an image to the slide and you want it to behave like a background image you need to add the sp-image class to it. A sample code block for a single slide is given below:


									
				                    
<img class="slider-image visually-hidden" src="assets/img/slider/home-1/slide-1.jpg" alt="Slider Image" />

Design Creatively

Welcome to Lineage, a multipurpose bootstrap based corporate HTML template that has all the necessary building blocks and pre-built components in place.


Slider Settings

Slider Pro has a variety of settings. The common ones are given below:

  • data-width - Sets the width of the layer. Can be set to a fixed or percentage value.
  • data-height - Sets the height of the layer. Can be set to a fixed or percentage value.
  • data-show-transition - Describes the direction in which the layer will move when it appears. Values: 'left', 'right', 'up' or 'down'.
  • data-show-delay - Sets a delay for the show transition (Values in milisecond).
  • data-show-offset - Sets an offset for the position of the layer from which the layer will be animated when it appears.
  • data-show-duration - Sets the duration of the show transition.
  • data-hide-transition - Describes the direction in which the layer will move when it disappears. Values: 'left', 'right', 'up' or 'down'.
  • data-hide-delay - Sets a delay for the hide transition (Values in milisecond).
  • data-hide-offset - Sets an offset for the position of the layer from which the layer will be animated when it disappears.
  • data-position - Sets the position of the layer.
  • data-hide-duration - Sets the duration of the hide transition.

Also, there are several predefined classes that can be passed to layers in order to style them. These are given below:

Classes Description
sp-static Sets the layer to be visible all the time, not animated.
sp-black Adds a black and transparent background and makes the font color white.
sp-white Adds a white and transparent background and makes the font color black.
sp-padding Adds a 10 pixel padding to the layer.
sp-rounded Makes the layer's corners rounded.

Slider Customization

Image Replace:

In the above code block, you can can see a <div> wrapper with class sp-slide and inside that you will find an <img> tag with a class of slider-image, after a comment <!-- main image -->. You can change the <img> src with your own images.


									
				                    
<img class="slider-image visually-hidden" src="assets/img/slider/home-1/slide-1.jpg" alt="Slider Image" />
[ Layers ] . . .

Note: Your images should have 1920x1080 dimension to match with the template.


Text Replace:

In the above code block, there is a code block wrapped with <div class="layer-wrapper"> after a comment
<!-- layers -->. Here you can find all the text layers the slide contains. You can replace the text of the heading, paragraph and the button with your own text.


			                        
			                        

Design Creatively

Welcome to Lineage, a multipurpose bootstrap based corporate HTML template that has all the necessary building blocks and pre-built components in place.


Slider Functionality Customization:

To customize further, you need to go to assets/js/main.js file and find the code block that contains the primary slider preceeding by a comment s04 - Primary Slider Settings. A sample code block is given below:


						            $slider.sliderPro({
						                width: '100%',
						                height: '100vh',
						                arrows: true,
						                buttons: false,
						                waitForLayers: true,
						                slideDistance: 0,
						                autoplay: true,
						                autoplayDelay: 5000,
						                touchSwipe: true,
						                fade: true,
						                breakpoints: {
						                    767: {
						                        arrows: false,
						                        height: 500
						                    },
						                    479: {
						                        arrows: false,
						                        height: 480
						                    }
						                }
						            });

                                

  • Details of the javascript:
  • -------------------------------
  • width - Sets the width of the slide. Can be set to a fixed or percentage value.
  • height - Sets the height of the slide. Can be set to a fixed or percentage value.
  • arrows - Indicates whether the arrow buttons will be created.
  • buttons - Indicates whether the buttons will be created.
  • waitForLayers - Indicates whether the slider will wait for the layers to disappear before going to a new slide.
  • slideDistance - Sets the distance between the slides.
  • autoplay - Indicates whether or not autoplay will be enabled.
  • autoplayDelay - Sets the delay/interval (in milliseconds) at which the autoplay will run.
  • touchSwipe - Indicates whether the touch swipe will be enabled for slides.
  • fade - Indicates if fade effect will be used.
  • breakpoints - Sets specific breakpoints which allow changing the look and behavior of the slider when the page resizes.

There are many other settings in Slider Pro. Please check out the online documentation of Slider Pro for further assistance.


Video Settings in Slider Pro

You can embed videos with image sliders altogether in a breeze. You can check the HTML markup for the slider in the Homepage-2. The markup is given below:


							        
							        
<video class="sp-video full-width-video hidden-xs" poster="assets/img/slider/home-2/video-poster.jpg" loop muted autoplay> <img class="slider-image visually-hidden" src="assets/img/slider/home-2/video-poster.jpg" alt="Slider Image" />
[ Layer Contents ]
[ Slide Content ]
[ Slide Content ]

Note: The slider that contains video, must contain a CSS ID of primary-slider-with-video.


Changing the Video

If you want to change the video, you need to replace the <source> src attribute with your own video source. Replace all three source such as webm, mp4, ogg with your own relevant video URL and change the poster with the relevant video image. Also, change the <img> source with the same poster image (slider will show this poster image when viewed in mobile).


Changing the Video Settings

If you want to change the video javascript settings, you need to go to assets/js/main.js file and find the js code block corresponds with the video slider. You can find it in the code block commented with s04 - Primary Slider Settings as demostrated below. Now you can customize it as per your preferences.


						            $vslider.sliderPro({
						                width: '100%',
						                height: '100vh',
						                arrows: false,
						                buttons: true,
						                waitForLayers: true,
						                slideDistance: 0,
						                autoplay: true,
						                autoplayDelay: 8000,
						                fade: true,
						                reachVideoAction: 'playVideo',
						                breakpoints: {
						                    767: {
						                        reachVideoAction: 'none',
						                        height: 500
						                    },
						                    479: {
						                        height: 480
						                    }
						                }
						            });

                                

Note: you can check out the official documentation of Slider Pro for further assistance in video settings.


Combining Slider with Particles

If you want to combine the slider with particles, you need to first add the Particle Script in the footer before the master JS script main.js like below:


								    
								    <script src="assets/js/particles.min.js"></script>

								    
								    <script src="assets/js/main.js"></script>

                                

Then you can add HTML markup to create particle like below:


							        
							        
[ Slider Content ]

That's it. If you want to customize further, please check the particles.js documentation.

Note: Particles.js is only used in Homepage-2.


Swiper Slider

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

Please find the online documentation of Swiper Slider.

You can check the HTML markup in many elements in this template such as testimonial, image carousels...etc.

Basic Structure of Swiper Slider

Here is a basic HTML Code for the Swiper Slider:


									
									
Slide 1
Slide 2
Slide 3
...

The structure you see in the code above (swiper-wrapper > swiper-slides) as well as the class names used are required to operate the slider perfectly. A sample code block is given below. It is from the Homepage-1 testimonial Slider.

									
									
		                            

Quickly reintermediate technically sound infomediaries rather than backend networks. Energistically target high-quality action items with.

Terry Jimenez

CEO, Apple Inc

... ...

Slider Settings

Swiper Slider has a variety of settings. The common ones are given below:

  • data-swiper-autoplay - Delay between transitions (in ms).
  • data-swiper-parallax - Enables parallax transition. Accepts number or percentage values.
  • data-swiper-parallax-scale - Scale ratio of the parallax element when it is in "inactive".
  • data-swiper-parallax-opacity - Opacity of the parallax element when it is in "inactive".
  • data-swiper-parallax-duration - custom transition duration for parallax elements.

Note: The parallax data attributes will only work when the swiper is initialized with 'parallax: true' parameter.


Slider Customization

To customize the default behaviour of the slider, you need to go to assets/js/main.js and find the code block of the specific element you want to customize. A sample code block is given below:

									
						            var testimonial = new Swiper($testimonial, {
						                loop: true,
						                spaceBetween: 40,
						                slidesPerView: 3,
						                slidesPerGroup: 3,
						                grabCursor: true,
						                centeredSlides: false,
						                parallax: true,
						                direction: 'horizontal',
						                effect: "fade",
						                speed: 700,
						                autoplay: {
						                    delay: 5000
						                },

						                pagination: {
						                    el: '.swiper-pagination',
						                    clickable: true
						                },

						                navigation: {
						                    nextEl: '.arrow-right',
						                    prevEl: '.arrow-left'
						                },

						                // Responsive breakpoints
						                breakpoints: {
						                    991: {
						                        slidesPerGroup: 2,
						                    },
						                    550: {
						                        slidesPerGroup: 1
						                    }
						                }
						            });

                                

  • Details of the javascript:
  • -------------------------------
  • loop - Enables continuous loop mode.
  • spaceBetween - Distance between slides in px.
  • slidesPerView - Number of slides per view.
  • slidesPerGroup - Set numbers of slides to define and enable group sliding.
  • grabCursor - Enables user to see the "grab" cursor when hover on slider.
  • centeredSlides - Active slide will be centered.
  • parallax - Activates Parallax effect in slides. Required data-attributes to work.
  • direction - Slide direction. Could be 'horizontal' or 'vertical'.
  • effect - Tranisition effect. Could be "slide", "fade", "cube", "coverflow" or "flip".
  • speed - Duration of transition between slides (in ms).
  • autoplay, delay - Delay between transitions (in ms).
  • pagination - Activates bullet Pagination.
  • navigation - Activates Navigation arrows.
  • breakpoints - Allows to set different parameter for different responsive breakpoints (screen sizes).

Note: You can turn of the navigation or pagination of the slider by simply deleting the navigation/pagination HTML markup from the element.

There are many other settings in Swiper Slider. Please check out the online documentation of Swiper Slider for further assistance.

Elements Back to Top

Lineage comes with a huge number of handy elements which are quite powerful, flexible, functional & easy to use. They can be used anywhere on any page by simply copy/paste them. Setting up elememts is very easy & Self Explanatory.


Animations

Scroll to reveal Animations are latest in the Trends. You can easily add animations to any elements in your website. Animations can be shown on scroll appear. You can use the following helper classes to activate the element animation:

Classes Description
.animation-left Reveals element from left with fade in.
.animation-right Reveals element from right with fade in.
.animation-bottom Reveals element from bottom with fade in.
.animation-top Reveals element from top with fade in.

Note: Some elements have reveal animation by default. Also the reveal animation is disabled for devices with 991px resolution and below.


Customizing the Default Animation Behaviour

In order to customize the default animation behaviour, you need to go to assets/js/main.js file and find the code block corresponds to animation. It can be found after the comment block s31 - Animation Settings as illustrated below:


						            window.sr = ScrollReveal({ scale: 1 });
						            sr.reveal('.animation-left', { origin: 'left', delay: 100 });
						            sr.reveal('.animation-right', { origin: 'right', delay: 150 });
						            sr.reveal('.animation-bottom', { origin: 'bottom', delay: 200 });
						            sr.reveal('.animation-top', { origin: 'top', delay: 200 });
						            sr.reveal('.section-heading:not(.no-animation) h4', { origin: 'left', delay: 100 });
						            sr.reveal('.section-heading:not(.no-animation) h2', { origin: 'right', delay: 150 });
						            sr.reveal('.section-heading:not(.no-animation) .subtitle', { origin: 'bottom', delay: 200 });
						            sr.reveal('.page-title-heading', { origin: 'bottom', delay: 400 });
						            sr.reveal('.page-subtitle', { origin: 'bottom', delay: 600 });
						            sr.reveal('.breadcrumb-container', { origin: 'bottom', delay: 800 });
						            sr.reveal('.info-item:not(.no-animation)', { origin: 'right' }, 100);
						            sr.reveal('.info-item.boxed', { origin: 'bottom' }, 200);
						            sr.reveal('.counter-item', { origin: 'right' }, 200);
						            sr.reveal('.feature-box:not(.no-animation)', { origin: 'right' }, 200);
						            sr.reveal('.member-wrapper .team-member, .team-member-card', { origin: 'bottom' }, 150);
						            sr.reveal('.pricing-table, .pricing-table-type-2, .pricing-table-type-3', { origin: 'bottom' }, 200);
						            sr.reveal('.blog-item-grid, .blog-grid', { origin: 'bottom' }, 200);
						            sr.reveal('.info-box-wrapper', { origin: 'bottom' }, 200);
						            sr.reveal('.tab .nav-tabs:not(.no-animation) li', { origin: 'right' }, 200);

                                

Here you can edit the classes and the 'origin' parameter as per your preference. Note that the 'origin' parameter describes how the elements will be revealed. It can take values like 'top', 'right', 'bottom' and 'left'. Also you can edit the 'delay' duration for reveal.

Moreover, you can chain a reveal animation like below:

                                	sr.reveal('CLASS_NAME', { origin: 'right' }, 200);
                                

Replace the 'CLASS_NAME' by your preferred class name. Also you can change the origin and delay parameter as per your need.

You can find more assistance from the ScrollReveal plugin documentation page.


Section Title

Lineage provides some section title styles. Below are example of codes. Use one of below style to maintain title style.

Default Section Title
Section Title

									
		                            

Sample Title

Default Section Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, cum.


Section Title Type 02
Section Title

									
			                        

Section Title Type Two


Section Title Type 03
Section Title

									
	                                

Sample Title

Section Title Type Three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, at.


Section Title Helper Classes
Classes Description
.left-aligned Left aligns the heading and subtitles.
.white-text Converts the section title into white for darker backgrounds.

Buttons

Use the below code to display all types of supported buttons in this template:


									
									Default Button

									
									Animated Button

									
									Fancy Button

									
									Shadow Button

									
									Button with Arrow

									
									
									
									
									
									
									
									
									
                                

Page Title

Lineage Comes with 2 types of Page titles. Check out the below sample codes for page titles:

Modern Page Title
Page Title

							        
							        

Modern Page Title

Lorem ipsum dolor sit amet


Simple Page Title
Page Title

							        
							        

Simple Page Title

Lorem ipsum dolor sit amet


Parallax Background

Lineage packs two types of parallax backgrounds: Image parallax and Video Parallax.

Image Parallax

You can create parallax effect in an element with background image. To achieve that, all you have to do is attaching a helper class in it as illustrated below:


							        
							        
[ Section Contents ]
[ Section Contents ]

Note: Parallax background is disabled for tablet & mobile devices.


Video Parallax

You can create parallax effect in an element with background video. The sample HTML markup for video background is given below. You can find it in the Homepage-3 video background section.


						            
						            
[ Inner Contents ]

Note: Parallax Video background is disabled for mobile devices.


Changing the Video

To change the video, you need to replace the data-video-src attribute, located in the <div> that contains the class video-container, with your own video source.


					                
[ Inner Contents ]

Replace all three source such as webm, mp4, ogg with your own relevant video URL and you are done!


Configuring the Parallax Speed

If you need to change the parallax speed you need to go to assets/js/main.js file and find the code block that contains parallax JS. You can find it after the comment block s24 - Parallax JS.


						            $parallax.jarallax({
						                speed: 0.6
						            });

						            $parallaxSlow.jarallax({
						                speed: 0.2
						            });

                                

As you can see here, the default parallax speed is set to 0.6 and the slow parallax speed is set to 0.2. speed parameter is for Parallax effect speed. It Provides numbers from -1.0 (lowest) to 2.0 (highest). Here you can change the speed as per your preferences.

To explore more options you can check out the Official Documentation for jarallax Plugin


Tabs & Accordions

You can use Tabs & Accordions in different Styles to display Below the Fold content.

Tabs

Use the below code to display default Tabs:


									
		                            

[ Tab Contents ]

[ Tab Contents ]

[ Tab Contents ]

Note: Make sure you use unique IDs for each Tab Container and Tab Items. Also for darker background you can add
<div class="tab white-text"> to convert tab into white scheme.


Iconic Tabs

Use the below code to display Iconic Tabs:


									
		                            

[ Tab Contents ]

[ Tab Contents ]

[ Tab Contents ]

[ Tab Contents ]

Note: Make sure you use unique IDs for each Tab Container and Tab Items. Also for darker background you can add
<div class="tab iconic-tab white-text"> to convert tab into white scheme.


Accordions

Use the below code to display Accordions:


									
	                                

[ Accordion Content ]

[ Accordion Content ]

. . .

Note: Make sure you use data-parent attribute matches the main accordion ID. Also to work correctly, accordion needs unique IDs for both accordion heading and accordion body. Also for darker background you can add
<div class="accordion white-text"> to convert accrodion into white scheme. You can use helper class accordion-type-2 to change the style of accordion.


Lightboxes

Lineage uses different lightboxes to show popup dialogues and images. Please read the following sections for having a clear idea of how to set up and use the lightboxes.

Image Popup Lightbox - Photoswipe

For image popups, Lineage uses 'Photoswipe' Plugin. Photoswipe is an unique touch-friendly JavaScript image gallery for mobile and desktop.

Please find the official documentation of Photoswipe.

Note: To successfully activate Photoswipe, HTML markup initialization is required. You can find the initialization code block at the end of every page with the comment of <!-- Initializing Photoswipe -->.

Use the below sample code to build up an image popup with photoswipe:


									
                                    
<img src="image_src" alt="Popup Demostration">
This is a caption
. . . [ Other <figure> tags ] . . .

  • Some things to consider when using photoswipe
  • ----------------------------------------------------------------
  • image-popup is the trigger for photoswipe. It is a required class for popup.
  • Image URL used in the <img> tag will be the normal small image, whereas the image URL used in the href attribute of the <a> tag is the large image that will be popped up.
  • The data-size attribute is the px dimension (size) of the large image. It represents as the width x height of the large image.
  • The width and height ratio of the small image must be same as the large image. Otherwise, the popup transition animation will be broken.
  • The figcaption tag is responsible for the caption/title of the popped up image.

Note: If you want to group some images to show the image popup like a gallery, you need to add other <figure> tags inside image-popup.


Modal Popup Lightbox

Use the below sample code for modal popup lightbox:


									
									 Madal Popup 

									
	                                

                                

Note: Make sure you use unique IDs for each Modal Container and Modal Items. Also the data-vbtype="inline" attribute is required to trigger the modal body. The data-title attribute is responsible for caption/title for the modal body.


Video Popup Lightbox

Use the below sample code for video popup lightbox:


									
									
										
									

                                

Note: The data-vbtype="video" attribute is required to trigger the modal video. The data-title attribute is responsible for caption/title for the modal video. You can embed Both Youtube and Vimeo Videos in the modal.

You can use the data-autoplay attribute to activate the autoplay of the video when modal is active (if the browser supports autoplay).

If you need to further customize the functionality or modal window dimension, you need to go to assets/js/main.js file. The code block can be found after the comment s30 - Modal Settings as demonstrated below:


							        // Video Modal
						            $iframeModalEl.venobox({
						                spinner: 'cube-grid',       // Preloader type
						                titleattr: 'data-title'     // Specific attribute to display a title (e.g. 'data-title')
						            });
							        

							        // Inline Modal
						            $inlineModalEl.venobox({
						                spinner: 'three-bounce',    // Preloader type
						                titleattr: 'data-title',    // Specific attribute to display a title (e.g. 'data-title')
						                framewidth: '800px',        // Static window width
						                frameheight: '425px'        // Static window height
						            });

                                

For further assistance, please check the official documentation of the plugin.


Google Map

Both Contact Us pages, Homepage-2 and Homepage-3 uses an eye catching Google Map to display map location. You can add this beautifully designed Google Maps to any Page using the following setup:

Step-1:

Add the Google Maps Specific Scripts in the footer before the master JS script main.js like below:


								    
								    <script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_API"></script>
								    <script src="assets/js/gmaps.min.js"></script>
								    
								    
								    <script src="assets/js/custom-map.js"></script>

								    
								    <script src="assets/js/main.js"></script>

                                

Note: You will need a Google Map API to show Google Map in pages. You can generate your API Key for Google Maps by Clicking Here, then Click on 'Get Started' button and follow the procedure. Make sure you replace GOOGLE_MAP_API with you Generated API Key in the above code.


Step-2:

The sample code block for Google Map is given below:


									
		                            

Step-3:

To change the Latitude and Longiture of the map, navigate to the assets/js/custom-map.js which contains the javascript for Google Map. Check out the below code to get an idea:


								    map = new GMaps({
								        el: '#gmap',

								        // Latitude and longitude for centering map location
								        lat: 38.435828,
								        lng: -122.728091,

								        scrollwheel:false,
								        zoom: 17,
								        zoomControl : true,
								        panControl : false,
								        streetViewControl : false,
								        mapTypeControl: true,
								        overviewMapControl: false,
								        clickable: false
								    });

									// map Marker Image
								    var image = 'assets/img/contact/map-marker.png';

								    map.addMarker({

								    	// Latitude and longitude for map marker
								        lat: 38.435828,
								        lng: -122.728091,

								        icon: image,
								        animation: google.maps.Animation.DROP,
								        verticalAlign: 'bottom',
								        horizontalAlign: 'center',
								        backgroundColor: '#3e8bff'
								    });

                                
  • Details of the javascript:
  • -------------------------------
  • The first pair of lat, lng from the top is responsible for map centering. So provide your own latitude and longitude here. ( 'lat' = latitude and 'lng' = longitude )
  • The second pair of lat, lng is responsible for map marker image.
  • Both pair of lat, lng needs to be same to display the location correctly.
  • Image URL in var image is the map marker image. You can change the image from here by giving the new image URL here.
  • You can also tweak the other JS parameters to increase the functionality/user experience of the map as per your preferences.

Counter Up

Use the below code to display Counter up:


									
		                            

124

Title

Note: The data-to attribute value is responsible for count up. Also you can speed up or down the counter up from data-speed attribute.

You can add type-3 in the counter-item wrapper to change its look. The type-2 counter HTML markup is little different from the above code. Check it our below:


									
		                            

124

Title


Skill Bars

Use the below code to display Skill bars:


									
									
Skill Title

. . . . . .

Note: The data-percent attribute value is responsible for skills animation. You can put any preferable value in it. Also if you want stripe animation, you can add with-stripes class in skillbar-wrapper.

If you want to further customize the element, you need to go to assets/js/main.js and find the code block after comment s12 - Skill Bars.


                                    $elem.skillBars({
                                        from: 0,
                                        speed: 2500,
                                        interval: 100,
                                        decimals: 0
                                    });

                                

If you want further assistance, you can check you the official documentation of the plugin.


Pie Chart

Use the below code to display Pie Chart:


									
		                            
Title

Note: You can use default, rounded-corders and with-border class to change the style of Pie Chart.


To change the gradient color, check the assets/js/main.js. You can find the code block after comment s28 - Pie Chart Settings.


				                    $elem.easyPieChart({
				                        easing: 'cubic-bezier(.2,1,.22,1)',
				                        scaleColor: false,
				                        animate: ({ duration: 2000, enabled: true }),
				                        lineWidth: 24,
				                        trackWidth: 16,
				                        trackColor: "#c6e7e5",
				                        lineCap: 'butt',
				                        barColor: function(percent) {
				                            var ctx = this.renderer.getCtx();
				                            var canvas = this.renderer.getCanvas();
				                            var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
				                                gradient.addColorStop(0, "#d7706d");
				                                gradient.addColorStop(1, "#947cb0");
				                            return gradient;
				                        },
				                        onStep: function(from, to, percent) {
				                            $(this.el).find('.pie-percent').text(Math.round(percent));
				                        }
				                    });

                                

Here, you can change the trackColor and barColor that builds up with gradient. Also, you can change other parameters to suite your needs.


Use the below code to display another Pie Chart style:


									
                                    
Title

Note: You can use rounded-corders and with-border class to change the style of Pie Chart.

Also, to change the colors, check the assets/js/main.js. You can find the code block after comment s28 - Pie Chart Settings.


				                    $elem.easyPieChart({
				                        easing: 'cubic-bezier(.2,1,.22,1)',
				                        scaleColor: false,
				                        animate: ({ duration: 2000, enabled: true }),
				                        lineWidth: 5,
				                        trackWidth: 5,
				                        trackColor: "transparent",
				                        lineCap: 'butt',
				                        barColor: '#947cb0',
				                        onStep: function(from, to, percent) {
				                            $(this.el).find('.pie-percent').text(Math.round(percent));
				                        }
				                    });

                                

If you need further assistance, please check out the documentation of the plugin.


Tilt Element

In Lineage, some elements use beautiful 3d parallax tilt effect. Below is the sample code to achieve the effect:


									
		                            
[ An image tag ]
[ Inner Content ]

Note: The classes tilt-element and tilt-child is required to achieve tilting effect.

If you want to customize further, you need to go to assets/js/main.js and you can find the code after the comment
s26 - Tilt Settings.


					                $tiltEl.tilt({
					                    maxTilt: 18,
					                    perspective: 1140, // Transform perspective, the lower the more extreme the tilt gets.
					                    speed: 800,        // Speed of the enter/exit transition.
					                    glare: true,       // Enables glare effect
					                    maxGlare: 0.2,     // From 0 - 1.
					                    easing: "cubic-bezier(.2,1,.22,1)"  // Easing on enter/exit.
					                });

                                

If you need further assistance, please check out the official documentation of the plugin.

Note: Tilt Effect is disabled for mobile devices.


Flip Element

In Lineage, some elements use beautiful 3d flip effect. Below is the sample code to achieve the effect:


									
									
[ Front content ]
[ Back content ]

If you want to customize further, you need to go to assets/js/main.js and you can find the code after the comment
s29 - Flip Settings.


						            $flipEl.flip({
						                axis: 'y',          // The axis that you want to rotate around
						                trigger: 'hover',   // Event that activates the flip action.
						                reverse: true       // Set to true if you want to reverse the direction of the flip.
						            });

                                

If you need further assistance, please check out the official documentation of the plugin.


Contact & Quote Forms

This template features two types of functional forms in different pages. One is a basic 'Contact Form' and other one is a basic 'Quote Form'. Both of these forms are fully functional. The only thing you need to do is to setup your email address. 'Contact Form' is used in 'Contact-1' page and 'Quote Form' is used in 'Contact-2' and Homepage-2.

Contact Form

It's the same as the Contact Form. Go to 'sendemail.php' that is provided in the template directory and replace 'YOUR@EMAIL.HERE' within the quotation mark there as per below demostration:


									// Replace with your email
                                    $email_to = 'YOUR@EMAIL.HERE';
                                

Use the below code to display the 'Contact Form':


									
		                            

Quote Form

Go to 'sendquote.php' that is provided in the template directory and replace 'YOUR@EMAIL.HERE' within the quotation mark there as per below demostration:


									// Replace with your email
                                    $email_to = 'YOUR@EMAIL.HERE';
                                

Use the below code to display the 'Quote Form':


									
		                            

Note: You can use a class transparent-input in the wrapper to use in a darker background for both forms.


Scroll to Top

You can add a Go To Top Trigger on your Page to allow your users to scroll to the Top of the Page anytime they need to. It is enabled by default. Simply add the code below at the bottom of the page just after the Whole Site Wrapper ends:


								    
								    

Also, if you want to disable scroll to top button, delete the above codes from the pages.


Smooth Scrolling

You can use smooth scrolling on any section for Intra Page Navigation purposes. Just add the class sm-scroll to the anchor tag containing the href of the intra element and you are done.


								    
									Click here
                                

Animated Typing

Lineage comes with beautiful animated typing. You can enter any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set. To setup animate typing, please check the below sample code:


                                    
                                    

                                

The class typed-element is required to trigger the animated typing. The data-typed-strings attribute is responsible for the strings for animated typing. The words that you want to animate, need to be seperated by comma (,) inside the data-typed-strings attribute. Also, if you can pause the animation in the middle of a string for a given amount of time by including an escape character (^).

If you want to further customize the functionality, go to assets/js/main.js and find the code block after the comment s27 - Typed js Settings as demonstrated below:


                                    $this = new Typed(".typed-element", {
                                        strings: typedStrings,
                                        typeSpeed: 120,
                                        startDelay: 100,
                                        backSpeed: 30,
                                        backDelay: 500,
                                        loop: true,
                                        loopCount: Infinity,
                                        showCursor: true,
                                        cursorChar: "|",
                                        attr: null,
                                        contentType: 'html'
                                    });

                                
  • Details of the javascript:
  • -------------------------------
  • typeSpeed - Type speed in milliseconds.
  • startDelay - Time before typing starts in milliseconds.
  • backSpeed - Backspacing speed in milliseconds.
  • backDelay - Time before backspacing in milliseconds.
  • showCursor - Show typing cursor.
  • cursorChar - Character for typing cursor.

Here you can edit the parameters as per your preferences.

If you need further assistance, please check out the official documentation of the plugin.

Portfolio Back to Top

Lineage provides a very elegant way to showcase your work. Setting up Portfolio is simple. You can use grid, masonry and list views with beautiful single pages to showcase. Please use the following codes to setup portfolio with Isotope.


Isotope Setup

This template uses jQuery library Isotope and ImagesLoaded to build up grid and masonry layouts.

Setting up Portfolio Filter

Use the below code to set up portfolio filter:

                            		
		                            
  • All
  • Modern
  • Illustration
  • Art
  • Design
  • Branding

Setting up Portfolio Items

Use the below code to set up portfolio items:

                            		
			                        
<img src="path-to-normal-image.jpg" alt="Portfolio Image">

Portfolio Title

Design | Art | Color

[ Other Portfolio Items ] . . . . . .

In this code block, all the portfolio related class is required to properly activate Isotope and Photoswipe.

Note:portfolio-popup class is the trigger for Photoswipe Image Popup. Please check out this section to have a basic knowledge of Photoswipe Setup.

Note-2: Default portfolio markup as given above will build up the no gutter (no margin) version of the Portfolios. To have gutter items just add the class with-gutter in the <portfolio-wrapper> wrapper.


Javascript for Isotope

You can find the JS responsible for Isotope initialization in the assets/js/main.js after the comment of
s11 - Isotope Js for Portfolio Section.

                                	// Portfolio Layout & Item
						            $isoContainer.imagesLoaded(function() {
						                $isoContainer.isotope({
						                    itemSelector: ".portfolio",
						                    layoutMode: 'masonry',
						                    stagger: 60,
						                    percentPosition: true
						                });
						            });

									// Portfolio Filter
						            $isoFilter.on('click', function(e) {
						                var $this = $(this);
						                var $filter = $this.attr('data-filter');

						                $isoContainer.isotope({
						                    filter: $filter
						                });

						                $isoFilter.removeClass('active');
						                $this.addClass('active');
						            });
                                

For further assistance, please check the rich documentation of Isotope.


Hover Effects

Portfolio Section has three different hover effects available with beautiful transitions. Please check below to understand the codes.

Portfolio Hover Effect 1
Portfolio Image
Portfolio Hover Effect 1
                            		
			                        
<img src="path-to-normal-image.jpg" alt="Portfolio Image">

Portfolio Title

Design | Art | Color

[ Other Portfolio Items ] . . . . . .

Portfolio Hover Effect 2
Portfolio Image
Portfolio Hover Effect 2
                            		
			                        
<img src="path-to-normal-image.jpg" alt="Portfolio Image">

Portfolio Title

Design | Art | Color

[ Other Portfolio Items ] . . . . . .

Portfolio Hover Effect 3
Portfolio Image
Portfolio Hover Effect 3
                            		
			                         
                                

Blog Back to Top

Lineage provides a two types of Blog layout: Grid and List. Setting up Blog is simple. Please use the following codes to setup blog.


Blog Setup

Check the below sample codes for blog posts:

Blog Grid layout
	                            	
	                                 
                                

Blog List layout
	                            	
	                                
[ Other Blog Articles ] . . . . . .

Post Types

Lineage supports 6 different types of post types as listed below:

  • Standard Post
  • Gallery Post
  • Vimeo Video Post
  • Youtube Video Post
  • SoundCloud Audio Post
  • Quote Post

You can check all the post types from the Template Demo.

Icons Back to Top

Lineage uses many beautiful Icons. It feaures FontAwesome and Flaticons in diffrent sections of the pages.


Font Awesome

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements. See example below:

	                            	
									
                                

For more information visit Font Awesome Official Website. For all Fontawesome icon list Click here.


Flaticons

You can use Flaticons same as Font Awesome icons just about anywhere using the CSS Prefix fi and the icon's name. To get all the Flaticons used in this template, please open the folder /assets/fonts/flaticon.html and open the file in a browser, and you will get all the flaticons html markup there. You can use any icon as you want. The HTML markup will be like this:

	                            	
									
                                

If you want to use the icons as a CSS before/after element, please open the file assets/css/flaticon.css file in a file editor like Notepad++ or Sublime Text and you will get all the CSS entity for the required icons. See example below:

	                            	/* Flaticons CSS Entities */

									.flaticon-smartphone-1:before {
									  	content: "\f100";
									}
									.flaticon-phone-call-1:before {
									  	content: "\f101";
									}
									.flaticon-shopping-cart-2:before {
									  	content: "\f102";
									}
									.flaticon-shield:before {
									  	content: "\f103";
									}
									.flaticon-down-arrow-2:before {
									  	content: "\f104";
									}
									.flaticon-right-arrow-2:before {
									  	content: "\f105";
									}
									.flaticon-left-arrow-2:before {
									  	content: "\f106";
									}
									.flaticon-up-arrow-1:before {
									  	content: "\f107";
									}
									.flaticon-arrows:before {
									  	content: "\f108";
									}
									.flaticon-right-arrow-1:before {
									  	content: "\f109";
									}
									.flaticon-down-arrow-1:before {
									  	content: "\f10a";
									}

									[ Other Icon CSS Entities ]
									. . .
									. . .
                                

See a sample example of how to use the CSS entities:

	                            	/* Flaticons CSS Entities Usage */
									.example-heading a::before {
					                    content: "\f108";
					                    font-family: Flaticon;
					                    position: absolute;
					                    left: 10px;
					                    font-size: 15px;
					                    top: auto;
					                }
                                

In above example, "\f108" is the CSS entity of flaticon-arrows icon.


Flaticons Icons List

.flaticon-smartphone-1
Author: Smashicons
.flaticon-phone-call-1
Author: Iconnice
.flaticon-shopping-cart-2
Author: Pixel perfect
.flaticon-shield
Author: Pixel perfect
.flaticon-down-arrow-2
Author: Pixel perfect
.flaticon-right-arrow-2
Author: Pixel perfect
.flaticon-left-arrow-2
Author: Pixel perfect
.flaticon-up-arrow-1
Author: Pixel perfect
.flaticon-arrows
Author: Pixel perfect
.flaticon-right-arrow-1
Author: Pixel perfect
.flaticon-down-arrow-1
Author: Pixel perfect
.flaticon-left-arrow-1
Author: Pixel perfect
.flaticon-up-arrow
Author: Pixel perfect
.flaticon-down-arrow
Author: Pixel perfect
.flaticon-left-arrow
Author: Pixel perfect
.flaticon-right-arrow
Author: Pixel perfect
.flaticon-pie-chart
Author: Smashicons
.flaticon-graph
Author: Smashicons
.flaticon-location-1
Author: Freepik
.flaticon-pay-per-click
Author: Freepik
.flaticon-shopping-cart-1
.flaticon-light-bulb-1
.flaticon-businessman
.flaticon-technology
Author: Iconnice
.flaticon-mail
Author: Iconnice
.flaticon-price-tag
Author: Smashicons
.flaticon-shopping
Author: Smashicons
.flaticon-note
Author: Smashicons
.flaticon-email
Author: Freepik
.flaticon-add
Author: Smashicons
.flaticon-substract
Author: Smashicons
.flaticon-map
Author: Smashicons
.flaticon-placeholder
Author: Smashicons
.flaticon-layers
Author: Smashicons
.flaticon-smartphone
Author: Smashicons
.flaticon-map-location
Author: Smashicons
.flaticon-processing
Author: Smartline
.flaticon-location
Author: Smashicons
.flaticon-tags
Author: Dave Gandy
.flaticon-user-male-black-shape
Author: SimpleIcon
.flaticon-left-quote
Author: Freepik
.flaticon-left-quote-sketch
Author: Freepik
.flaticon-new-email-outline
Author: GraphicsBay
.flaticon-five-stars-outlines
Author: Freepik
.flaticon-writing
Author: Plainicon
.flaticon-consultation
Author: Freepik
.flaticon-quote
Author: Freepik
.flaticon-light-bulb
Author: Freepik
.flaticon-plus-symbol
Author: Lyolya
.flaticon-minus-symbol
Author: Lyolya
.flaticon-browser
Author: Freepik
.flaticon-coffee-cup-1
Author: Freepik
.flaticon-folder
Author: Freepik
.flaticon-phone-call
Author: Freepik
.flaticon-worldwide
Author: Freepik
.flaticon-tactics
Author: Freepik
.flaticon-list
Author: Freepik
.flaticon-seo
Author: Freepik
.flaticon-people-2
Author: Freepik
.flaticon-support-1
Author: Becris
.flaticon-marketing
Author: Freepik
.flaticon-time
Author: Tomas Knop
.flaticon-employee
Author: Freepik
.flaticon-computer-1
Author: Prosymbols
.flaticon-pencil
Author: Freepik
.flaticon-idea
Author: Freepik
.flaticon-premium
Author: Freepik
.flaticon-sport
Author: Eucalyp
.flaticon-social-media
Author: Freepik
.flaticon-stationery
Author: Freepik
.flaticon-monitor-1
Author: Freepik
.flaticon-team-1
Author: Freepik
.flaticon-humanpictos
Author: Freepik
.flaticon-shopping-cart
Author: Pixel perfect
.flaticon-multimedia
Author: Pixel perfect
.flaticon-package
Author: Nhor Phai
.flaticon-graphic-design
Author:
.flaticon-pen
Author: Pixel perfect
.flaticon-computer
Author: Freepik
.flaticon-add-documents
Author: Freepik
.flaticon-web-design
Author: Eucalyp
.flaticon-handshake
.flaticon-coffee-cup
Author: Smashicons
.flaticon-monitor
Author: Freepik
.flaticon-horizontal
Author: Smashicons
.flaticon-html
Author: Freepik
.flaticon-business
Author: Freepik
.flaticon-people-1
Author: DinosoftLabs
.flaticon-rating
Author: Freepik
.flaticon-medal-1
Author: Becris
.flaticon-responsive
Author: Becris
.flaticon-medal
Author: Freepik
.flaticon-gear
Author: Freepik
.flaticon-people
Author: Freepik
.flaticon-man
Author: Freepik
.flaticon-team
Author: Freepik
.flaticon-support
Author: Freepik
.flaticon-startup
Author: Freepik
.flaticon-coding
Author: Becris
.flaticon-internet
Author: Smartline
.flaticon-tick-1
Author: Freepik
.flaticon-tick
Author: Freepik
.flaticon-close
Author: Cole Bemis
.flaticon-cross
Author: Balraj Chana

Credits Back to Top


Images & Videos


Scripts

  • jQuery - Javascript library
  • Bootstrap - Twitter boostrap framework
  • Isotope - An exquisite jQuery plugin for magical layouts
  • ImagesLoaded - Detect when images have been loaded.
  • Gmap JS - Google Maps API
  • Modernizr JS - jQuery modernizr for cross browser support detecting
  • Particles JS - A lightweight JavaScript library for creating particles
  • jQuery Appear - jQuery plugin to call a function when an element appears
  • StellarNav JS - jQuery responsive, lightweight, multi-level dropdown menu
  • Slider Pro - Elegant and Professional Sliders
  • Swiper Slider - Most modern mobile touch slider
  • Jarallax - NO dependencies JavaScript parallax scrolling
  • Photoswipe - jQuery image popup plugin
  • Slide and Push Menu - Slide and push menus with CSS3 transitions
  • jQuery CountTo - A jQuery plugin that will count up (or down) to a target number
  • Headroom JS - jQuery scroll to hide the Nav Menu plugin
  • Tilt JS - A tiny parallax tilt hover effect for jQuery
  • jQuery Easing JS - A jQuery plugin from GSGD to give advanced easing options
  • ScrollReveal - Easy scroll animations for web and mobile browsers
  • jQuery CSS Skills Bar - Animated skill bars
  • Venobox - Responsive jQuery modal window plugin
  • Typed JS - A JavaScript Typing Animation Library
  • Easy Pie Chart - jQuery plugin to draw simple, animated pie charts
  • Flip JS - A lightweight jQuery plugin to make 3D card flipping animation
  • Animsition - jQuery plugin for CSS animated page transitions

CSS & Fonts

Thank You Back to Top

Once again, thank you so much for purchasing this HTML template. We'd be glad to help you if you have any questions relating to this template. Please keep that in mind that we are working very hard to providing better quality in coming days. If you love our work then appreciate us by writing a good review with 5 star.