# Ainotion Knowledgebase

### Quick Links

- Author : tansh »
- Demo Page »

! Bootstrap

Bootstrap Documentation »

* Images in help document are for guidance, may not represent exact theme appearance sometimes

### Table of Contents

###### Get Started - How to use

- Grid
  Container, Row and Columns
- Padding Utilities
- Margin Utilities
- Other Utilities
- Display / Responsive Utilities

###### COLOR
How to Change Colors

- Favicon
- Logo
- Background and Overlays
- Font Settings
- Font Icons
- Contact Form
- Dropdown Menu
- Animations when Scroll

- One Page Scroll
  Individual Link with Smooth Scroll
- Parallax
- Sliders

- While removing any jquery library attached...
- Credits and Sources
- Changelog

## How to use

- Open up your FTP manager and connect to your hosting.
- Browse to required directory (normally it is public_html)
- Upload template folder named as 'ainotion' here.

The folder contains all files of the template.

- html
- css
- js
- php
- images

## Padding Utilities

##### Notation

p | padding
t | top
b | bottom
l | left
r | right
y | top and bottom
x | left and right

    /*== paddings ==*/
    .dtr-p-0 { padding: 0 !important }
    .dtr-pt-0, .dtr-py-0 { padding-top: 0 !important }
    .dtr-pr-0, .dtr-px-0 { padding-right: 0 !important }
    .dtr-pb-0, .dtr-py-0 { padding-bottom: 0 !important }
    .dtr-pl-0, .dtr-px-0 { padding-left: 0 !important }
    .dtr-p-5 { padding: 5px !important }
    .dtr-pt-5, .dtr-py-5 { padding-top: 5px !important }
    .dtr-pr-5, .dtr-px-5 { padding-right: 5px !important }
    .dtr-pb-5, .dtr-py-5 { padding-bottom: 5px !important }
    .dtr-pl-5, .dtr-px-5 { padding-left: 5px !important }
    .dtr-p-10 { padding: 10px !important }
    .dtr-pt-10, .dtr-py-10 { padding-top: 10px !important }
    .dtr-pr-10, .dtr-px-10 { padding-right: 10px !important }
    .dtr-pb-10, .dtr-py-10 { padding-bottom: 10px !important }
    .dtr-pl-10, .dtr-px-10 { padding-left: 10px !important }
    .dtr-p-15 { padding: 15px !important }
    .dtr-pt-15, .dtr-py-15 { padding-top: 15px !important }
    .dtr-pr-15, .dtr-px-15 { padding-right: 15px !important }
    .dtr-pb-15, .dtr-py-15 { padding-bottom: 15px !important }
    .dtr-pl-15, .dtr-px-15 { padding-left: 15px !important }
    .dtr-p-20 { padding: 20px !important }
    .dtr-pt-20, .dtr-py-20 { padding-top: 20px !important }
    .dtr-pr-20, .dtr-px-20 { padding-right: 20px !important }
    .dtr-pb-20, .dtr-py-20 { padding-bottom: 20px !important }
    .dtr-pl-20, .dtr-px-20 { padding-left: 20px !important }
    .dtr-p-30 { padding: 30px !important }
    .dtr-pt-30, .dtr-py-30 { padding-top: 30px !important }
    .dtr-pr-30, .dtr-px-30 { padding-right: 30px !important }
    .dtr-pb-30, .dtr-py-30 { padding-bottom: 30px !important }
    .dtr-pl-30, .dtr-px-30 { padding-left: 30px !important }
    .dtr-p-40 { padding: 40px !important }
    .dtr-pt-40, .dtr-py-40 { padding-top: 40px !important }
    .dtr-pr-40, .dtr-px-40 { padding-right: 40px !important }
    .dtr-pb-40, .dtr-py-40 { padding-bottom: 40px !important }
    .dtr-pl-40, .dtr-px-40 { padding-left: 40px !important }
    .dtr-p-50 { padding: 50px !important }
    .dtr-pt-50, .dtr-py-50 { padding-top: 50px !important }
    .dtr-pr-50, .dtr-px-50 { padding-right: 50px !important }
    .dtr-pb-50, .dtr-py-50 { padding-bottom: 50px !important }
    .dtr-pl-50, .dtr-px-50 { padding-left: 50px !important }
    .dtr-p-60 { padding: 60px !important }
    .dtr-pt-60, .dtr-py-60 { padding-top: 60px !important }
    .dtr-pr-60, .dtr-px-60 { padding-right: 60px !important }
    .dtr-pb-60, .dtr-py-60 { padding-bottom: 60px !important }
    .dtr-pl-60, .dtr-px-60 { padding-left: 60px !important }
    .dtr-p-70 { padding: 70px !important }
    .dtr-pt-70, .dtr-py-70 { padding-top: 70px !important }
    .dtr-pr-70, .dtr-px-70 { padding-right: 70px !important }
    .dtr-pb-70, .dtr-py-70 { padding-bottom: 70px !important }
    .dtr-pl-70, .dtr-px-70 { padding-left: 70px !important }
    .dtr-p-80 { padding: 80px !important }
    .dtr-pt-80, .dtr-py-80 { padding-top: 80px !important }
    .dtr-pr-80, .dtr-px-80 { padding-right: 80px !important }
    .dtr-pb-80, .dtr-py-80 { padding-bottom: 80px !important }
    .dtr-pl-80, .dtr-px-80 { padding-left: 80px !important }
    .dtr-p-100 { padding: 100px !important }
    .dtr-p-90 { padding: 90px !important }
    .dtr-pt-90, .dtr-py-90 { padding-top: 90px !important }
    .dtr-pr-90, .dtr-px-90 { padding-right: 90px !important }
    .dtr-pb-90, .dtr-py-90 { padding-bottom: 90px !important }
    .dtr-pl-90, .dtr-px-90 { padding-left: 90px !important }
    .dtr-p-100 { padding: 100px !important }
    .dtr-pt-100, .dtr-py-100 { padding-top: 100px !important }
    .dtr-pr-100, .dtr-px-100 { padding-right: 100px !important }
    .dtr-pb-100, .dtr-py-100 { padding-bottom: 100px !important }
    .dtr-pl-100, .dtr-px-100 { padding-left: 100px !important }

## Margin Utilities

##### Notation

m | margin
t | top
b | bottom
l | left
r | right
y | top and bottom
x | left and right

    /*== margins ==*/
    .dtr-m-auto { margin: 0 auto !important }
    .dtr-m-0 { margin: 0 !important }
    .dtr-mt-0, .dtr-my-0 { margin-top: 0 !important }
    .dtr-mr-0, .dtr-mx-0 { margin-right: 0 !important }
    .dtr-mb-0, .dtr-my-0 { margin-bottom: 0 !important }
    .dtr-ml-0, .dtr-mx-0 { margin-left: 0 !important }
    .dtr-m-5 { margin: 5px !important }
    .dtr-mt-5, .dtr-my-5 { margin-top: 5px !important }
    .dtr-mr-5, .dtr-mx-5 { margin-right: 5px !important }
    .dtr-mb-5, .dtr-my-5 { margin-bottom: 5px !important }
    .dtr-ml-5, .dtr-mx-5 { margin-left: 5px !important }
    .dtr-m-10 { margin: 10px }
    .dtr-mt-10, .dtr-my-10 { margin-top: 10px !important }
    .dtr-mr-10, .dtr-mx-10 { margin-right: 10px !important }
    .dtr-mb-10, .dtr-my-10 { margin-bottom: 10px !important }
    .dtr-ml-10, .dtr-mx-10 { margin-left: 10px !important }
    .dtr-m-15 { margin: 15px }
    .dtr-mt-15, .dtr-my-15 { margin-top: 15px !important }
    .dtr-mr-15, .dtr-mx-15 { margin-right: 15px !important }
    .dtr-mb-15, .dtr-my-15 { margin-bottom: 15px !important }
    .dtr-ml-15, .dtr-mx-15 { margin-left: 15px !important }
    .dtr-m-20 { margin: 20px !important }
    .dtr-mt-20, .dtr-my-20 { margin-top: 20px !important }
    .dtr-mr-20, .dtr-mx-20 { margin-right: 20px !important }
    .dtr-mb-20, .dtr-my-20 { margin-bottom: 20px !important }
    .dtr-ml-20, .dtr-mx-20 { margin-left: 20px !important }
    .dtr-m-30 { margin: 30px !important }
    .dtr-mt-30, .dtr-my-30 { margin-top: 30px !important }
    .dtr-mr-30, .dtr-mx-30 { margin-right: 30px !important }
    .dtr-mb-30, .dtr-my-30 { margin-bottom: 30px !important }
    .dtr-ml-30, .dtr-mx-30 { margin-left: 30px !important }
    .dtr-m-40 { margin: 40px !important }
    .dtr-mt-40, .dtr-my-40 { margin-top: 40px !important }
    .dtr-mr-40, .dtr-mx-40 { margin-right: 40px !important }
    .dtr-mb-40, .dtr-my-40 { margin-bottom: 40px !important }
    .dtr-ml-40, .dtr-mx-40 { margin-left: 40px !important }
    .dtr-m-50 { margin: 50px !important }
    .dtr-mt-50, .dtr-my-50 { margin-top: 50px !important }
    .dtr-mr-50, .dtr-mx-50 { margin-right: 50px !important }
    .dtr-mb-50, .dtr-my-50 { margin-bottom: 50px !important }
    .dtr-ml-50, .dtr-mx-50 { margin-left: 50px !important }
    .dtr-m-60 { margin: 60px !important }
    .dtr-mt-60, .dtr-my-60 { margin-top: 60px !important }
    .dtr-mr-60, .dtr-mx-60 { margin-right: 60px !important }
    .dtr-mb-60, .dtr-my-60 { margin-bottom: 60px !important }
    .dtr-ml-60, .dtr-mx-60 { margin-left: 60px !important }
    .dtr-m-70 { margin: 70px !important }
    .dtr-mt-70, .dtr-my-70 { margin-top: 70px !important }
    .dtr-mr-70, .dtr-mx-70 { margin-right: 70px !important }
    .dtr-mb-70, .dtr-my-70 { margin-bottom: 70px !important }
    .dtr-ml-70, .dtr-mx-70 { margin-left: 70px !important }
    .dtr-m-80 { margin: 80px !important }
    .dtr-mt-80, .dtr-my-80 { margin-top: 80px !important }
    .dtr-mr-80, .dtr-mx-80 { margin-right: 80px !important }
    .dtr-mb-80, .dtr-my-80 { margin-bottom: 80px !important }
    .dtr-ml-80, .dtr-mx-80 { margin-left: 80px !important }
    .dtr-m-90 { margin: 90px !important }
    .dtr-mt-90, .dtr-my-90 { margin-top: 90px !important }
    .dtr-mr-90, .dtr-mx-90 { margin-right: 90px !important }
    .dtr-mb-90, .dtr-my-90 { margin-bottom: 90px !important }
    .dtr-ml-90, .dtr-mx-90 { margin-left: 90px !important }
    .dtr-m-100 { margin: 100px !important }
    .dtr-mt-100, .dtr-my-100 { margin-top: 100px !important }
    .dtr-mr-100, .dtr-mx-100 { margin-right: 100px !important }
    .dtr-mb-100, .dtr-my-100 { margin-bottom: 100px !important }
    .dtr-ml-100, .dtr-mx-100 { margin-left: 100px !important }
    /* minus margins */
    .dtr-mb-minus10 { margin-bottom: -10px !important; }
    .dtr-mb-minus20 { margin-bottom: -20px !important; }
    .dtr-mb-minus30 { margin-bottom: -30px !important; }
    .dtr-mb-minus40 { margin-bottom: -40px !important; }
    .dtr-mb-minus50 { margin-bottom: -50px !important; }
    .dtr-mb-minus60 { margin-bottom: -60px !important; }
    .dtr-mb-minus70 { margin-bottom: -70px !important; }
    .dtr-mb-minus80 { margin-bottom: -80px !important; }
    .dtr-mb-minus90 { margin-bottom: -90px !important; }
    .dtr-mb-minus100 { margin-bottom: -100px !important; }
    .dtr-mb-minus110 { margin-bottom: -110px !important; }
    .dtr-mb-minus120 { margin-bottom: -120px !important; }
    .dtr-mb-minus130 { margin-bottom: -130px !important; }
    .dtr-mb-minus140 { margin-bottom: -140px !important; }
    .dtr-mb-minus150 { margin-bottom: -150px !important; }

## Other Utilities

    /*== images ==*/
    .dtr-rounded-img, .dtr-rounded-img img { border-radius: 10px; }
    .img-has-shadow { -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.10);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.10);
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.10); }
    /*== borders ==*/
    .dtr-border-top { border-top: 1px solid #ccc; }
    .dtr-border-right { border-right: 1px solid #ccc; }
    .dtr-border-bottom { border-bottom: 1px solid #ccc; }
    .dtr-border-left { border-left: 1px solid #ccc; }
    .dtr-border-top-2px { border-left: 2px solid #ccc; }
    .dtr-border-right-2px { border-left: 2px solid #ccc; }
    .dtr-border-bottom-2px { border-left: 2px solid #ccc; }
    .dtr-border-left-2px { border-left: 2px solid #ccc; }
    .dtr-border-2px { border: 2px solid #ccc; }
    .dtr-border-top-none { border-top-width: 0; }
    .dtr-border-right-none { border-right-width: 0; }
    .dtr-border-bottom-none { border-bottom-width: 0; }
    .dtr-border-left-none { border-left-width: 0; }
    /*== absolute positions ==*/
    .position-relative { position: relative; }
    .absolute-bottom-right { position: absolute; right: 0; bottom: 0; }
    .absolute-bottom-left { position: absolute; left: 0; bottom: 0; }
    .absolute-top-right { position: absolute; right: 0; top: 0; }
    .absolute-top-left { position: absolute; left: 0; top: 0; }
    /*== spacer == */
    .spacer { display: block; width: 100%; }
    .spacer::after { content: ""; display: block; clear: both; }
    .spacer-10 { height: 10px; }
    .spacer-20 { height: 20px; }
    .spacer-30 { height: 30px; }
    .spacer-40 { height: 40px; }
    .spacer-50 { height: 50px; }
    .spacer-100 { height: 100px; }
    /*== misc ==*/
    .text-decoration-underline { text-decoration: underline; }
    .z-index { position: relative; z-index: 99; }
    .overflow-visible { overflow: visible; }
    .overflow-hidden { overflow: hidden; }
    .opacity-1 { opacity: .7; }
    .opacity-2 { opacity: .4; }
    .dtr-shadow { -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.10);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.10);
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.10); }

## Favicon / Site Icon

- Upload favicon images here: Template folder / assets / images / icons
- Keep name and sizes same as per provided in template

## Logo

- Logo images can be chaged in header section.
- Seaparate logos for desktop, header on scroll and smaller screens

## Colors

- Colors can be changed in color.css ( template folder / css / color.css )
- Colors assigned for classes used in html can be changed in color.css ( ex. color-dark, color-blue etc. )

## Font Settings

- Can be changed in style.css
- Google font import can be found in style.css at the top - section no. 1 - Google Fonts

## Background and Overlays

- Background Colors classes can be found in color.css
- The class 'dtr-overlay-content' is must for content to be visible over overlay.

## Forms

#### You need to do / give following two things, to make form work....

- ##### Your email id in:

  form's php file
  `$youremail = 'yourname@mail.com';`

#### FAQ and Considerations

- Forms do not work locally
- Do not change location of form php file

- ###### How to change mail body?

  It can be changed in form's php file.
  `$body = "You have got new message from your website :`

- ###### How to change success message (message displayed after send process complete)?

  Message which displays as result on send process complete, can be changed in php file, right at the bottom.

## Dropdown Menu

        Dropdown Links

## Font Icons

- Icon Demo file: View »
- Icons can be used as below:
  `<i class="icon-name-here"></i>`

* View in Chrome if demo icons not visible

## Animations when Scroll

##

    Heading with Animation

- Give class 'wow' and 'desired animation' class to the element to be animated on load.
- Animation class names can be found here along with demo: Animate.css
- Delay can be given as per requirement. More info here: Animations When Scroll

## One Page Scroll / Scrolling Link

##### One Page Scroll

Give ID of respective section in navbar link's href attribute along with #.

Ex: #work

       Work

Give Same ID to the section.

    Content Goes Here

##### Individual Link With Smooth Scroll

Give class 'dtr-scroll-link' to the link.

    Link with Smooth Scroll

## Parallax

- Give class 'parallax' to the section.
- Assign background image
- Background size, speed, repeat, pos_x, offset can be changed inline.
- More info can be found here: Parallaxie

    ---

## Sliders

- Arrows / Dot Pager - can be enabled for simple image sliders in custom.js

    // img slider 3col
    $('.dtr-img-slider-3col').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: false, ----------> make true here instead of false
        dots: false, ------------> make true here instead of false
        infinite:true,
        autoplay: true,
        autoplaySpeed: 4000,
        responsive: [
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1
          }
        },
      ]
    });

- Class to slider with dots pager ----- dtr-slick-has-dots
  This will add bottom padding.

## While removing any jquery library attached

- If you are removing any jquery library attached, remember to remove its function form custom.js (if any)
- Otherwise it will cause js errors

## Credits and sources

- Framework - https://getbootstrap.com/
- Slick Slider: https://kenwheeler.github.io/slick/
- Select2: https://select2.org/
- Smooth Scroll: https://github.com/cferdinandi/smooth-scroll
- Easing: http://gsgd.co.uk/sandbox/jquery/easing/
- Form Plugin: http://malsup.com/jquery/form/
- WOW Animations: https://wowjs.uk/
- Animate: http://daneden.me/animate
- Parallax: http://static.theultrasoft.com/parallaxie/demo/
- Jquery validation - https://jqueryvalidation.org/

## changelog

### Update 1: 23 Jan 2021

- Fix: Responsive shadow overflow

##### How to use this update?

- Paste ===== this CSS » ===== at the bottom of style.css
- Replace 'custom.js'

  Location of file: Template folder / assets / js / custom.js

###### #Top