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 namecheap
  • Hosting provider - I recommend (mt)
  • 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, there are multiple professional freelancers on Envato Studio that can deliver your custom project requirements for a small fee.

Template Files

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

  1. Available Files
    1. Documentation (folder with this help file)
    2. HTML (source files)
      1. css (template style)
      2. fonts (template web fonts)
      3. js (template JavaScript source files)
      4. img (temporary placeholder files)
      5. favicon.png (browser tab icon for the site)
      6. index.html (homepage HTML file)
      7. *.html (other HTML page files)
    3. PSD (folder with design source files)

Install via FTP

Copy the files and folders in 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. The template also uses the popular FontAwesome icon pack, so you'll need to add the font-awesome.min.css file as well. If you need to add your own custom style, you can optionally edit and include the style-personal.css (to preserve core files intact and allow proper template updates):

<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/style-personal.css" rel="stylesheet" type="text/css">

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.

Note: to switch to the dark version of the template just include the style-dark.css file after style.css in the header of each page (please refer to the index-dark.html).

Markup Structure

This template has a responsive layout with 12 columns. You can customize the content sections or add sidebars as width as you want. The general inner page template structure is (almost) the same throughout the template. Here it is:

<header id="top" class="navbar" role="banner">
	<div class="container">
		<div class="inner">

			<div class="site-title">
				<h1><a href="index.html"><img src="logo.png" width="144" height="52"></a></h1>
				<a href="#site-menu" class="site-menu-toggle">...</a>
			</div>

			<div id="site-menu">
				<nav>
					<ul>
						...
					</ul>
				</nav>
			</div>

		</div>
	</div>
</header>

<main id="content" role="main">
	<div class="container">
		...
	</div>
</main>

<footer id="footer" role="contentinfo">
	<div class="container">
		...
	</div>
</footer>

You can change the logo image by placing/uploading an image file and setting it in the <h1> element in the header section.

If you prefer a text version instead of a logo just replace the <img> tag with the desired text string and add a text class to the <h1> element:

<h1 class="text"><a href="index.html">Project Name</a></h1>

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 highly 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 has more rich, bandwidth consuming features. 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.

The template includes a grid system imported from the popular Bootstrap framework - you should familiarize yourself with it and get to know the predefined classes available for creating a custom layout.

JavaScript Widgets

This theme imports two mandatory JavaScript files: jQuery and site.js. jQuery is a JavaScript library that greatly reduces the amount of code that you must write. The site.js script 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 its comments for more information.

The template also includes 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 or at the bottom of the plugin file.

Tips & Tricks

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

  1. set active menu item: add a current-menu-item class to the active menu element (add it to the <li> element);
  2. make videos and embeds responsive: wrap the video or embed in the following markup structure: 
    <div class="responsive-container">
    <div class="responsive-wrapper">
        <iframe src="..."></iframe>
    </div>
</div>
  3. add mouseover image thumbnails easily with the following markup structure: 
    <div class="thumb dark-overlay">
	<div class="photo">
		<a href="...">
			<img src="thumb.jpg" ...>
			<span class="info">
				<strong class="title">...</strong>
				<span class="excerpt">...</span>
				<em class="arrow-right"></em>
			</span>
		</a>
	</div>
</div>
  4. there are multiple options when it comes to buttons. It's easy to add a button class to any element (anchors for example) and set a color preference (filled, grey, color), like this: 
    <a href="#" class="button grey">Button</a>
  5. alerts are a good way to capture attention (see the features.html file for different options): 
    <div class="alert">Information box</div>
  6. tab container: wrap the content in a tab-container element with a <ul class"tabs"> list followed by .tab_content elements; please see the features.html for the markup.

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 theme via themeforest.net/downloads. Thank you and good luck with your work!