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. tmp (files for your reference, can be deleted)
      5. favicon.png (browser tab icon for the site)
      6. index.html (homepage HTML file)
      7. *.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. The template also includes two other color schemes, which you can choose to add to your site as well. If you need to add your own custom style, you can optionally edit and include the style-custom.css (to preserve core files intact and allow proper template updates):

<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/style-custom.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.

Markup Structure

This template has a responsive left-sidebar type of layout. You can customize the content sections or add sidebar widgets 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" class="navbar" role="banner">
	<div class="container">
		<div class="inner">
			<div class="site-title">
				<h1>...</h1>
				<a href="#site-menu" class="site-menu-toggle">...</a>
			</div>
			<div id="site-menu">
				<nav>...</nav>
			</div>
		</div>
	</div>
</header>

<main id="content" role="main">
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				...
			</div>
		</div>
	</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 padding above the logo and a vertically centered vertically menu just add a vertical-align-middle class to the #top header element:

<header id="#top" class="navbar vertical-align-middle">
	...
</header>

Also, if you have a text version instead of a logo just replace the <img> tag with the desired text string and add a text class to the site-title header element:

<div class="site-title text">
	<h1><a href="index.html">Arkitect</a></h1>
</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.

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 it 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.

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. create a link button by adding a button class to an anchor like this: 
    <a class="button" href="#">Button</a>
  4. make sure you chek out the features.html for more useful widgets, tips and tricks.

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!