Gifted | Multi-Purpose Responsive HTML5 Template

Table of Contents

1. Know Your Purchase - Technical Description
2. Know Your Purchase - Folder Management
3. Change Navigation
4. Sticky Header
5. Header Styles
6. Change Logo
7. Change Layout
8. Change Skin Color
9. Change Font
10. Change Location on Map
11. Change Contact Us Email
12. Change Favicon
13. Images & Other Third party licences
14. Sources and Credits
15. Advance Customization & Development
16. Thank You Note

A) Know Your Purchase - Technical Descriptiongo to table of content↑

Gifted | Multi-Purpose Responsive HTML5 Template is a Bootstrap 3x HTML Site Template. Being a Responsive Fluid layout, it’s built on Mobile First Approach which makes it best of all. It is coded in LESS CSS so you get freedom to change its color theme of your choice with just changing a variable in CSS (this is explained below how you can do this). Same is with fonts, it just a matter of changing name and you are done with an updated look ;). JQuery Sliders are one of the advantage you get when you buy this template, it is loaded with effects which gives your homepage header a WoW look to your website visitors. Font Awesome, Retina Images & Google Fonts will let your visitors experiencing high quality website view. Also all the pages are 100% W3C validated & coded SEO friendly where rest assure for caching them into Google & other search engines and gaining better page ranking and best of all features, the pages are optimized for Load Speed and are "A" grade tested on GTmetrix.com. Wait! this is not just all, this template containes ultimate shortcode resource which gives you freedom to create any new page with high interactive features from scratch.

Let us write all the features in bullet, so you can best utilize this template at maximum of its capabilities:

1. Responsive Website
2. Full-Width and Boxed Layout
3. Built with Bootstrap 3x
4. Multi-Purpose Templates for Various Industries
5. Multiple Color & Font Variations
6. 404 Not Found Page
7. Multiple Header Styles
8. Various ShortCodes
9. Various Layouts for Blog List & Detail Pages
10. Various Styles of Gallery/Portfolio
11. Various Styles of Menus i.e. Mega Menu, Plain Menu and many more.
12. Fixed, Sticky & Intelligent Sticky Navigation
13. Shop Pages
14. Google Web Font
15. Retina Ready
16. Font Awesome & SVG Icons
17. 100% valid HTML & CSS code
18. A+ Grade PageSpeed

B) Know Your Purchase - Folder Managementgo to table of content↑

Lets understand the file architecture with the help of screenshots which is a more convincing approach rather explaining in simple text only. The screenshots are well annotated so you can better understand the folders & their behavior correctly.

Pic - root-dir-description.png | This image explains the primary folder structure.

Pic - all-html-files.png | This image explains the primary folder structure where all the HTML files are on root along with the ASSETS folder which is the only directory containing all the JS, CSS, Images & Fonts etc inside.

Pic - assets-directory-description.png | This image explains the ASSETS folder's internal structure. All the sub-directories are described on image with short description.

Pic - all-css-files.png

Pic - all-custom-js.png

This is our effort to make sure you understand the files structure before you navigate to any file. So that it may become easy for you to make any customizations at your end. We want to make your purchase as pleasant as possible to best utilize it for your business. But if still you have any queries or doubts which are beyond the whole documentation and don’t answer all then feel free to email us at support@theemon.com or via our ThemeForest.com user page contact form.

C) Change Navigation Stylego to table of content↑

There is a page say menu.html, there you can se various styles of navigation like single level, multiple level, mega menus, mega menu with images and namy more. The navigation style you want to apply in your website you can copy that block & paste in your templates.

Example Code for Plain Menus having right submenu:

<ul>
	<li class="submenu">
		<a href="#">Flyout Right</a>
		<ul>
			<li class="submenu">
				<a href="#">Bird</a>
			</li>
			<li class="submenu">
				<a href="#">Superheroes</a>
				<ul>
					<li>
						<a href="#">Superman</a>
					</li>
				</ul>
			</li>
			<li class="submenu">
				<a href="#">Dirigibles</a>
			</li>
		</ul>
	</li>	
</ul>

Example Code for Plain Menus having left submenu:

<ul>
	<li class="submenu">
		<a href="#">Flyout Left</a>
		<ul>
			<li class="left submenu">  <!-- Added additional class left -->
				<a href="#">Bird</a>
			</li>
			<li class="submenu">
				<a href="#">Superheroes</a>
				<ul>
					<li>
						<a href="#">Superman</a>
					</li>
				</ul>
			</li>
			<li class="submenu">
				<a href="#">Dirigibles</a>
			</li>
		</ul>
	</li>	
</ul>

Example Code for Mega Menu:

<li class="menu-sec-parent">
<a href="#">Headers</a>
<div class="menu-container">
<div class="menu-type-2 exclusive ">
	<section class="link-section-wrapper clearfix">
		<div class="link-section">
			<h4>Standart</h4>
			<ul>
				<li>
					<a href="#">Lorem ipsum</a>
				</li>
			</ul>
		</div>

		<div class="link-section">
			<h4> Descriptions</h4>

			<ul>
				<li>
					<a href="#">Lorem ipsum <small>Dolor sit amet cons</small> </a>
				</li>
			</ul>
		</div>

		<div class="link-section icon-list">
			<h4>Icons  + Descriptions</h4>
			<ul>
				<li>
					<a href="#"> <i class="list-icon"><img alt="" src="assets/img/org-icon1.png"></i> Lorem ipsum <small>Dolor sit amet cons</small> </a>
				</li>
			</ul>
		</div>

		<div class="link-section icon-list small">
			<h4>Icons</h4>
			<ul>
				<li>
					<a href="#"> <i class="list-icon"><img alt="" src="assets/img/org-icon1.png"></i> Lorem ipsum </a>
				</li>
			</ul>
		</div>

	</section>
</div>
</div>
</li>

There are few more styles of mega menus that you can find on menu.html file.

D) Sticky Headergo to table of content↑

This template contains 3 header styles:

1. Normal Header
2. Sticky Header
3. Intelligent Sticky Header

$('#header').addClass('normal') // normal, fixed or intelligent

E) Header Stylesgo to table of content↑

This template contains various header styles. If you will see files there are files having names 'header-1.html', 'header-2.html' ..... 'header-13.html'. You can check all headers & choose best you like. Now what you need to do is to delete the content within

<header id="header"> 
<!-- Content to delete-->
</header>

F) Change Logogo to table of content↑

In this template you can either change logo by replacing the logo image with same name i.e. 'logo.png' under 'assets/images/' directory or you can edit HTML files & change the path as shown below:

<a class="logo" href="#">
<img alt="" src="assets/images/logo.png"> <!-- Logo image Path -->
</a>

G) Change Layoutgo to table of content↑

You can use this template in 2 layouts.

1. Boxed Layout
2. Full Width Layout

// Boxed Layout
<div id="wrapper" class="boxed">
// Full Width Layout
<div id="wrapper">

H) Change Skin Colorgo to table of content↑

As this template is coded in LESS so it is easy for you to change the glabal colors of skin from single place. You just need to edit the skin.less file placed in "assets/css/" directory. There at the top you can see the code to change skin color. It looks like:

@skinColor:#50b9ce; //Change here your theme Color

I) Change Fontgo to table of content↑

As this template is coded in LESS so it is easy for you to change the glabal font of skin from single place. You just need to edit the skin.less file placed in "assets/css/" directory. There at the top you can see the code to change font family. It looks like:

@fontFamily:'Raleway', sans-serif; //Change here your theme Font family

J) Change Location on Mapgo to table of content↑

In the contact section we have added google map. You can change latitude & longitude according to your company address. There are many resources available on internet to get latitude & longitude of any address but for your reference you can use http://www.latlong.net/. Once you have these information then you can edit site.js file & change the existing one to yours. Search for the below code & replace latitude, longitude there.

google.maps.LatLng(41.236859, -73.667425)

K) Change Contact Us Emailgo to table of content↑

Contact us form has jQuery form validation & working php mail script. After purchase you need to edit process.php file & replace the existing email id, subject with your details.

/**** php code (process.php) ****/
$email_to = "receiver@example.com";
$cc = "cc@example.com";
$email_subject = "Gifted Template Contact us form"; // it's dynamic but if you like you can change it

L) Change Favicongo to table of content↑

The easiest way is to show you. Bookmark this page by clicking here. If you reload the page the icon should display in your browsers address field in a similar way to the illustration.

A favicon (short for "favorites icon"), also known as a page icon or an urlicon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many recent web browsers can then make use of them. Browsers that support favicons may display them in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface.

You can use online websites to generate your favicon. Here is one most popular website for it http://www.favicon-generator.org. You can generate favicon from here & replace favicon.ico on root of your project.

M) Images & Other Third party licencesgo to table of content↑

All the Images, JavaSacript, CSS libraries, any Effects which comes with this template are either on GPL or MIT licenses to distribute or modify within proprietary nature or purchased with full rights to share and/or resell. If you’ve purchased Regular License you are just authorized to use this template for single website, it means you are not authorized to distribute, share or resell this template or any items (images, javascripts etc) or even single piece of code.

1. All the images are copyright to their respective owners. The photos used in the live preview are just for demo purpose.
2. Revolution Slider implemented here has an Extended License to theem'on for this template. It means theem'on can resell this which means that the end user (You) got a license to implement the Revolution Slider freely with this template purchase.

In case of any query on licensing & usage, feel free to email us at support@theemon.com or via our ThemeForest.com user page contact form.

N) Sources and Creditsgo to table of content↑

We've used the images, icons or other files from the following sources as listed below

• Ethan Marcotte for introducing Responsive Web Design
• BootStrap for developing Best of the time Framework
• Shutterstock for awesome images in preview
• Louis LIN for fontAwesome icon animation
• Google Font for beautiful custom font
• ThemPunch for revolution slider
• Imulus for Retina Js
• woothemes for flex slider
• tympanus.net for great CSS animation & effects

theem'on is handling all technical support for this Template so in-case you have any questions related to this theme make sure you are redirected to theem'on only. Read below on how to contact theem'on in case you have any query or concerns related to this template.

O) Advance Customization & Developmentgo to table of content↑

If you are looking forward to highly customize this template or willing to do some custom development. We have our custom development team always ready to help you with all your requirements. This will be charged on hourly rate basis, once you request for the job our technical team will get aligned with you over timeline as well as the costing required to do the job. Once you get agree and pay the upfront amount, team will start working on the job. To request a customization or development you can email us at support@theemon.com or via our ThemeForest.com user page contact form.

P) Thank You Notego to table of content↑

Thanks for reading the Document we hope it’s been really helpful and resolved most of your concerns. In case you still have doubts related to any section then we are more than happy to assist you on any of your queries for which you can directly email us at support@theemon.com or via our ThemeForest.com user page contact form.
Once again, thank you so much for purchasing our theme.

© Copyright 2015, All Rights Reserved by Gifted - Multipurpose HTML5 Template.www.theemon.com - theem'on

Go To Table of Contents