Evockans Multi-Purpose Template

Thanks for purchasing Evockans HTML template by SpecThemes. This documentation will give you an overview of the template's main features and how they can be customised to suit your requirements. This guide assumes basic knowledge of HTML and CSS.

Structure

Evockans is a multipage HTML template. All pages are housed within their own .html file and reside in the root directory of the template. All pages require access to the template's CSS and Javascript files, these files reside within the CSS and JS directories.

What's included

Once you download the template, you can see a folder with several files and sub folders.

css
- animate.css
- bootstrap.min.css
- default.css
- fontawesome-all.css
- icomoon.css
- navigation.css
- navigation-2.css
- navigation-3.css
- navigation-4.css
- navigation-5.css
- navigation-6.css
- navigation-7.css
- navigation-8.css
- owl.carousel.css
- plugins.css
- rev-settings.css
- slider.css
- styles-2.css
- styles-3.css
- styles-4.css
- styles-5.css
- styles-6.css
- styles-7.css
- styles-8.css
- themify-icons.css
icomoon
- demo-files
  - demo.css
- fonts
  - icomoon.eot
  - icomoon.html
  - icomoon.ttf
  - icomoon.woff
- demo.html
- selection.json
- style.css
js
- revolution
  - jquery.themepunch.revolution.min
  - jquery.themepunch.tools.min
  - revolution.addon.slicey.min
  - revolution.extension.actions.min
  - revolution.extension.kenburn.min
  - revolution.extension.layeranimation.min
  - revolution.extension.migration.min
  - revolution.extension.slideanims.min
- jquery.min.js
- main.js
- map.js
- navigation.fixed.js
- navigation.js
- plugins.js
- slick.js
webfonts
Pages
- blog-grid-classic-2.html
- blog-grid-classic-3.html
- blog-grid-classic-4.html
- blog-list.html
- blog-list-centered.html
- blog-post.html
- blog-post-centered.html
- blog-post-slider.html
- blog-post-video.html
- blog-simple-2.html
- blog-simple-3.html
- elements-accordions.html
- elements-action-boxes.html
- elements-alerts.html
- elements-buttons.html
- elements-carousels.html
- elements-clients.html
- elements-countdowns.html
- elements-countups.html
- elements-data-tables.html
- elements-dropcaps.html
- elements-feature-boxes.html
- elements-forms.html
- elements-headings.html
- elements-image-properties.html
- elements-labels.html
- elements-lightboxes.html
- elements-lists.html
- elements-loaders.html
- elements-modal-popup.html
- elements-pie-charts.html
- elements-pricing-tables.html
- elements-process-steps.html
- elements-progress-bars.html
- elements-rotate-boxes.html
- elements-tabs.html
- elements-team.html
- elements-testmonials.html
- elements-videos.html
- error-404-1.html
- error-404-2.html
- error-404-3.html
- footer-classic.html
- footer-classic-light.html
- footer-minimal.html
- footer-modern.html
- footer-simple.html
- gallery-grid-2.html
- gallery-grid-3.html
- gallery-grid-4.html
- gallery-grid-5.html
- gallery-hover-style-1.html
- gallery-hover-style-2.html
- gallery-hover-style-3.html
- gallery-hover-style-4.html
- gallery-justified-1.html
- gallery-justified-2.html
- gallery-justified-3.html
- gallery-justified-4.html
- gallery-left-side-navigation.html
- gallery-masonry-2.html
- gallery-masonry-3.html
- gallery-masonry-4.html
- gallery-masonry-5.html
- home-classic-business.html
- home-consulting.html
- home-corporate.html
- home-creative-agency.html
- home-creative-studio.html
- home-digital-agency.html
- home-finance.html
- home-marketing-agency.html
- home-modern-agency.html
- home-product.html
- home-seo-agency.html
- home-small-business.html
- home-startup.html
- home-web-agency.html
- index.html
- index-header-full-width.html
- index-header-top-logo.html
- index-header-transparent.html
- page-about-classic.html
- page-about-history.html
- page-about-minimal.html
- page-about-modern.html
- page-about-simple.html
- page-coming-soon-1.html
- page-coming-soon-2.html
- page-contact-classic.html
- page-contact-modern.html
- page-contact-simple.html
- page-faq-1.html
- page-faq-2.html
- page-faq-3.html
- page-maintenance.html
- page-search-results.html
- page-services-classic.html
- page-services-modern.html
- page-services-simple.html
- page-title-center.html
- page-title-dark.html
- page-title-left.html
- page-title-parallax.html
- page-title-primary.html
- page-title-right.html
- page-title-small.html
- page-title-video.html
- portfolio-grid-2.html
- portfolio-grid-3.html
- portfolio-grid-4.html
- portfolio-hover-style-1.html
- portfolio-hover-style-2.html
- portfolio-hover-style-3.html
- portfolio-masonry-2.html
- portfolio-masonry-3.html
- portfolio-masonry-4.html
- project-single.html
- shop-cart.html
- shop-classic-2.html
- shop-classic-3.html
- shop-classic-4.html
- shop-list.html
- shop-simple-2.html
- shop-simple-3.html
- shop-simple-4.html
- shop-single.html
- shop-styled-2.html
- shop-styled-3.html
- shop-styled-4.html

We just included layouts files for your start point. You should choose one of those and start customizing components such as navbar, banner, sidebar and footer to make a starter file for your documentation. You can access to all of the available files in "Documentation" or "src" folder.

Colour Schemes

For changing colour schemes you should change styles.css and navigation.css sources in header.
styles-2.css and navigation-2.css for Navy Blue scheme
styles-3.css and navigation-3.css for Green scheme
styles-4.css and navigation-4.css for Light Green scheme
styles-5.css and navigation-5.css for Lime Green scheme
styles-6.css and navigation-6.css for Red scheme
styles-7.css and navigation-7.css for Pink scheme
styles-8.css and navigation-8.css for Yellow scheme

Sliders

Evockans includes two type of sliders Swiper Slider and Revolution Slider

Swiper Slider

Put the code below in header

<link rel="stylesheet" href="css/slider.css">

HTML Structure


<div class="swiper-main-slider swiper-container">
  <div class="swiper-wrapper">
    <!-- Slide Start -->
    <div class="swiper-slide" style="background-image:url(slide image URL);">
      <div class="swiper-main-slider swiper-container">
        <!-- Slide content -->
      </div>
    </div>
    <!-- Slide End -->
  </div>
</div>

By changing the class swiper-main-slider to swiper-main-slider-fade the slider effect will be changed to fade animation.

Revolution Slider

Put the code below in header


<link rel="stylesheet" href="css/slider.css">
<link rel="stylesheet" href="css/rev-settings.css.css">

Put the code below under footer


<script src="js/revolution/jquery.themepunch.tools.min.js"></script">
<script src="js/revolution/jquery.themepunch.revolution.min.js"></script">
<script src="js/revolution/revolution.addon.slicey.min.js?ver=1.0.0"></script">
<script src="js/revolution/revolution.extension.actions.min.js"></script">
<script src="js/revolution/revolution.extension.kenburn.min.js"></script">
<script src="js/revolution/revolution.extension.layeranimation.min.js"></script">
<script src="js/revolution/revolution.extension.migration.min.js"></script">
<script src="js/revolution/revolution.extension.slideanims.min.js"></script">

HTML code of Revolution Slider you can find in home-corporate.html file.

Headers

Classic Header


<header>
    <nav id="navigation4" class="container navigation">
        <div class="nav-header">
            <a class="nav-brand" href="index.html">
                <img src="img/logos/logo.png" alt="logo" id="main_logo">
            </a>
            <div class="nav-toggle"></div>
        </div>
        <!-- Search START -->
        <div class="nav-search">
            <div class="nav-search-button">
                <i class="ti-search"></i>
            </div>
            <form>
                <div class="nav-search-inner">
                    <input type="search" name="search" placeholder="Enter your keywords..."/>
                </div>
            </form>
        </div>
        <!-- Search END -->
        <div class="nav-menus-wrapper">
            <ul class="nav-menu align-to-right">
                <li><a href="#">Mega Drop Down</a>
                     <div class="megamenu-panel">
                         <div class="megamenu-lists">
                             <ul class="megamenu-list list-col-4">
                                 <li class="megamenu-list-title"><a href="#">Mega Menu Section 1</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                                 <li><a href="#">Mega Menu item</a></li> 
                             </ul>
                             <ul class="megamenu-list list-col-4">
                                 <li class="megamenu-list-title"><a href="#">Mega Menu Section 2</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                             </ul>
                             <ul class="megamenu-list list-col-4">
                                 <li class="megamenu-list-title"><a href="#">Mega Menu Section 3</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                             </ul>
                             <ul class="megamenu-list list-col-4">
                                 <li class="megamenu-list-title"><a href="#">Mega Menu Section 4</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                                 <li><a href="#">Mega Menu item</a></li>
                             </ul>
                         </div>
                     </div>
                </li>  

                <li><a href="#">2 Level Drop Down</a>
                    <ul class="nav-dropdown">
                        <li><a href="#">Level 2</a></li>
                        <li><a href="#">Level 2</a></li>
                        <li><a href="#">Level 2</a></li>
                    </ul>
                </li>   

                <li><a href="#">3 Level Drop Down</a>
                    <ul class="nav-dropdown">
                        <li><a href="#">Level 2</a>
                            <ul class="nav-dropdown">
                                <li><a href="#">Level 3</a></li>
                            </ul>
                        </li>                                   
                    </ul>
                </li>                                            
            </ul>
        </div>               
    </nav> 
</header>

Top Logo Header


<header>
    <nav id="navigation7" class="container navigation">
        <div class="nav-header-center">
            <a class="nav-brand" href="index.html">
                <img src="img/logos/logo.png" alt="logo" id="main_logo">
            </a>
            <div class="nav-toggle"></div>
        </div>
        <div class="nav-menus-wrapper">
            <ul class="nav-menu nav-menu-centered">
                <!-- Menu Content -->
            </ul>
        </div>               
    </nav> 
</header>

Transparent Header


<header id="nav-transparent">
    <nav id="navigation1" class="container navigation">
        <div class="nav-header-center">
            <a class="nav-brand" href="index.html">
                <img src="img/logos/logo.png" alt="logo" id="main_logo">
            </a>
            <div class="nav-toggle"></div>
        </div>
        <div class="nav-menus-wrapper">
            <ul class="nav-menu align-to-right">
                <!-- Menu Content -->
            </ul>
        </div>               
    </nav> 
</header>

Maps

For changing map locations go to js/map.js file find there myLatlng in line 186 and change the cordinates (51.5165957,-0.1277179) there, the code is shown below.


var myLatlng = new google.maps.LatLng(51.5165957,-0.1277179);