Glacial Documentation

Version 2.2 - Last Updated: June 2014

Thank you very much for purchasing our template. We've put a lot of hard work into it, and we hope you love it as much as we do. As far as the documentation is concerned, we have tried to cover as much as possible to help you get your new template up and running and to help you customise it.

If you have any questions or problems that aren't answered here, please feel free to email us or get in touch on Twitter (@CosmicLabs) and we will get back to you within twenty four hours.

We love to hear your feedback - if you find any bugs or have suggestions for improvements please get in touch. Nearly all of the time we follow your advice and issue a rapid update to Glacial.

If you like this template, please remember to rate it on Themeforest - it really helps us to know what people think of our templates. To rate this item, go to your Downloads page on Themeforest, then next to this template click on a star rating you'd like to give us.


Thank you so much.
The Cosmic Labs Team

Getting Started

For installing this template, there are a few requirements you need on your web server in order to get full functionality from Glacial. You will need to contact your webhost if the following requirements are missing.

  • PHP 5.2+
  • PHP Mail Support

You must have JavaScript enabled in your browser. Also, a web server is required for the video background - testing it locally (unless using a development server such as Wamp or Mamp server) will not work.

If a user does not have JavaScript enabled in their browser, the site does not load and a message is displayed informing them of the problem.

This is not a Wordpress theme, so cannot be installed with Wordpress.

Installation

To install Glacial on your web server, download the files from Themeforest and unzip them to the local disk on your computer. Inside the extracted folder you will see two folders named Glacial - Documentation and Glacial - Template. Using an FTP Client (such as Filezilla or Total Commander), upload all of the contents of the Glacial - Template folder to your server.

Setup

All of the basic settings you need to get Glacial up and running and customised are within two files. All Javascript settings (for slideshow, video background and countdown) can be found within the js/custom.js file. Similarly, all PHP settings (email subscription and contact) can be found in the php/settings.php file.

Each section of documentation below contains more detailed instructions for setting up Glacial.

Frequently Asked Questions

If you're having trouble with Glacial, this is the first place to go. After that, try the more up to date version of FAQs on this item's Themeforest Support page. If you are still having trouble, send us an email and we'll gladly lend a hand.

  • “I can’t install this theme. It says its missing the style sheet and template”
    Sorry, but this is only an HTML template - so isn’t compatible with Wordpress and therefore cannot be installed.

  • "All I get is a constant loading screen, which doesn't ever load. What's happened?"
    If you see the loading screen which never disappears, it usually indicates a JavaScript issue. If you're trying to use the video background locally on your computer, you'll get this error. Upload it to a web server and it should go away. Otherwise, send us an email so we can diagnose the specific problem.

  • “Can I play videos stored on my server / from Vimeo or do they have to be on YouTube?”
    Unfortunately the system we use in Glacial only supports YouTube videos. You’ll have to upload your video to YouTube in order for it work with the video background. You could always set it to an unlisted video on YouTube so only those with the link (i.e. this template) can view it.

  • “I turned on the video background but only see a loading screen with no other content. What am I doing wrong?”
    This is because the video background only works on web servers. If you are testing Glacial locally on your computer, the video background won’t work. You’ll need to upload the files to a Web Server or use a local development server like Wamp or Mamp. Get in touch with us if you need further support.

  • “How do I remove the colour overlay (filter)?”
    There is a simple way to do this - see the Colour Overlay section.

HTML Structure

This template is a fixed layout, comprising of four main sections: the welcome section, countdown, email-subscribe, about us, contact and the footer. These different sections are identified within the HTML code by the following comments and structure:

<!-- BEGIN WELCOME -->
...
<!-- END WELCOME -->

<!-- BEGIN COUNTDOWN --> ... <!-- END COUNTDOWN -->
<!-- BEGIN EMAIL-SUBSCRIBE --> ... <!-- END EMAIL-SUBSCRIBE -->
<!-- BEGIN ABOUT --> ... <!-- END ABOUT -->
<!-- BEGIN CONTACT --> ... <!-- END CONTACT -->
<!-- BEGIN FOOTER --> ... <!-- END FOOTER -->

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following: (note this CSS is not relevant to this template):

#primaryContent a {
	color: #someColor;
} 

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

#wrap #primaryContent a {
	color: #someColor;
}

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

CSS Structure

There is one CSS file used in this template. All of the CSS for the design and social buttons is inside the single style.css file.

In order to help organise the CSS code (in style.css), the file is separated into sections using:

/* === GENERAL === */

some code

/* === WELCOME === */

some code

/* === COUNTDOWN === */

some code

/* === EMAIL-SUBSCRIBE === */

some code

/* === ABOUT === */

some code

/* === CONTACT === */

some code

/* === FOOTER === */

some code

/* === RESPONSIVE CSS === */

some code

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.

If you need more help with CSS, W3Schools is a good place to start.

Colour Overlay

Glacial uses a partially transparent colour overlay over the background slideshow / video, which helps reduce its visual impact and helps make the page content stand out - but it is easy to remove if you want users to see your images or videos in all their colour glory. Near the top style.css, look for these sections of CSS code:

.backstretch:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(95,96,97,0.6);
    z-index: 100;
}

.mbYTP_wrapper:after {
	content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
	background-color: rgba(95,96,97,0.6);
	z-index: 100;
}

The first section, .backstretch:after is the CSS styles for the slider images overlay. The .mbYTP_wrapper:after CSS section sets the styles for the YouTube video background overlay.

To change the colour, you'll need to edit this line in the code above: background-color: rgba(95,96,97,0.6); This works by RGBA - like RGB but with an extra setting, a, called Alpha, which controls the transparency of the colour. To change the colour, update the RGB values then set the transparency, like this rgba(R,G,B,A); Note that the A value must be between 0 and 1 - zero being completely transparent and 1 being a solid colour.

To remove the colour overlay completely just set the transparency to 0, for example: rgba(95,96,97,0);

To make the colour overlay a solid colour, set the transparency to 1, for example: rgba(95,96,97,1);

Slideshow

Open up the custom.js file, and look for the slideshow section of variables - the first section you see inside the custom.js file. Even if you want to use the video background feature, it is still highly advisable to set up an image slideshow background (even if it only has one image) because the video background doesn't work in all browsers / devices, so it needs the image slideshow to fall back on.

You'll see some variables that look like this:

var slideshowBackgroundURLS = [
	"images/background1.jpg",
	"images/background2.jpg",
	"images/background3.jpg",
	"images/background4.jpg",
];

var slideshowFade = 1000;
var slideshowDuration = 4000;

To change the images, edit the URL paths to your image files. To add more images, add more lines of "URL-TO-IMAGE.jpg", - and remove these lines to have fewer images.

Note that images can be in almost any format (JPG, PNG etc.) and should be fairly large to accomodate multiple screen sizes and retina displays at good quality. However, keep image files below 2MB otherwise the page will load very slowly.

The other two variables, slideshowFade and slideshowDuration are both set in milliseconds. The 'fade' controls the amount of time the fade transition takes, whereas the 'duration' sets the amount of time between animations - i.e. the time you see each image for. Now the slideshow background is set up!

Video Background

Open up the custom.js file, and look for the video background section of variables. As mentioned earlier, it's important to know that should you use the video background feature, it won't work in some older browsers and can't work on mobile devices due to restrictions from YouTube and restrictions placed on content by the devices themselves. If the video background is enabled, mobile users will instead see the image slideshow background.

var videoBackground = 'on';
var videoBackgroundURL = 'http://www.youtube.com/watch?v=RIQqVqQs9Xs';
var videoMuted = true;

To enable the video background, set the first variable on 'on'. To turn it off, simply set it to 'off'.

Once you have chosen your YouTube video (must be from YouTube, currently no support for Vimeo or personally-hosted videos), copy the full URL of the video - don't copy the embed code as this will not work. Paste this address into the videoBackgroundURL variable. If the video background is enabled, you should see the video on the page. Note that the videos can take a while to load sometimes depending on your connection, and the loading overlay shows until the video is ready to play, hence why it sometimes loads for quite a while.

Note that the video background only works on web servers. If testing locally, you will see a constant loading screen.

The videoMuted variable controls whether or not background videos are muted. If it is set to true, background videos are muted and no unmute button is shown to the user. If you set this variable to false, the background video will automatically play its soundtrack and a mute button is visible in the bottom right hand corner of the page. This is so that users can mute the music if they're getting disturbed by it. To summarise - when set to true audio is muted without choice - when set to false audio is not muted by default and users have the option to turn it off.

Countdown

Open up the custom.js file, and look for the Countdown section of variables. Only one variable is required to set up the countdown, and it is responsible for setting the date and time that the script will countdown to.

var countdownDate = "01 January 2015 00:00:00";

Enter the date in the format DD Month YYYY, and the time in the format HH:MM:SS (in 24 hour format, for example 23:00:00).

If the date you enter is in the past, you'll see a constant loading screen and the page will not display. The countdown only works to dates in the future.

Customise Logos

There are two logos used in this template. The large one on the welcome screen, and a smaller one in the footer. You can use the same image for both and it will be scaled appropriately, but the code is handled separately. Alternatively you can use a text based logo on the welcome screen.

Welcome Screen Logo

There are two options for using logos on the welcome screen. You can either use your own logo image, or use a text based one.

To use an image based logo, look for this line of code in the 'WELCOME' section of HTML code (in index.html):

<a href="#top" class="scroll title-img"><img src="images/logo.png" alt="Glacial Logo" /></a>
To change your logo, simply edit the URL 'images/logo.png' to point to the file location where your logo is. This could be to an external site (remember to use http:// in this case). Also, remember to update the Alt tag with something like the name of your site to improve SEO. If you want to remove the logo completely, just delete the above line of code.

To use a text based logo in the style of the Glacial logo, look for the line of code below the line mentioned above, which is commented out. Remove the top line of code for the image logo and uncomment (remove the <!-- -->) the bottom line of HTML, like this:

<a href="#top" class="scroll title-img"><img src="images/logo.png" alt="Glacial Logo" /></a>
<!-- <a href="#top" class="scroll title-img"><h1 class="text-logo">Glacial</h1></a> -->
Remove the comments (<!-- -->) and delete the top line of code so it will look like this:
<a href="#top" class="scroll title-img"><h1 class="text-logo">Glacial</h1></a>

You can then customise the text that is displayed by editing the content of the <h1></h1> element. To change the font you use for your text based logo, open up the css/style.css file, and look for the 'WELCOME' section of CSS code. Find this section of CSS code for text based logos:

.section-main h1.text-logo {
	font-family: 'Grand Hotel', cursive;
	text-transform: none;
	font-weight: 400;
	font-size: 36px;
	color: rgba(236,240,241,0.8);
}
If using free fonts from Google Fonts, choose the font you want from the wide selection and click the Quick Use () then select the styles you would like. Below that, click on the @import tab and copy the line of code. Paste it into the css file, just above the section of CSS mentioned above. Finally, copy the font-family line of code generated by Google Fonts and paste it into the CSS section above, replacing the current 'Grand Hotel' line.

For example, if you used the Google Font 'Montserrat', the changes to the CSS file would be:

@import url(http://fonts.googleapis.com/css?family=Montserrat);
				
.section-main h1.text-logo {
	font-family: 'Montserrat', sans-serif;
	text-transform: none;
	font-weight: 400;
	font-size: 36px;
	color: rgba(236,240,241,0.8);
}

Footer Image

Although you can use the same image file, you have to update the image URLs separately for each logo. In the 'FOOTER' section of HTML code (in index.html), look for this line of code:
<a href="#top" class="scroll footer-img"><img src="images/logo.png" alt="Glacial Logo" /></a>
To change your logo, simply edit the URL ('images/logo.png') to point to the file location where your logo is - the same place as your main logo for use in the welcome screen. This could be to an external site (remember to use http:// in this case). You can use the same image file for both the welcome screen and footer - as the CSS makes sure that the image is scaled appropriately to fit into both locations. Also, remember to update the Alt tag with something like the name of your site to improve SEO.

Customise About Us

Customising this section is extremely simple. Firstly, look for the HTML section called 'ABOUT' and you will see blocks of text. Changing the content of this is as simple as editing the text. Remember to wrap paragraphs in the <p></p> tags so it all looks nice.

Editing the 'featured' boxes in the About Us section is slightly more complicated. Again you will see a series of DIVs containing text - to change the text you can simple chnage its value as you would normally. To change the icon (from the Font Awesome collection), look for a line of HTML like this:

<span><i class="fa fa-desktop fa-fw"></i></span>
To change the icon, choose one from the list of Font Awesome Icons and get the CSS class for that icon (usually with the fa- prefix e.g. fa-rocket), and use this CSS code in the <i></i> tags to use that icon instead. For example, to use the Coffee icon () instead, your line of HTML would look like this:
<span><i class="fa fa-coffee fa-fw"></i></span>
Note that it is important that the fa and fa-fw classes are not removed, as they make the icons work and display properly in the template.

This is the general line of HTML for icons:

<span><i class="fa YOUR-FONT-AWESOME-ICON-CLASS fa-fw"></i></span>

Customise Contact Details

In this section you can easily change details like your address, phone number and email address which show up on the left hand side of the Get In Touch section of the template, or enter completely different information.

In the 'CONTACT' section of HTML code in the index.html file, look for this block of code:

<ul>
	<li><i class="fa fa-fw fa-map-marker"></i>123 Some Street, Some City, UK</li>
	<li><i class="fa fa-fw fa-phone"></i>012 3456 7890</li>
	<li><i class="fa fa-fw fa-envelope-o"></i><a href="mailto:info@mycompanyname.com">info@mycompanyname.com</a></li>
	<li><i class="fa fa-fw fa-globe"></i><a href="">mycompanyname.com</a></li>
</ul>
				
Each line of information you see on the site is part of a list element (<li></li>). Within that we have the <i></i> elements which contain the Font Awesome icons, which is followed by some text which is the actual information to be displayed, such as your address or phone number. If you want this text can be wrapped in links so that when clicked they take the user to a different location (for example clicking your email address would open up a new mail window, as is done here).

To customise these lines of information, first choose an icon from the Font Awesome Icons List and copy its class (e.g. fa-calendar). Then put this into the class identifier of the <i></i> element in your new line of code and change the text with your own information. Here's an example for having a line showing a key date:

<li><i class="fa fa-fw fa-calendar"></i>1st January 2015</li>
Note that you need to keep the fa and fa-fw classes there so the icons display properly.

To add more lines of information, keep adding lines like the one above inside the <u></u> (list) element. Similarly, if you want less lines of information just delete some of the lines.

General formula for contact information lines:

<li><i class="fa fa-fw ICON-CLASS"></i>INFORMATION-HERE</li>

Here are some examples for commonly used bits of information:

<li><i class="fa fa-fw fa-map-marker"></i>ADDRESS</li>
<li><i class="fa fa-fw fa-phone"></i>PHONE-NUMBER</li>
<li><i class="fa fa-fw fa-envelope-o"></i><a href="mailto:EMAIL-ADDRESS">EMAIL-ADDRESS</a></li>
<li><i class="fa fa-fw fa-globe"></i><a href="WEBSITE-ADDRESS">WEBSITE-ADDRESS</a></li>

Note that when using links to email addresses it is common practice to use the mailto: prefix before your address in the href="" section of the link, so that when clicked the users sees a new mail window containing your address.

Social Icons

To change the social icons seen in the footer, look for the lines of code in after the <-- Social Icons --> code comments. You'll see lines of HTML that look like this:

<a href="" target="_blank" class="footer-social"><i class="fa fa-fw fa-twitter"></i></a>
To explain these briefly, the href="" is where the URL to your social profile goes, the target="_blank" tells the browser to open the link in a new browser tab (remove this bit of code if you don't want that) and the class="footer-social" simply allocates this class to the element so that the CSS can style it appropriately for the footer. Finally, the <i></i> element with the class class="fa fa-fw fa-twitter" is the Font Awesome code which displays the social icon in the link.

Here is the general formula for customising the social icons:

<a href="http://YOUR-SOCIAL-URL" target="_blank" class="footer-social"><i class="fa fa-fw SOCIAL-ICON-CLASS"></i></a>
To create a new social button for the footer, paste in the above code to the section of code in the footer as explained above. Then, paste in the URL to your social profile (e.g. http://twitter.com/envato) inbetween the speech marks of href="" - so in this case you would type: href="http://twitter.com/envato". Remember to include the http:// so that the link works!

Next you'll want to add the appropriate icon for your social network. You can find a full list of icons available from Font Awesome here - look in the 'Brand Icons' section near the bottom of the page to find the social icons available for use. Find the icon you want and copy the class which is usually fa- followed by the name of social network (for example fa-twitter). Paste this into the class identifier on the <i></i> elements, but making sure you don't remove the fa and fa-fw classes which are already there.

Here is a complete example for creating a social button for Pinterest:

<a href="http://www.pinterest.com/envato/" target="_blank" class="footer-social"><i class="fa fa-fw fa-pinterest-square"></i></a>

The following are complete examples for some of the most popular social networks. All you need to do is replace 'SOCIAL-URL' (e.g. TWITTER-URL or FACEBOOK-URL) with the URL to your profile and copy the code over.

<a href="TWITTER-URL" target="_blank" class="footer-social"><i class="fa fa-fw fa-twitter"></i></a>
<a href="FACEBOOK-URL" target="_blank" class="footer-social"><i class="fa fa-fw fa-facebook"></i></a>
<a href="INSTAGRAM-URL" target="_blank" class="footer-social"><i class="fa fa-fw fa-instagram"></i></a>
<a href="GOOGLE-PLUS-URL" target="_blank" class="footer-social"><i class="fa fa-fw fa-google-plus"></i></a>
<a href="TUMBLR-URL" target="_blank" class="footer-social"><i class="fa fa-fw fa-tumblr"></i></a>
<a href="YOUTUBE-URL" target="_blank" class="footer-social"><i class="fa fa-fw fa-youtube"></i></a>
<a href="DRIBBBLE-URL" target="_blank" class="footer-social"><i class="fa fa-fw fa-dribbble"></i></a>
<a href="FLICKR-URL" target="_blank" class="footer-social"><i class="fa fa-fw fa-flickr"></i></a>
<a href="PINTEREST-URL" target="_blank" class="footer-social"><i class="fa fa-fw fa-pinterest"></i></a>

Email Subscription

The Email Subscription form with this template can do a variety of things with the submitted addresses. It can either save them to Mailchimp lists which saves a lot of time for you and enables easier sending out of emails - or the form can save addresses to your MySQL Database or even send them to your email address. A few different steps are required for each method, and they are outlined below. For the Mailchimp instructions, look for the 'Mailchimp Setup' heading.

All of the settings needed to set up the email subscription form are in the php/settings.php file. Open it up. You'll see a page of variables and code comments to help explain everything. For the email subscription settings, look for the section under the comment // **** SETTINGS FOR SUBSCRIBE FORM ****.

It is reasonably straight forward to enter your details according to the comments on the page.

To decide which email subscription service you want to use, look for these three variables:

$saveToMySQL = 'true';
$sendToEmail = 'false';
$mailChimpList = 'false';

To save email addresses to your MySQL database, set $saveToMySQL to 'true', or 'false' if you don't want to save to MySQL. If you want subscribed addresses sent to your email address, set $sendToEmail to 'true', or 'false' if you don't want to send to your email. If you wish to save subscribed addresses to your Mailchimp list, set $mailChimpList to 'true', or 'false' if you don't want to use MailChimp.

You can use all the methods at once by setting them all to 'true', but you must use at least one.

Remember to include the single quotation marks ' ... ' around the values of the variables, otherwise it may not work.

Depending on which notification method you use, fill in the appropriate details below the three variables in php/settings.php. There are extensive code comments to instruct you what to do. Find more specific instructions about Mail, MySQL and MailChimp settings below.

Saving to MySQL

Your web server must have MySQL installed for this to work.

To allow the form to submit addresses to your MySQL database, firstly make sure the $saveToMyQL variable is set to 'true'. You'll also need a database (named whatever you like) and a table within that database (which you can also name whatever you like, a good example is 'signups'). You'll also need to put some columns inside this table. If you use something like PHPMyAdmin for managing MySQL databases, have a read over this guide to help you set up MySQL databases - as these instructions assume you are familiar with creating tables, and only explains what names to give the rows etc. For this script, you'll need three columns:

  1. The first one contains the email addresses, and is called: signup_email_address, is type VARCHAR and set a length of around 200.
  2. The second column records the date of when someone signed up, and is called: signup_date. Again, set it to VARCHAR and set a length of around 200.
  3. The third column is similar to the second, but contains the specific time of signup. It's called: signup_time. Again, set it to VARCHAR and set a length of around 200.

When you have done this, fill in your table names etc. and connection details in the following variables in php/settings.php:

$mysql_host = "localhost";
$mysql_username = "root";
$mysql_password = "root";
$mysql_database = "databasename";
$mysql_table = "tablename";

Sending to Email

To send email addresses to your email, make sure $sendToEmail variable is set to 'true', then edit the following variables:

$myEmail = "youremail@youremailaddress.com";
$emailFrom = "Glacial Under Construction ";

$myEmail is the email address of yours which subscription notifications will be sent to. $emailFrom sets the name of the 'sender' - i.e. in your email client it will be displayed as From: Glacial Under Construction (hello@emailofmysite.com) (from the example variables above).

If you're not receiving any emails, check they're not being blocked by your spam filter.

Setting up MailChimp

Either as an alternative or as well as using email notifications or MySQL as explained above, you can also use MailChimp integration. This means that when a user subscribes, their email address is automatically added to your List of subscribers on MailChimp, so all of the addresses are there ready and waiting for you to contact them. Using MailChimp helps to simplify the whole process of subscribing, managing and emailing your users.

If you want to enable MailChimp integration for the template, you'll need to set the $mailChimpList variable to 'true' in php/settings.php.

Step 1 - Make a MailChimp Account
If you don't already have an account, go to login.mailchimp.com/signup and enter your details. You'll then be prompted to enter more specific details about your company in order to comply with various rules and regulations about emails.

Step 2 - Create a List
If you already have a list set up, skip this step. Otherwise, on your MailChimp dashboard click on 'Lists' in the left hand navigation panel, as shown in the image below.

MailChimp

Once you are on the lists page, click on the 'Create List' button in the top right hand corner of the page, as indicated by the arrow on the page itself. Type in your details such as names, subjects etc. as you want them, as explained by the page. Once you have customised this, click 'Save' at the bottom of the page. You'll be redirected to the Lists pag, where you can see your new list.

Step 3 - Get List ID
In order to tell the PHP script which of your lists to add the addresses to, we need it's ID.

MailChimp

On the Lists page, click on the dropdown menu then on 'Settings' as shown by the image above.

At the very bottom of the List Settings page, you'll see a small section which shows the Unique ID for this list, as shown by the image below.

MailChimp

Copy that ID code, and paste it into the variables in php/settings.php, where it says LIST ID HERE.

$listId = 'LIST ID HERE';

Step 4 - Get your API Key
You'll also need a unique API key in order to integrate MailChimp.

To get it, go to this page: admin.mailchimp.com/account/api and click the 'Create A Key' button. Your new API Key will appear in a table below, and simply copy the API Key from the text box, and again paste it into the space API KEY HERE in php/settings.php, like this:

$apikey = 'API KEY HERE';

Step 5 - Check it works
You should now have integrated MailChimp! Test it out yourself to see if it works. It's also worth noting that when a user subscribes using MailChimp, they won't show up on your list of subscribers until they have confirmed their subscription by clicking on a link automatically sent to their email address.

Contact Form

The contact form supplied with this template works pretty much on its own, all you need to do is set up who the messages are emailed to.

To set up the contact form, you need to supply two pieces of information. Most importantly is your email address, which is where any messages from the contact form are sent to. Secondly, you can provide the name of your site which will be seen in the subject of the email to you and also to help prevent email clients from thinking the message is spam.

If you're not receiving any emails, check they're not being blocked by your spam filter.

If you customise the code and see the loading symbol for extended periods of time, it most likely means that something isn't working properly and the PHP cannot send the email.

To set up the contact form, open up php/settings.php and look for the following section of two variables, near the top of the file:

$yourEmail = 'youremail@youremailaddress.com';
$siteName = 'YOUR-SITE-NAME';

To enter your email address, type it inbetween the speech marks (' ') in the variable $yourEmail and do the same for the next variable, $siteName. This is essentially how you want to identify the emails this form sends to you - as what you type will appear in the subject of the email you receive. As the example uses, if you typed 'CosmicLabs' for this variable, when someone (in this example, someone called Bill Bloggs) sends you a message from the contact form you would receive an email (to the address you entered above) with the subject "CosmicLabs - Message from Bill Bloggs". Also, adding your site name helps email clients to identify who the email is from, and makes it clearer for you aswell.

All settings must be in speech marks, like this: ' ... '

If you want to customise the error and success messages of the contact form, you can find them in the index.html file. Inside the CONTACT section of code, you will see two lines of code (although not next to each other in the real file) that look like this:

<div id="contact-success"><!-- Success Message -->Your email was sent. Thanks!</div>
<div class="contact-response"><!-- Error Message -->Please fix the errors and try again.</div>

To change the messages, simply edit the text (note that the code comments such as <!-- Success Message --> don't show in the message and it doesn't matter if you remove them).

The contact form uses behind the scenes spam prevention which detects spam bots, reducing the need for Captcha.

Setting a Favicon

Near the top of the index.html file, you'll see this line of HTML code:

<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.png">

To set your Favicon (the bookmark image), simple change the URL of the link to the location of your image file.

Credits

We've used a few different images and plugins to help make this template even better. Here is what we used: