HTML Template - Documentation

Version 1.0

Cross Browser, High Quality and Responsive Multipurpose HTML Template.

Thank you very much for purchasing our template. It is built with the latest HTML5 and CSS3 technologies, but at the same time it is also made compatible with older browser versions. If you have any questions that aren’t covered in this article, please feel free to email us on our user page, you can find the contact form here.

Don’t forget to rate this template, it helps us improve our products.

Thanks so much!

Getting Started

Requirements

For installing this template you need to make sure that you have the following extensions on your webserver. You will need to contact your webhost if the following requirements are missing.

  • PHP 5.2+;
  • PHP Mail support;
  • Enabling JavaScript in the web browser.

Installation

Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be contents and folder with documentation. Copy all contents, except from folder with documentation, to your server via FTP client.

Preloader

Before the main contents of the website are loaded, there is an opportunity to show the preloader of the site. It can be any image, a gif-animated icon. You can change the path to the image.

If you don’t need the preloader, you can delete div with id preloader and comment/remove some lines in custom.js file.

                    
                   
  
  
  
  
  
  
  
  
  
  
  
  
                    $(window).load(function() {
									 $("#preloader").fadeOut();
									
										 })
                

Favicon

To change the favicon of your site, you need to load a new image in a site root or to point out a new address of the image.

                    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
                

Color themes

There have already been created a few special CSS file for the theme, which stylize a color scheme.

  • green - a green color;
  • purple - a purple color;
  • red - a red color;
  • yellow - a yellow color;
                  
                

The file theme.css it set by default. Also you have to change css/theme-color/theme.css file into the head tag.

Also you have to change theme.scss file into online compiler Here to "unlimited colors"

                  $theme-color: #19b5fe;// Change here your theme color
                

Modular grid

The Template is built on the system by using a 12-column markup. With the help of the given system you can create almost any modular grid and insert a necessary content in created modules.

Paddings and Margins

If it’s necessary to add a padding on the top or bottom or both, it’s enough to add one of the classes that will set up padding:

                    
.no-padding {
    padding: 0 !important;
}

.padding-30 {
    padding: 30px !important;
}

.padding-40 {
    padding: 40px !important;
}

.plr-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.pl-0 {
    padding-left: 0;
}

.pr-0 {
    padding-right: 0;
}

.ptb-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.pt-0 {
    padding-top: 0px !important;
}

.pb-0 {
    padding-bottom: 0px !important;
}
.pt-30 {
    padding-top: 30px !important;
}
.ptb {
    padding-top:60px;
    padding-bottom: 60px;
}

.pt {
    padding-top: 110px;
}

.pb {
    padding-bottom: 110px;
}

.ptb-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.pt-15 {
    padding-top: 15px;
}

.pb-15 {
    padding-bottom: 15px;
}

.ptb-60 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.pt-60 {
    padding-top: 60px;
}

.pb-60 {
    padding-bottom: 60px;
}

.ptb-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.pt-80 {
    padding-top: 80px;
}

.pb-80 {
    padding-bottom: 80px;
}

.mtb-0 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.mlr-0 {
    margin-left: 0px;
    margin-right: 0px;
}

.mt-0 {
    margin-top: 0px !important;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.ml-0 {
    margin-left: 0px !important;
}

.mr-0 {
    margin-right: 0px !important;
}

.mtb-80 {
    margin-top: 80px;
    margin-bottom: 80px;
}

.mt-80 {
    margin-top: 80px;
}

.mb-80 {
    margin-bottom: 80px;
}

.mtb-60 {
    margin-top: 60px;
    margin-bottom: 60px;
}

.mt-60 {
    margin-top: 60px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mtb-45 {
    margin-top: 45px;
    margin-bottom: 45px;
}

.mt-45 {
    margin-top: 45px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mtb-30 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-30 {
    margin-bottom: 30px;
}

.ml-30 {
    margin-left: 30px;
}

.mr-30 {
    margin-right: 30px;
}

.mtb-25 {
    margin-top: 25px;
    margin-bottom: 25px;
}

.mt-25 {
    margin-top: 25px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mtb-15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.mt-15 {
    margin-top: 15px;
}

.mb-15 {
    margin-bottom: 15px;
}
                    
  
   …   

You can change the size of paddings in the css/style.css file or you can add a new class in which you set up user’s paddings.

Sliders

Slider Revolution

Slider Revolution is an innovative, responsive jQuery Slider Plugin that displays your content the beautiful way. Whether it's a Slider, Carousel, Hero Scene or even a whole Front Page, you will be telling your own stories in no time!.

OwlCarousel and Slider

OwlCarousel - Owl Carousel. Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. Check more demos here! See what Owl can do.

You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element

Google Maps

                    
                    

In HTML file you should write only single line, with unique id attribute.

To set Google map you need to edit the custom.js file. To get the longitude and latitude you can use the following service. Click a map and replace a marker into the place you need after switching to a link. Then insert the received coordinates into the custom.js file.

custom.js

                var myCenter = new google.maps.LatLng(51.528308, -0.3817765); Set Your Location Hare
                
                
Note: If not working Map

kindly change the api key ("AIzaSyDkBtaoWQIj5NAbEqerzwxVe3tGgxIP_jg") as per your project. right now used the dummy API KEY

			 
			
Here generate google API Key. https://developers.google.com/maps/documentation/javascript/get-api-key

Error Pages

For special pages, like 404 or 505 or under HTML Template use a few another markup. At first, you should add class page404 for HTML tag. This pages do not contain header and footer like in another pages. For more details information look at 404.html. By analogy of this pages you may create suitable and needed for your purposes pages.

Forms

All the areas must be in the form tag. add Id contact-form in form tag. The tag must have obligatory attributes:

                   

Change here the Success msg content

                 	
Thanks for using our template. Your message has been sent.

In the mail.php file you can change the address of message receiving, a message topic, also the whole text that will deliver to the administrator of the site.

                	// Global Configuration start: From here you can change the email-id of receiver, cc, from email-id & subject;
				$to = "support@theembazaar.com";
				$cc = "support@theembazaar.com";
				$from = "test@theembazaar.com";
				$subject = "Email Submission";
				// Global configuration end			
                

Font Settings

To change the font-family you will have to edit the file css/style.css. If the font is a standard one, built the system by default, you can just write it here.

                   body { font-family: 'Open Sans', Arial, Helvetica, sans-serif;  } // or whatever you want (e.g. "lato")
                

Also you can use Google Font and connect it to your website.

  1. Go to http://www.google.com/fonts.
  2. Choose the appropriate font.
  3. Click the Quick-use button ().
  4. Choose the styles that you want;
  5. Choose the character sets that you want.
  6. Below that click on the @import tab and copy this line.
  7. Paste this line to that css/style.css file on 3d line instead of the default (e.g.):
                                @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800%7COswald:300,400,700);
                            
  8. At last, copy font-family name from Google Fonts website and paste on css/style.css:
                                body { font-family: 'Open Sans', Arial, Helvetica, sans-serif;  }
                            
Thank You, HTML Template