Construction India

Documentation for the HTML Template

Introduction
Requirements
Template Files
Install via FTP

Basic Setup
Style Settings
Markup Structure
SEO Settings

Configuration
CSS Styling
JavaScript Widgets
Tips & Tricks

Further Info
Credits
Further Support

Introduction

Requirements

Before we dive in, I want to thank and congratulate you on purchasing one of my items. I truly appreciate your support and I’ll do my best to provide you with an outstanding service.

Let’s go over the minimum requirements that you will need in order to have a fully functional site using this template running in no time.

An available domain – I recommend Bkhost.in
Hosting provider
FTP program (FileZilla, Cyberduck etc)
The template files that you downloaded from themeforest.net/downloads

To customize the template you’ll need basic HTML, CSS or JavaScript knowledge (depending on the task). If you need help, get in touch with me and I’ll consider any custom project for a small fee.

Template Files

After purchasing the template, your unzipped folder should have the following files contained within it.

Available Files
1. Documentation (folder with this help file)
2. HTML (source files)
  1. assets (style and scripts)
  2. tmp (files for your reference, can be deleted)
  3. index.html (homepage HTML file)
  4. *.html (other HTML page files)

Install via FTP

Copy the files and folders inside the HTML folder to your preferred web hosting location. This will get you started and you’ll be able to modify the template, going forward, based on your specific needs.

Basic Setup

Style Settings

The style.css file is the base stylesheet and must be included (mandatory) in order for the site to display correctly. This base stylesheet depends on the icons library included via a web font (materialdesignicons.css). If you need to add your own custom style, you can optionally edit and include a style-custom.css (to preserve core files intact and allow proper template updates):

<link href="assets/css/materialdesignicons.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/style-custom.css" rel="stylesheet">

The style.css file is well structured into corresponding sections and has a Table of contents, at the top, which you can refer to anytime. The stylesheet uses the mobile-first technique and it is progressively enhanced (using media queries) for larger displays as well.

Markup Structure

This template has a responsive general layout that can fit well into the requirements of any project. You can customize the logo, menu, featured area, content and footer sections as you need – the markup is pretty much self documented. The general inner page template structure is (almost) the same throughout the template. Here it is:

<header id="top-header" class="site-header">
	<div class="wrapper">
		<div class="site-identity">...</div>
		<div id="menu-toggle" class="mobile-menu-toggle">...</div>
		<nav class="main-navigation">...</nav>
		<nav class="social-navigation">...</nav>
	</div>
</header>

<header id="featured" class="site-featured">...</header>

<div id="content" class="site-content">
	<div class="wrapper">
		<div class="entry-content">...</div>
		<aside id="sidebar" class="widget-area">...</aside>
	</div>
</div>

<footer class="site-footer-gallery">...</footer>

<footer class="sales-box">...</footer>

<footer class="site-footer">
	<a id="scroll-to-top" class="scroll-to-top" href="#top-header" title="To the top">...</a>
	<div class="widget-area">...</div>
	<div class="copyright">...</div>
</footer>

You can change the logo images by placing/uploading image files and setting them in the <a class=”site-identity”> element in the header section.

<div class="site-identity">
	<a href="index.html" class="custom-logo-link" rel="home" title="Visit homepage"><img src="logo-for-white-color-scheme.png" class="custom-logo" width="146" height="36" alt=""><img src="logo-for-dark-color-scheme.png" class="custom-logo alt-version" width="146" height="36" alt=""></a>
</div>

SEO Settings

The template contains useful <head> information that you would probably want to edit for SEO reasons: title, description, keywords and favicon:

<title>Title goes here</title>
<meta name="description" content="Description entered for SEO">
<meta name="keywords" content="list of keywords">
<link rel="shortcut icon" href="favicon.png">

Configuration

CSS Styling

Template uses only one optimized CSS file that uses mobile first approach. That means all the style is applied for mobile devices first and if the screen is bigger the template adapts its features as well. The stylesheet contains general reset rules so all browsers behave almost the same way. This stylesheet also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden at any time.

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 (or use a quick search in your favorite editor). Every element in the template can be customized easily this way. Make sure you check out the HTML markup first and then modify its style in the CSS file.

JavaScript Widgets

This template imports one mandatory JavaScript file: the functions.js script which is used to initialize everything and add events to certain page elements. Here is the place where you can modify behaviour – make sure you study it for more information.

The template may include some plugins in order to enhace the user experience – so make sure you check them out in their own separate file. Check out the documentation of each plugin for its complete set of options. Each page may include a different set of plugins at the end of the file (recommanded above the closing body tag) and initialized inline on the spot.

Tips & Tricks

Here are a couple of tricks used in this template and information on how to apply them:

all the colors and typography are based on variables, so check out the top of the style.css file to change the main settings that will reflect thoughout the entire site style;
to make the template light by default just remove the data-scheme attribute from the <html> element:<html lang=”en” class=”no-js”>
set active menu item: add a current-menu-item class to the active menu element (add it to the <li> element);
to replicate the animated logo, check out the preview source code (it uses SVG linearGradient and animateTransform animations);
create a link button by adding a button class to an anchor like this:<a class=”button” href=”#”>Button</a>

Further Info

Credits

Please note that the images shown in previews are not included in the download package due to licensing restrictions. All images used are intellectual property of their respective owners and are used only for preview purposes.

Further Support

If you have any questions that are beyond the scope of this help file, please feel free to email via the Support tab of the item or via my user page contact form (right sidebar, at the bottom). I’d appreciate if you can help me out by rating and leaving your feedback for the template via themeforest.net/downloads. Thank you and good luck with your work!