Eovo

EOVO - Creative HTML5 Responsive Template

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

HTML Structure

This template is a responsive layout with different columns. The general coding style is the same throughout the template. Here is the sample of coding style.

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

.menuBtn {color: #someColor;}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

a.menuBtn {color: #someColor;}

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

 

CSS Files and Structure

I'm using three CSS files in this template. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page. The file is separated into sections using: And third file is for maintain responsiveness of the theme.

/*============================ Header Section ============================*/
.headerArea{
    padding-top: 22px;
}
.logoImg{
    width: 67px;
    margin: 0 auto;
}
.menuBtn{
    padding-top: 16px;
}
.menuBtn span{
    height: 2px;
    width: 30px;
    margin: 4px auto;
    display: block;
    background: #000;
    -webkit-transition: all 700ms ease;
    -moz-transition: all 700ms ease;
    -ms-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;
}
.menuBtn:hover span{
    background: #999;
}
.menuContainer{
    background: rgba(0,0,0,.8);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 500;
}
.mainNav {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    left: 0;
    margin: auto;
    padding: 20px 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 715px;
    text-align: center;
}

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

div.logoImg{
   change styles here:
}

Fonts:

We have used google fonts:

1. Montserrat

2. Merriweather

3.  Shadows Into Light

JavaScript

This theme imports some Javascript files.

  1. jQuery
  2. My custom scripts
  3. Some plugin etc.
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. In addition to the custom scripts, I implement a few "tried and true" plugins to create the effects. This plugin is packed, so you won't need to manually edit anything in the file. The only necessary thing to know is how to call the method. For example:
     //========================
    // Image Slider
    //========================
    $("#imageSlider").owlCarousel({
        autoPlay: true,
        navigation: false,
        slideSpeed: 1500,
        paginationSpeed: 500,
        singleItem: true,
        pagination: true,
        stopOnHover: true

    });

Element Customize

How to change Google map:

Go to the js folder open the theme.js the find Google Map in there under the function you will get

lat: 51.4584218,
lng: -0.0813982,

change this latitude & longitude. You will get the result. If you don't know how to get latitude & logitude search in google.

How to change revolution slider settings:

Revolution slider is huge slider plugin so this is not possible to cover in this documentation. So, I prefer you to use a easy documentation. Here is the full documentation http://www.orbis-ingenieria.com/code/documentation/documentation.html

Change Video In Home Three:

Open index3.html in code editor then find the div videoWrap change the video src. same way for other video.

How to Change Contact mail:

Open mail.php file code editor find this word $to change the mail address there.

Sources and Credits

I've used the following images, icons or other files as listed.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

ThemeWar