Finely Documentation

For Finely Version 1.2.0 - Last Updated: August 2015

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, running and customised as soon as possible.

If you have any questions or problems that aren't answered here, please submit a ticket to our support site or get in touch on Twitter (@CosmicLabs). Alternatively, you can leave a comment on Finely's Themeforest page, use the contact form on our Themeforest profile, or email us. Whatever method you use, we'll get back to you within 12 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 Finely.

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 Finely. 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 Finely 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 Finely - Documentation and Finely - Template. Using an FTP Client (such as Filezilla or Total Commander), upload all of the contents of the Finely - Template folder to your server.

Setup

All of the basic settings you need to get Finely up and running and customised are within two files. All Javascript settings (for slideshow, video background, colour settings 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 Finely.

Frequently Asked Questions

If you're having trouble with Finely, 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 as a theme. Unfortunately Themeforest doesn't usually grant refunds if you purchased an item in error, but it's worth sending a ticket to Envato Support to see what they say.

  • "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 could indicate several problems. There may be a JavaScript issue (often you've done something wrong in custom.js file. Alternatively, if the images used in the background slideshow can't be found (i.e. you've put a bad URL into custom.js) then you'll see this. Check your code and image URLs for any problems. 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 Finely 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 Finely 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.

  • “Can I use a custom GIF as the preloader animation?”
    You sure can - see the General Settings section.

  • “How do I disable the countdown?”
    Turning off the countdown requires changing one setting in the custom.js file. See the Countdown section.

  • “Can I change the language of the countdown?”
    Yes. See the Countdown section.

HTML Structure

This template uses a simple structure - it features a 'main' screen, which includes the words 'coming soon' and the countdown. From here, the user can click buttons which open up various other 'pages', which include further content. These pages aren't separate from the single index.html file - they are simply displayed and hidden above the other content by jQuery. Each 'page' has it's own section of HTML code, as outlined by this structure:

<!-- BEGIN MAIN -->
...
<!-- END MAIN -->

<!-- BEGIN SUBSCRIBE PAGE --> ... <!-- END SUBSCRIBE PAGE -->
<!-- BEGIN ABOUT PAGE --> ... <!-- END ABOUT PAGE -->
<!-- BEGIN CONTACT PAGE --> ... <!-- END CONTACT PAGE -->

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

A single CSS file, style.css is used for this template which contains all the CSS for the design of the site. There are other CSS files used, but these do not require editing and are not relevant to the template's design (for example animate.css contains the CSS code for animations, which doesn't need to be edited).

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

/* === GENERAL === */

some code

/* === MAIN === */

some code

/* === COUNTDOWN === */

some code

/* === SUBSCRIBE === */

some code

/* === ABOUT === */

some code

/* === CONTACT === */

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. Alternatively, email us and we'll happily guide you through customising your template (note that we don't provide a customisation service).

General Settings

In the custom.js file, there are a number of general settings to help you edit parts of the template's design and functionality. If you don't want the design to look any different, don't bother changing these settings.

var preloader = 'on';
var preloaderGIF = 'off';

var bgImgOverlay = 'on';
var bgOverlayColour = '#000000';
var bgOverlayOpacity = '0.4';

If you want to, you can disable the image and background video preloader by setting var preloader = 'off'. The preloader means that users don't see the template until all of the background images or videos have been loaded - so that the site is ready for them to see. With this disabled, the user will see your site straight away without any images or videos until they have loaded - which makes the site look worse and less professional. It's best to keep the preloader enabled.

The preloader should be enabled in order for a smooth user experience.

If you'd rather use a custom preloader, rather than the default CSS3 animation one, you can use a GIF file of your choice instead. When the var preloaderGIF = 'off' is set, the default CSS animation is used. To use your own GIF file, set the variable to var preloaderGIF = 'true' and the preoader will switch to a GIF. You can find the GIF file inside the images folder - to use your own file, simply replace the loader.gif file with your own, making sure you keep the same filename. Alternatively, you can set a custom URL to your GIF file by opening up style.css and edit the URL in line 136 for the loader background image, like this (some CSS has been removed here):

.gif-preloader {
	background-image: url("YOUR-GIF-URL-HERE");
}

You can turn the background image overlay on or off using the var bgImgIverlay = 'on' variable. By setting this to 'true', the image overlay (which is little squares by default in the template) is displayed. If you set the variable to 'false', the image overlay is hidden, which is preferable if you like clean or flat designs.

You can change the colour of the CSS background overlay using the var bgOverlayColour variable. This is the semi-transparent colour overlay which darkens background images or videos so that the content is more easily visible. By default, the colour is black (#000000) - but you can change it using this variable to any HEX colour.

The opacity of the CSS colour overlay can also be edited, using the var bgOverlayOpacity variable, on a scale between 0 and 1.0. 0 is completely transparent, and 1.0 is a solid colour. If you don't want a colour overlay at all, simply set this variable to 0.

Slideshow Background

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.

To use a single, static image background, only use one line of image URLs, for example:

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

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.

You must have http:// in front of your YouTube URL. If there is a problem with your URL, you will see a constant loading screen.

Unfortunately, due to the limitations of the plugins we use, only YouTube videos can be displayed.

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.

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

Countdown

Open up the custom.js file, and look for the Countdown section of variables. You will see two variables.

var countdownOnOff = 'on';
var countdownDate = '01 January 2016 00:00:00';

You can turn the countdown on or off by changing the countdownOnOff variable. Set it to 'on' to enable the countdown, or set it to 'off' to disable it.

To set the date to count down to, change the countdownDate variable. 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, the countdown will simply display zero. Similarly, once the date you set is passed, the countdown shows zero.

To disable the countdown, all you need to do is set the countdownOnOff variable in the custom.js file to 'off'. You don't need to delete any HTML code from the index.html file. Make sure you don't delete this line: <div id="countdown"></div> otherwise the countdown won't work at all.

To change the language of the countdown, you will notice there are more variables in the Countdown section of the custom.js file, which looks like this:

var countdownLang_Days = 'days';
var countdownLang_Day = 'day';

var countdownLang_Hours = 'hours';
var countdownLang_Hour = 'hour';

var countdownLang_Minutes = 'minutes';
var countdownLang_Minute = 'minute';

var countdownLang_Seconds = 'seconds';
var countdownLang_Second = 'second';

These are the settings for the words used in the countdown. You can change each of them if you need to have the countdown display in a different language. Make sure you change the plural and singular forms of each word.

Customise Logo

To use your own image for the logo at the top of the main section, look for this line of code in the 'MAIN' section of HTML code (in index.html):

<img src="images/logo.png" class="logo" alt="Finely" />
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.

Adding New Pages

A 'page' is the bit you see when you click on one of the navigation buttons. The default pages which are already in place are the subscribe, about and contact pages. If you want more pages for other uses, they are very easy to set up.

Create the page HTML

First, we need to make the HTML content for the page itself - i.e. what you see when you click on the navigation link. To create new content, copy this template and paste it anywhere within the body tag of index.html - the order you place it with other page code doesn't matter.

<!-- BEGIN NEW PAGE -->
<div class="scrollsection section-class">
	<div class="mini-container">
		<div class="header">
			<a class="nav-button scrollsection-close-button">close</a>
			<h2>page-title</h2><!-- Page Title -->
		</div>
		<div class="content"><!-- Page Content -->

		</div>
	</div>
</div>
<!-- END NEW PAGE -->

Firstly, you need to assign a unique class to your section, which will allow it to be open and closed. In this line: <div class="scrollsection section-class">, replace the word class with your unique one. For example, if we are creating a page called 'Meet the Team', this class could be team, in which case that line of code would look like this: <div class="scrollsection section-team">.

You can enter the title for the page inbetween the <h2></h2> tags.

All of the content of the page goes into the <div class="content"> div. Simply type in your content using basic HTML code such as <p></p> to format your text.

Once this is done, your new page is almost ready. Next we just need to add a navigation button for it!

Add a navigation button

In order to open our new page, it needs its own navigation button.

Within the 'main' section, under the countdown code, you will see the navigation button section of HTML code, which looks like this:

<div class="navigation">
	<a class="nav-button" onclick="showSection('section-subscribe')">subscribe</a>
	<a class="nav-button" onclick="showSection('section-about')">about</a>
	<a class="nav-button" onclick="showSection('section-contact')">contact</a>
</div>

Each line of this corresponds to a navigation button:

<a class="nav-button" onclick="showSection('section-class')">section-name</a>
You can enter the name of your new section (the text you see in the button) in-between the <a></a> tags, in other words where it says section-name in the code above (example below using the 'Meet the Team' example from earlier).

The button text is usually written in lowercase to fit in with the design, but simply type the text in with a different case if you would prefer uppercase or capitalised text.

Next you need to enter the unique class you created earlier for your new section into the onclick function of this link - similar to the close button we set up earlier. This tells the JavaScript which page to open when you click this button. Replace section-class with your unique class name. Using the 'team' example from earlier, the code would now look like this:

<a class="nav-button" onclick="showSection('section-team')">meet the team</a>

Your new page should now be working. You can add as many pages as you like, or alternatively remove them by deleting their navigation button and the relevant block of HTML code.

Customise About Page

This part of the documentation explains how to customise the 'featured' boxes at the bottom of the about page, which includes text and icons.

Firstly, in index.html, look for the block of code inside the <!-- BEGIN ABOUT PAGE --> comments. 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 page is slightly more complicated. Again you will see a series of DIVs containing text - to change the title of the featured box, edit the text in the <h3></h3> tags, and to edit the other text simply change the contents of the <p></p> tags. To change the icon (from the Font Awesome collection), look for a line of HTML like this:

<span class="about-logo"><i class="fa fa-support fa-fw" style="color: #1abc9c"></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 class="about-logo"><i class="fa fa-coffee fa-fw" style="color: #1abc9c"></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.

To change the colours of the icons, simply replace the HEX colour code assigned to the <i></i> tag. For example, to make the coffee icon from the previous example a bright yellow colour (#ffff00), the code would now look like this:

<span class="about-logo"><i class="fa fa-coffee fa-fw" style="color: #ffff00"></i></span>

This is the general line of HTML for icons:

<span class="about-logo"><i class="fa YOUR-FONT-AWESOME-ICON-CLASS fa-fw" style="color: YOUR-COLOR"></i></span>

Customise Contact Page

This section explains how you can easily change details like your address, phone number and email address which show up on the left hand side of the Contact Page of the template.

In index.html, look for some code inside the <!-- BEGIN CONTACT PAGE --> comments, which looks like this:

<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 (<a></a> - put your link inside href="") 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 in the last two lines above).

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

<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 <ul></ul> (list) element. Similarly, if you want fewer 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 at the bottom of the main section, look for the lines of code after the <-- Social Icons --> code comments. You'll see lines of HTML that look like this:

<a href="" target="_blank" class="social-button"><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="social-button"><i class="fa fa-fw SOCIAL-ICON-CLASS"></i></a>
To create a new social button, 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/Cosmic_Labs) in-between the speech marks of href="" - so in this case you would type: href="http://twitter.com/Cosmic_Labs". 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="social-button"><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="social-button"><i class="fa fa-fw fa-facebook"></i></a>
<a href="INSTAGRAM-URL" target="_blank" class="social-button"><i class="fa fa-fw fa-instagram"></i></a>
<a href="GOOGLE-PLUS-URL" target="_blank" class="social-button"><i class="fa fa-fw fa-google-plus"></i></a>
<a href="TUMBLR-URL" target="_blank" class="social-button"><i class="fa fa-fw fa-tumblr"></i></a>
<a href="YOUTUBE-URL" target="_blank" class="social-button"><i class="fa fa-fw fa-youtube"></i></a>
<a href="DRIBBBLE-URL" target="_blank" class="social-button"><i class="fa fa-fw fa-dribbble"></i></a>
<a href="FLICKR-URL" target="_blank" class="social-button"><i class="fa fa-fw fa-flickr"></i></a>
<a href="PINTEREST-URL" target="_blank" class="social-button"><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 = "Finely Under Construction <hello@emailofmysite.com>";

$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: Finely 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 page, 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 along with a few other details.

To set up the contact form, you need to supply three pieces of information. Most importantly is your email address, which is where any messages from the contact form are sent to. Secondly, you need to give your personal or company name, which should be the name associated with your email account which is receiving the emails. This helps stop your messages being marked as spam. Thirdly, you need provide the name of your site which will show email clients where the email is from - helping stop your emails being marked as spam.

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

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

$yourEmail = 'youremail@youremailaddress.com';
$yourName = 'Cosmic Labs';
$siteName = 'Finely Under Construction <hello@emailofmysite.com>';

To enter your email address, type it in-between the speech marks (' ') in the variable $yourEmail and do the same for the next two variables.

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 <!-- BEGIN CONTACT PAGE --> 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="images/faviconlogo.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: