USER GUIDE

On behalf of iqonicthemes team, we would like to thank you for purchasing this item. Your support encourages us to build better items and continuously bring value to our products. This documentation file covers all the information needed to install and use this Template. You'll find everything you need to know to create a stunning and beautiful website in minutes.

Appino is a HTML/CSS template based on Bootstrap 3+ framework. This documentation will give you an understanding of how Appino template is structured and guide you in performing common functions. If you require further assistance not covered in this documentation, please contact us in our Support Click here to contact us

Created: 3 October 17
By: iQonicthemes
Email: design@iqonicthemes.com
HelpDesk: http://iqonicthemes.com/contactus

Basic Installation

Steps to be follow for getting started with the template:

Open ... /Template Folder to find all the Templates Files
You'll have to upload these file using a FTP on your server
Make sure you maintain the structure while uploading the required files/folders:
- HTML/css - Stylesheets Folder
- HTML/fonts - Fonts Folder
- HTML/images - Images Folder
- HTML/js - Javacripts Folder
- HTML/videos - Video and Audio Folder
- HTML/php - php File
- HTML/index.html - Index File/Homepage
Other files can be used according to your convenience.
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" class="green-bg" > [LOADER CONTENT] </div>

<!--preloader --> 



<!--header -->

<header id="header-wrap" >
 </header>

<!--header --> 



<!--Slider- -->

<section id="iq-home" class="banner" > 

[SLIDER CONTENT] 

</section>

<!--Slider --> 



<!--Section 1 -->

<section> 

[SECTION 1 CONTENT] 

</section>

<!--Section 1 -->
 <!--Section 2 -->

<section> 

[SECTION 2 CONTENT] 

</section>

<!--Section 2 -->



<!--footer --> 

<footer class="iq-footer"> 

[FOOTER_CONTENT] 

</footer>

<!--footer --> 
 <div id="back-to-top"> 

[BACK TO TOP CONTENT]

</div>
   [PAGE JAVASCRIPTS HERE]
 </body>

</html>

CSS Structure

Here is the general CSS structure of the template:

<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!-- owl-carousel -->
<link rel="stylesheet" type="text/css" href="css/owl-carousel/owl.carousel.css" />

<!-- Font Awesome -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />

<!-- Magnific Popup -->
<link rel="stylesheet" type="text/css" href="css/magnific-popup/magnific-popup.css" />

<!-- Animate -->
<link rel="stylesheet" type="text/css" href="css/animate.css" />

<!-- Ionicons -->
<link rel="stylesheet" type="text/css" href="css/ionicons.min.css">

<!-- Style -->
<link rel="stylesheet" type="text/css" href="css/style.css">

<!-- Responsive -->
<link rel="stylesheet" type="text/css" href="css/responsive.css">

<!-- custom style -->
<link rel="stylesheet" type="text/css" href="css/custom.css" />

Javascript Structure

Here is the general Javascript structure of the template:

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

    <!-- owl-carousel -->
    <script src="js/owl-carousel/owl.carousel.min.js"></script>

    <!-- Counter -->
    <script src="js/counter/jquery.countTo.js"></script>

    <!-- Jquery Appear -->
    <script src="js/jquery.appear.js"></script>

    <!-- Magnific Popup --> 
    <script src="js/magnific-popup/jquery.magnific-popup.min.js"></script>

    <!-- Retina -->
    <script src="js/retina.min.js"></script>

    <!-- wow -->
    <script src="js/wow.min.js"></script>

    <!-- Skrollr --> 
    <script src="js/skrollr.min.js"></script>
    
    <!-- video background -->
    <script src="js/jquery.vide.js"></script>

    <!-- Countdown -->
    <script src="js/jquery.countdown.min.js"></script>

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

    <!-- Custom -->
    <script src="js/custom.js"></script>

Particles Background Javascript

Same with this canvas effect. Add this javascript js to your file.


    <!-- Particles -->
    <script src="js/particles/particles.min.js"></script>
    <script src="js/particles/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 below section

        <div id="loading-center">
            <div class="loader">
                <div></div>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <defs>
                <filter id="goo">
                <fegaussianblur in="SourceGraphic" stddeviation="15" result="blur"></fegaussianblur>
                <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 26 -7" result="goo"></fecolormatrix>
                <feblend in="SourceGraphic" in2="goo"></feblend>
                </filter>
                </defs>
            </svg>
        </div>
    </div>

For Logo

The Logo Container can be found in the Header Container - #header. Replace "logo-black.png" with your own logo image URL.

<a class="navbar-brand" href="#">
    <img src="images/logo.png" alt="logo">
</a>

For Changing Fonts

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in top of the Style.css in all HTML file. See example below:

<!-- 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:

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

In order to change the fonts, you will need to edit the above links with your custom font, You can easily 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

For Section Title

Use this sample code for page section title to keep the consistency in the title.

<div class="heading-title">
    <h2 class="title iq-tw-6">Amazing Features</h2>
    <div class="divider"></div>
    <p>We've been working really hard to improve the appino with this amazing new features that you aked for! Check out the appino’s new  amazing features. </p>
</div>

For section padding

You can add this helper class to set section padding top 100px and padding bottom 100px.
Add overview-block-ptb class in section tag. See example below:

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

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 use color in the Text. simply add .iq-font-blue ( or any color you want) class where you want to use. See example below:

<div class="iq-font-blue">
[YOUR TEXT CONTENT]
</div>

Note We include 4 color helper class in our template iq-font-light-blue, iq-font-grey, iq-font-black, iq-font-blue and iq-font-white. you can add unlimited color class according to your needs.

For Background color

You can use color in the background. simply add .white-bg (or any color you want) class where you want to use. See example below:

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

Note We include 4 background color helper class in our template blue-bg, grey-bg, white-bg and dark-bg You can add unlimited background 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 in div tag and by use of this you can create your own background. See example below:

<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 repeat or no-repeat. See the example below:

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

If you want to use your background like cover or cointainer. You just need to add styling property background-size and set the value cover or cointainer. see the example below:

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

For Background overlay

You can use these .iq-over-black-30, .iq-over-white-20, .iq-over-blue-90 classes to any element in your HTML code to apply overlay color on any image or section. See example below:

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

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

For Separator

Add this tag in your HTML code to add Separator line. Simply add hr tag where you want to add the line. See example below:

...
 [SECTION 1 CONTENT]
...
</section> <!--Section 1 End-->
  <hr/>
<section> <!--Section 2 Start-->
...
 [SECTION 2 CONTENT]
...

For Template Color Schemes

To change your site's color takes two simple methods: Method 1: Add a link in your HTML head consisting path of existing color scheme CSS file (PATH: css/color/yourcolor.css) as shown in the example: Method 2: Change the Color Code in the css/color/color-3.css and include inside head as shown in the example:

<link href="css/color/color-1.css" rel="stylesheet" type="text/css" />

<link href="css/color/color-3.css" rel="stylesheet" type="text/css" />

Bootstrap Components

Bootstrap has a wonderfull documentation on following components:

For Contact Form

Replace dummy email with your email in contact-form.php to get your contact-form working

$ToEmail = 'demo123@gmail.com';

Note: Don't forget to change dummy site-key with your site-key to get your google captcha working

For Sliders

There 2 different sliders for you to be used on any page with variety of Options. List of the Sliders:

Owl carousel

For Owl carousel

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online owl carousel Slider documentation.

For Retina Display

The basic concept of a Retina image is that an image twice the size of a standard web image will be displayed on the screen. On a non-retina device an image will be 100px X 100px whereas a Retina device will display the same image but at 200px X 200px. Most devices use this branded concept for Retina devices like having approximately twice the pixel density of a non-retina device.

If you want to get perfect looking images on Retina screens. For example, you build a website where you upload regular images into Content, you must always upload 2 images in Media
Add new section which looks like below:

my_image.png - this is the name for standard image (e.g. 100px X 100px)
my_image@2x.png - this is the example name for retina image and file must be always 2x larger than regular image (e.g. 200px X 200px)

Note You need to include retina.js to make your website completely retina ready. See example below:

<!-- retina -->
<script type="text/javascript" src="js/retina.js"></script>

For more information about retina documentation and to download retina.js Click here.

Browser Support

Supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.

Change Log

Version 1.0

- Initial Release

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

bigstockphoto bigstockphoto
Pexels Pexels
freepik freepik
pixabay pixabay

Scripts

CSS & Fonts

How to rate this Template

Please do rate us if you like our theme and support. We look forward to your valuable review. For rating visit: http://themeforest.net/downloads and find "Rate this item" below the download button and rate out the theme. Advance Thanks in Prospect!