Craft

Multipurpose HTML Theme



Welcome To Craft Template Documentation.

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

This document covers the installation and use of this theme and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support section.

Template Features

Go ahead to know more.

Installing Template

After unzip the download pack, you'll found a Template Folder with all the files.

You can view this Template in any browser, you can display or edit the Template without an internet connection.

The three sections that will not work is the Google map Section which contains external link to get the map source.

the Contact form which uses PHP, so will work only online.

Now open your FTP Client (like Filezilla) or directly through cpanel, upload the content of the Template on your server root.

Once the files are done uploading go to www.yourdomainname.com/index.html

Please follow the tutorial to have a simple installation of the theme.



HTML Structure

HTML Structure

This Template has a Responsive layout and is based on our own framework.

All the template is full width fluid and depended on bootstrap framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

Basic Grid HTML

For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).



Given this example, we are making 3 columns row making for 12 total columns and a complete row and 3 columns. 

    
...

    
...

    
...


if u want 4 columns u need to specify like our example here: 

    
...

    
...

    
...

    
...

CSS Structure

Each demo, has it's own css styles and it's own js files, most of them are same, we recommend to use the css files that are in each demo, for example, if u use the demo2, use the css folder of that demo. If u run into problem, just contact us, we will be happy to help u with anything.

These are the css files that are loaded into templates in Head Section.

Dont change anything in bootstrap.min.css file. It may affect the whole theme.


Google Web Fonts

By default, the template loads Lato font from Google Web Font Services, you can change the font with the one that suits you best.

Javascript

These are the JS files that are loaded into template in end of the Body Section.

The js files are also the same in all the demos, and the Template has loaded all the js scripts in all pages, so u can use whatever u want from the template, wherever u want.

Tutorial

Please follow the first steps of this tutorial, to have a better knowledge how to use the theme, without any problem

Page Layout

The Craft Template, gives u the opportunity to have a layout of the page full width, or boxed.

If u want a full width layout, u just need to add this class "theme-full" into the body tag, like this : 
	<body  class="page page-id-704 page-template page-template-template-onepage page-template-template-onepage-php custom-background _masterslider _msp_version_2.9.12 waves-pagebuilder menu-fixed theme-full">
But if you want the boxed Layout, u need to add this class "theme-boxed" into the body tag, like this: 
 
	<body class="page page-id-867 page-template page-template-template-onepage page-template-template-onepage-php custom-background _masterslider _msp_version_2.9.12 waves-pagebuilder menu-fixed theme-boxed>


Patterns for Boxed Layout

We included our 20 patterns which u cannot see in demo, but they will come with the package in the img folder. To use any pattern that u like just go to style.css in the end of the file and add this code: 
 
	.theme-boxed {
	  background-image: url(../img/patterns/9.png);
	  background-attachment: fixed;
	  background-repeat: repeat;
	  margin-top: 60px;
	  margin-bottom: 60px;
	}
U can choose whichever patern u want from the pattern palete which can be found in folder img, patterns folder.


Main Nav

the navigation is made from 2 nav's one is for the full layout page and one is when the page is responsive..so u need to edit in the 2 nav's to make everything work.


Slider

The Main slider that we used in our theme, is the Layer SLider worth of 15$ for is for free :).. 


		


			

				

					

						

							slide1
							

								Craft IS
							

							

								READY
							

							

								 FOR YOUR BUSINESS
							

							

								with our themes gain simplicity and powerfull
							

							

								business solutions
							

							
						

						

							slide2
							

								WE ARE Craft, WE Craft
							

							

								BEAUTY
							

							

								beauty expressed in digital way
							

							

								give you business a boost with Craft
							

							
						

						

							slide3
							

								DEVICE FRIENDLY
							

							

								RESPONSIVE
							

							

								it doesn’t matter what device you have
							

							

								Craft fits perfectly on all of them
To Activate the layer slider you will need the code in the end of the page where is the lauer slider

Google Maps

Using any of our Google map style is very easy. Here is the example of google map added in html page
To change the location map, change the latlong from the emmbed code... u will see the lat long like this "ll=-37.812607,144.968666" .. first one -37.823... means latitude and the second means longtitude.

Contact Form

Open "contact.php" from the folder "PHP" in theme file.

  1. Find "#Your e-mail address" and replace it with the email id, where you want to receive the mail.

Icons

U can use icons from fontAwesome, here's the link of the icon map

Thats it. You are done. Now your website is ready to launch.
This is a very small tutorial for the index.html, but it will help u with other demos too, if u have any trouble setting up the theme, we will be happy to assist you.

Sources and Credits

We have used the following plugins, fonts & images. All fonts, images, icons used in this template are free for commercial use.

Fonts
jQuery Plugins
  • PrettyPhoto
  • Parallax
  • Jquery UI
  • jPlayer Mediaelement
  • Video Box
  • Isotope
  • carouFredSel

Images Images in live preview are not included in the template.





Once again, thank you so much for purchasing this theme.
As I said at the beginning, We'd be glad to help you if you have any questions relating to this theme. We I'll do our best to assist. If u have question u can ask us here.

And if u love our theme, pls rate it with 5 stars :D
Thanks

max-themes