Introduction


First of all, Thank you so much for purchasing this template and for being my loyal customer.

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 it properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.

Quick Start

Get details about Requirements, Basic Installation, Structure, Color mode, Logo, favicon and loader setup your project with easy steps.

File Structure

Here is the general File structure of the template:

  • html
    • assets
      • css
      • js
      • images
      • vendor
    • app
      • all app html pages
    • backend
      • all backend html pages
  • documentation
    • asset
    • index.html

Installation

Basic Installation

Steps to be followed for getting started with the template:

HTML

  1. Open HTML folder to find all the Template files.
  2. You need to upload these files using FTP on your server.
  3. Make sure you maintain the structure while uploading the required files/folders:
    • HTML/assets/css - Stylesheet Folders
    • HTML/assets/images - Image Folders
    • HTML/assets/js - Javacript Folders
    • HTML/assets/vendor - Vendor Folder
    • HTML/app - App Folder
    • HTML/backend/index.html - Index File/Homepage
    Other files can be used according to your convenience.
  4. Now that you have followed these steps, your basic installation is complete and ready to flaunt your site to the world.

HTML Structure

Here is the general HTML structure of the template:


<!DOCTYPE html>
<html lang="en">
<head>
[Page meta, page css, page js files, page title etc...]
</head>

<body> <!-- preloader --> <div id="loading" > [LOADER CONTENT] </div> <!--preloader --> <!--header --> <header>

</header> <!--header --> <!--main-content- --> <div class="main-content" > <!--Section 1- --> <section> [SECTION 1 CONTENT] </section> <!--Section 1- --> <!--Section 2- --> <section> [SECTION 2 CONTENT] </section> <!--Section 2- --> <div> <!--main-content- --> <!--footer- --> <footer class="iq-footer2" > [FOOTER_CONTENT] </footer> <!--footer- --> [PAGE JAVASCRIPTS HERE] </body> </html>

CSS Structure

Here is the general CSS structure of the template:


<!-- Backend CSS -->
<link rel="stylesheet" href=".../assets/css/backend.min.css">

<!-- fontawesome CSS -->
<link rel="stylesheet" type="assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">

<!-- line-awesome CSS -->
<link rel="stylesheet" href=".../assets/vendor/line-awesome/dist/line-awesome/css/line-awesome.min.css">

<!-- remixicon CSS -->
<link rel="stylesheet" href=".../assets/vendor/remixicon/fonts/remixicon.css">

<!-- dripicons CSS -->
<link rel="stylesheet" href="...assets/vendor/@icon/dripicons/dripicons.css">
                                            
                                        

Javascript Structure

Here is the general Javascript structure of the template:


<!-- Backend-bundle JS -->
<script src="../assets/js/backend-bundle.min.js" ></script>

<!-- Ionicons  -->
<script src="../assets/vendor/ionicons/dist/ionicons.js"></script>

<!--  Flextree -->
<script src="../assets/js/flex-tree.min.js" ></script>
<script src="../assets/js/tree.js" ></script>

<!-- Table Treeview Javascript -->
<script src="../assets/js/table-treeview.js"></script>

<!-- Masonary Javascript -->
<script src="../assets/js/masonry.pkgd.min.js"></script>
<script src="../assets/js/imagesloaded.pkgd.min.js"></script>

<!-- Mapbox Javascript -->
<script src="../assets/js/mapbox-gl.js"></script>
<script src="../assets/js/mapbox.js"></script>

<!-- SweetAlert Javascript -->
<script src="../assets/js/sweetalert.js"></script>

<!-- Vectoe Map Javascript -->
<script src="../assets/js/vector-map-custom.js"></script>

<!--  Customizer Javascript  -->
<script src="../assets/js/customizer.js" ></script>

<!-- Chart Custom JavaScript -->
<script src="../assets/js/chart-custom.js"></script>

<!-- Slider JavaScript -->
<script src="../assets/js/slider.js"></script>

<!-- App JavaScript -->
<script src="../assets/js/app.js"></script>
                                        

For 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.

You can add a Favicon to your Website using the following code:

<link rel="shortcut icon" href="images/favicon.ico">

For Page Loading Transitions

Page Loading Transitions are enabled by default. If you wish to disable the page loading transition you can simply delete with the help of below section code

 <div id="loading">
    <div id="loading-center">
    </div>
</div>

For Changing Fonts

You can add or change the site font from all fonts (used from Google Web Font Services). You can choose any one that suits you the best. You can find the font link at the top of the Style.css in all HTML files. Refer the below example:

 <!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i,700,800|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900" rel="stylesheet"> 

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

 <!-- google font -->
<!-- Robaoto font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap" />

<!-- "Nunito",sans-serif font -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600&display=swap" rel="stylesheet">

In order to change the fonts, you need to edit the above links with your custom font. You can use Google Web Font Services (If you plan to use a Google Font or remove it completely.) If you plan to use a self hosted font, here is an Example of using Self Hosted Fonts: Self Hosted Fonts

Helper classes

For section padding

You can add helper class by setting section padding as top 100px and bottom 100px.
Add overview-block-ptb class in section tag. Refer the below example:


<section class="... overview-block-ptb">
  [YOUR CONTENT]<p>
 </section>
</p>
                                        

Note Use this helper class to maintain all page section spacing. You can also use overview-block-pt for only padding top and overview-block-pb for only padding bottom.

For Text color

You can add color in your text simply by adding .main-color (or any color you want) class. Refer the below example:


<div class="text-primary">
    [YOUR TEXT CONTENT]
</div>
                                        

Note You can also include 4 color helper class (i-e, text-gray, text-black, main-color and text-white) in our template. You can add unlimited color class according to your needs.

For Background color

You can set color in the background simply by adding .white-bg (or any other color you want) class. Refer the below example:


<div class="bg-primary">
    [YOUR CONTENT]
</div>
                                        

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

For Background Images and pattern

You can use an image in the background with parallax effect by simply adding InlineStyle inside div tag. With the help of this you can create your own background. Refer the below example:


<div style="background-image:url(Path); ">
    [YOUR CONTENT]
</div>
                                        

If your background is small and you want to use repeated background then use styling property background-repeat and set the value as repeat or no-repeat. Refer the below example:


<div style="background-image:url(Path); background-repeat:no-repeat;">
    [YOUR CONTENT]
</div>
                                        

If you want to use your background like cover or container then you need to add styling property background-size and set the value as cover or container. Refer the below example:


<div style="background-image:url(Path); background-size:cover;">
    [YOUR CONTENT]
</div>

For Background overlay

You can use classes like .iq-over-black-30, .iq-over-white-20, .iq-over-green-90 with any element in your HTML code. This will help you to apply overlay color on any image or section. Refer the below example:


<div class="iq-over-black-80">
    [YOUR CONTENT]
</div>
                                        

Structure: .iq-over-{color}-{opacity}. For Example, .iq-over-black-80

Bootstrap Components

For Sliders

There are 2 different sliders with variety of options. You can apply these sliders on any page you want. The list of the Sliders are:

  • Slick Slider
  • Swipper Slider

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.


Images



Scripts



CSS & Fonts