Craftsman

Responsive Carpentry/Woodwork Template

Welcome To Craftsman 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

• Beautiful Home Demos
• Google map
• Clean & Simple Design
• Advance Framework
• HTML5 & CSS3
• Fully Responsive Design
• Carpentry/Woodwork Concept
• Working Contact Form
• All files are well commented
• Crossbrowser Compatible with IE9+, Firefox, Safari, Opera, Chrome
• Extensive Documentation

Go ahead to know more.

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

This Template has a Responsive layout and is based on Bootstrap 3x

it is very simple to use the grid, you need to have one main div like this

you need to do like this:

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

Google Web Fonts

By default, the template loads Open Sans, Droid, Ubuntu font and Raleway font from Google Web Font Services, you can change the font with the one that suits you best.

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

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

Navigation

Slider

 .fullwidthbanner-container{
	width:100% !important;
	position:relative;
	padding:0;
	max-height:500px !important;
	overflow:hidden;
}

Google Maps

	/*==========  Footer Map  ==========*/
	var footer_map;
	function initialize_footer_map() {
		if ($('.footer-map').length) {
			var myLatLng = new google.maps.LatLng(-37.814199, 144.961560);
			var mapOptions = {
				zoom: 14,
				center: myLatLng,
				scrollwheel: false,
				panControl: false,
				zoomControl: false,
				scaleControl: false,
				mapTypeControl: false,
				streetViewControl: false
			};
			footer_map = new google.maps.Map(document.getElementById('footer-map'), mapOptions);
			var marker = new google.maps.Marker({
				position: myLatLng,
				map: footer_map,
				title: 'Envato',
				icon: './images/marker.png'
			});
		} else {
			return false;
		}
		return false;
	}
	google.maps.event.addDomListener(window, 'load', initialize_footer_map);

	/*==========  Full Width Map  ==========*/
	var full_width_map;
	function initialize_full_width_map() {
		if ($('.full-width-map').length) {
			var myLatLng = new google.maps.LatLng(-37.814199, 144.961560);
			var mapOptions = {
				zoom: 14,
				center: myLatLng,
				scrollwheel: false,
				panControl: false,
				zoomControl: false,
				scaleControl: false,
				mapTypeControl: false,
				streetViewControl: false
			};
			full_width_map = new google.maps.Map(document.getElementById('full-width-map'), mapOptions);
			var marker = new google.maps.Marker({
				position: myLatLng,
				map: full_width_map,
				title: 'Envato',
				icon: './images/contact-marker.png'
			});
		} else {
			return false;
		}
		return false;
	}
	google.maps.event.addDomListener(window, 'load', initialize_full_width_map);

These codes here: (-37.814199, 144.961560); are the latitude and longtitude, change it to your coordinates...

Contact Form

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

1. Find "$to = '[email protected]'; // Replace with your email." and replace it with the email id, where you want to receive the mail.

Icons

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.

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.

max-themes

⚽ 足球实时 (10)

📅 今日赛程 (20)