Documentation by “Ansonika” v1.2

“ELECTRICIAN - HTML Site template”

Created: 21 Febraury 2017
Last update: 18 February 2021
By: Ansonika

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to post a comment on item page. If you are happy with the theme, please TAKE A MOMENT TO RATE IT from your DOWNLOADS PAGE. Thanks so much!

Table of Contents

  1. HTML Structure
  2. CSS Files, Structure and basic modifications
  3. PHP contact form, quotation and quotation wizard
  4. JavaScript
  5. Sources and Credit
  6. UPDATES

A) HTML Structure - top

This theme has a fixed centered layout 1170px. It's based on Boostrap framework grid. It's ULTRA RESPONSIVE!!.

B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. Below how the file is organized:

1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure

2. CONTENT
- 2.1 Home
- 2.2 About
- 2.3 Services
- 2.4 Quotation
- 2.5 Quotation wizard
- 2.6 Tips / faq
- 2.7 Contact us

3. COMMON
- Containers styles
- Form styles
- Tabs, collapse
- etc

IMPORTANT

All the common css styles are imported in base.css...this for a fast editing and more clean code. 
Then some pages have on top some specific css style.

BASE.CSS
@import url("bootstrap.min.css"); /* Main Bootstrap */
@import url("style.css"); /* Main theme styles */
@import url("menu.css"); /* Menu styles */
@import url("responsive.css"); /* Responsive */
@import url("custom.css"); /* Your custom css (We reccomend use it for a faster and simplified item update) *
@import url("elegant_font/elegant_font.css");	/* Icon pack */
@import url("fontello/css/fontello.css"); /* Icon pack */
@import url("magnific-popup.css"); /* Modal & dialog script */

Home with video header (fallback with a background image in tablets and mobile)

1)Save you mp4 and ogv video in the video folder.The name of the files must match the datasource tag:

Example
data-teaser-source="video/intro" (folder/name_files)=
intro.mp4
intro.ogv

2) To change the fallback background image open css/style.css an find this class in the "responsive section"

#hero_video{
background: #333 url(../img/sub_header_home.jpg);
background-size:cover;
background-position: center bottom;}

LAYERSLIDER
Please refer this DOCUMENTATION

Change the address of Google map in contact page: open mapmarker_func.js and change with your latitude and longitude + your full address. You can change also your map marker (that has to be png24); you can use also the psd provided in the psd folder.

//set up markers 
		var myMarkers = {"markers": [
				{"latitude": "51.511732", "longitude":"-0.123270", "icon": "img/map-marker2.png"}
			]
		};
		
		//set up map options
		$("#map").mapmarker({
			zoom	: 14,
			center	: 'Covent Garden London', //YOUR FULL ADDRESS 
			markers	: myMarkers
		});
COMMON ISSUE ON GOOGLE MAP (if the Google map works locally but does not works once the site will be online)
In some cases Google requires an api key for the Google map.

You can create your own "Standard api key" here 
by clicking on "GET KEY" BUTTON (on Authentication for the standard API—API keys section), 
and follow the steps.
https://developers.google.com/maps/documentation/javascript/get-api-key#key

Here some additionale info on how to create an API KEY http://thegrue.org/google-map-javascript-api-key/

Then replace at the bottom of every page that use Google map, this line

<script src="http://maps.googleapis.com/maps/api/js"></script> OR 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

with your api key included, like the example below
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

NOTE: if you apply the api key, the map does not load on your local computer. 
you should upload your site to view it.

Set up site launch page located in site_launch folder
Open functions.js and find this line of code:

SET THE DATE
Open coming_soon/js/functions.js and find this line.

var target = new Date("July 15 2014 13:30:00 GMT+0100"); //replace with YOUR DATE

SET NEWSLETTER EMAIL
Open coming_soon/assets/newsletter.php and find this commented code.

//$address = "your email address";
$address = "test@domain.com";

THE GRID
Please refer to this documentation Boostrap


C) PHP files: Contact form, quick contact, quotation and quotation wizard - top

The templates use two different types of php scriptst: one for the contact form (all the files are located in the assets folder), second for the quotation and quotation wizard page.

Below the script for the contact form, you can set the error messages in the validate.js.

If you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings
3) If your email has to be managed from the same hosting provider
4) Set the permission of the asset folder on your host to 755 your FTP client 5) This script does not support SMTP authentication. Contact me.

Quotation wizard

Add an input field into form first step

1) Apply the proper name to the input (<input type="text" name="new_field" />)
2) Call validation/error messages for the new field: open js/quotation-validate.js and look the example below in bold:

$('#custom').validate({
errorPlacement: function(error, element) {
$('#custom .stepy-error').append(error);
}, rules: {
'name':		'required',
'last_name':		'required',
'email':		'required',
'newsletter':	'required',
'new field':	'required',
'address':		'required',
'zip_code':			'required',
'terms':		'required' 	// BE CAREFUL: last has no comma
}, messages: {
'name':		{ required: 	 'Name required' },
'last_name':		{ required: 	 'Last name required' },
'email':		{ required: 	 'Invalid e-mail!' },					
'newsletter':	{ required:  'Newsletter required!' },
'new_field':	{ required:  'New field required!' },
'address':		{ required:  'Address required!' },
'zip_code':			{ required:  'Zip code required' },
'terms':		{ required:  'Please accept terms!' }
}
});

3) Then open quotation_wizard.php and follow the instructions/example below:

$mail = $_POST['email'];

/*$subject = "".$_POST['subject'];*/
$to = "test@ansonika.com"; <<< write your email here >>>
$subject = "Sign up from ELECTRICIAN"; <<< write your subject >>>
$headers = "From: ELECTRICIAN web site ";
$message = "Message\n";
$message .= "\nName: " . $_POST['name'];
$message .= "\nLast Name: " . $_POST['last_name'];
$message .= "\nEmail: " . $_POST['email'];
$message .= "\nPhone number: " . $_POST['phone_number'];
$message .= "\nSubscribe to newsletter: " . $_POST['newsletter'];
$message .= "\nNew field title: " . $_POST['new_field'];
$message .= "\nAddress: " . $_POST['address'];
$message .= "\nZip code: " . $_POST['zip_code'];
$message .= "\nMessage: " . $_POST['message'];
$message .= "\nTerms and conditions accepted: " . $_POST['terms'];
						
//Receive Variable
$sentOk = mail($to,$subject,$message,$headers);

Add one more step
Each step is determined by the fieldset tag...so simply add a fieldset. Use the tag legend to describe your step/tab (Ex. <legend>Personal info</legend>)

 <fieldset title="Step 1">
  ......       
 </fieldset><!-- End Step one -->
        
 <fieldset title="Step 2" >
  ......
 </fieldset><!-- End Step two -->

 etc....

Quotation normal

It use a similar PHP script of the wizard, except for the validation that is simplified. I you need to validate/makes required a field...simply add the class "required" to the input.

D) JavaScript - top

This theme use These Javascript (minified versions included). i've included the common theme scripts in a single file for a fast edit and load.

common_scripts.js content:

Below a full list of js used.

E) Sources and Credits - top

I've used the following images, icons or other files as listed.

Images are not included.

F) UPDATES - top

V.1.2 18 February 2021

V.1.1 (6 March 2017)




Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.

Need support?

For support contact me using the form on my profile page with subject [ThemeForest Support] Template name, or via the Support Tab on the item page. You will receive an answer within 24-48 hours (working days) GMT +1.

Need customization or availability for freelance projects?

Just send an email via profile page form; please don't forget to specify:

Ansonika

Go To Table of Contents