Installation


Installation is pretty easy.

Unzip the HTML folder, choose the variation you want, rename it to index.html and upload it trough FTP.


Customization


You can custom pretty much everything.


Base Color

The template comes with a default green base color #9DC500.

To change the base color, open the CSS file located in css/style.css, scroll to the bottom of the file, and in the section "Change base color" find the text #9DC500 and replace with your HEX code color.


Logo

To change the logo, just overwrite the image file located in img/logo.png with yours.


Content

Find the comments <!-- Main Title -->, <!-- Main Text --> and replace them with your content.


Contacts

Find the block comments <!-- Contact details --> and change the contact information.


Social Media

Simply add or remove your social profiles.

Find the block comment <!-- Social Icons --> and edit or remove the profiles.

Each profile is a <li> element. Just edit the href attribute and replace with your profiles URL


Footer info

Don't forget to change the copyright info.
Find the comment block <!-- Copyright / Footer info --> and edit it.



Variations


There's 3 types of templates

We provide one file for each version:


  1. Background slideshow without timer: slideshow.html
  2. Solid background color with timer: timer.html
  3. Solid background color without timer: no_timer.html
  4. Google Maps: map.html
  5. Google Maps with full background: map_transparent-footer.html
  6. Background slideshow with full background : slideshow_transparent-footer.html

Typography


You can choose between white and black text.

Black text is enabled by default.
To enable white text, just add the text-white class to the <body>

<body class="text-white">

Components


We'll guide you trough the available components.


Timer

There's a version of the template with a countdown timer: timer.html

You just need to set the future date in the html file. Find the config settings block and set the launch date.


Slideshow

There's a version of the template that includes a background slideshow: slideshow.html

Find the config settings block Slideshow Images.

There's a javascript array that holds the images to be loaded into the slideshow: slideshow_images.

Fill in with your own images. Can be URL's or path's.


Example

var slideshow_images = [
   { image : 'http://farm3.staticflickr.com/2216/2060325146_03247bc3c1_o.jpg' },
   { image : 'http://farm8.staticflickr.com/7166/6831414535_1f8b27fb6a_o.jpg' },
   { image : 'http://farm1.staticflickr.com/210/471837691_f0783ee559_o.jpg' }
];
With relative path

var slideshow_images = [
   { image : 'img/your_image.jpg' },
   { image : 'img/your_image_2.jpg' },
   { image : 'img/your_image_3.jpg' },
   { image : 'img/your_image_4.jpg' }
];
Slideshow configuration

Find the Slideshow Configuration comment, and modify the slideshow settings:


Advanced configuration options can be set in js/script.js. Find the Background SlideShow block.


Twitter

The Twitter username is set in the html file.
In the config settings block, find the twitter_username javascript variable and replace it with your username.

To disable the widget just remove the variable or set it to blank:


Enabled
var twitter_username = 'envatowebdesign';

Disabled
var twitter_username = '';

Advanced configuration options can be set in js/script.js. Find the Twitter Widget block.


Form

This template comes with an AJAX powered form.
You can use it to send an e-mail, join a newsletter, or anything you want.

The file that's called after submission is form.php.

Edit this file to execute your functions.

AJAX Form
If you want to use third-party services like Mailchimp, Campaign Monitor, you should disable ajax form.
FInd the Enable/Disable Ajax Form and set the variable ajax_form to false

Map

There's a version of the template with a Google Map in the background.

Find the Google Maps Config comment and edit the settigs of the map.



Compatibility


This template was tested in a vast majority of browsers.

If you found a bug, please use the theme comment section or report it to us describing:

  1. Operating System
  2. Browser version
  3. What is needed to replicate it


Compatible with

  • Internet Explorer 7
  • Internet Explorer 8
  • Internet Explorer 9
  • Internet Explorer 10
  • Firefox 3.6+
  • Safari 4+
  • Chrome
  • Opera

This template is responsive and works on all major devices:

  • Large and small display
  • Smart Phones
  • Tablets

Sources


The following resources are used:



Javascript


Fonts


Icons



Changelog



v1.2

v1.1

v1.0