Getting startedTop

HTML files

The HTML files for the template are in the template folder. Every HTML file has the same basic structure - a single column fixed layout. Each part of the file is commented to help you find the section you want to make changes to. The content area for each page begins with <div class="content-inner">, the home page is index.html file.

CSS files

Storm has one main stylesheet css/styles.css and this is the file that you should be making any changes to. The file is split into sections by numbered comments and the file has a table of contents to help you find the right section.

JavaScript files

There are 3 JavaScript files used in most of the HTML files, located in the js folder:

1. jQuery - js/jquery-1.5.2.min.js - The jQuery JavaScript library
2. Plugins - js/plugins.js - All third-party plugins & scripts
3. Custom scripts - js/scripts.js - Custom JavaScript

Adding your own JavaScript

If you want to add your own JavaScript, you can do so in js/scripts.js, if you need to add code that executes after the DOM is ready you can add it after this line:

$(document).ready(function() {

To add your own third party plugin just add a link to the JavaScript file in the head of the document. If you placed your plugin in the js folder, you would add this code inside the <head> tags of the document:

<script type="text/javascript" src="js/your_plugin.js"></script>

PSD files

You will find the PSD file in resources/storm.psd. This PSD has the design for most pages and they are hidden, so just find the folder in the layers panel that is named after the page and show it. Every element is grouped neatly in their own folders. Hidden elements are in yellow layers.

Ajax version

The Ajax version uses most of the same files as the standard version with two exceptions:

The homepage is index.ajax.html instead of index.html
The JavaScript file is js/scripts.ajax.js instead of js/scripts.js

If you are choosing to use the Ajax version, you should make a backup of the standard index.html by renaming to index.standard.html, then rename index.ajax.html to index.html. When any instructions in this document ask you to make a change to scripts.js, you should make your changes to scripts.ajax.js instead. There are two links inside index.ajax.html that point to index.ajax.html which you should now also change to point to index.html. Just do a find and replace in the source code of your editor for index.ajax.html and replace it with index.html.

Also note that the instructions for the standard version ask you to make changes to all other files when you make a global change to one page, for the Ajax version you only need to make the change to index.html since it's only the content area from the other pages that are loaded in.

Fonts

We have included the fonts that we used for the Cufon font replacement in case you want to make any custom design elements with them. You will find them in the resources/fonts folder.

Global customisationTop

Changing the logo

The existing logo is located at images/logo.png, you can replace that file with your own logo file with the same name.

If your logo has a different file extension you will need to change the HTML code of the page, so do a search in the code for the term  and you should find the <img> tag for the logo. Change the src="" attribute to point to your new logo.

Note: you will need to make the change to the HTML source code on all the other pages you will be using on your site.

Changing the navigation

To find the navigation in index.html search for . On the lines below that you'll see the navigation links that you can change to suit your needs. To make a dropdown menu just start another ul list inside any list item - reuse any code that is there to make the navigation suit your site.

Note: you will need to make the change to the HTML source code on all the other pages you will be using on your site.

Changing the footer information

In index.html search for the term . On the line below, you will find the footer text.

Note: you will need to make the change to the HTML source code on all the other pages you will be using on your site.

Adding your social networking links

To find the HTML code for the social networking "Connect with me" popup box, search index.html for the term facebook.png, this should land you at the first image which is for Facebook. On the next lines after that, there is one social networking link and icon per line. You should be able to tell what this link is for by looking at the name of the image file or the alt tags.

Removing a link

To remove a link, delete the entire line with the link and image on it.

Adding a link

To add a link, copy the code for an existing icon and paste it onto a new line, then change the image src attribute to point to the icon of the social network or service. We have included a lot of icons in the images/social-icons/ folder. You should also change the href attribute of the <a> tag to point to the URL of your account. Here is a complete line for example (only on multiple lines for readability):

<div class="one-icon-wrap"><a href="http://www.facebook.com/your-username">
<img src="images/social-icons/facebook.png" width="32" height="32"
alt="Facebook" /></a></div>

Note: you will need to make the change to the HTML source code on all the other pages you will be using on your site.

Adding your Twitter feed

In the file js/scripts.js, near the top of the file you should find the code for the Twitter settings. Change the Twitter username to yours.

twitterUsername = 'your_username',

You can also change the number of Tweets to suit. Change the code:

tweetCount = 2;

to whatever number you want. The Twitter feed popup box should now show your own tweets.

Note: you will need to make the change to the HTML source code on all the other pages you will be using on your site.

Changing the colour scheme

We have made a section in the CSS file so that you can easily override the orange font and rollover colours to whatever colour you like. Go to the styles.css file and under section 20 you will find the hex numbers belonging to the styles use the orange colour. Change the hex number "#FFA200" to your new one and this will change all the relevant styles.

Making the header fixed position

To make the header stay in a fixed position, make these changes to the CSS file styles.css section 2. DESIGN LAYOUT

#header-outer {
    margin: 0 auto;
    color: #FFF;
    background-image: url(../images/header.png);
    background-repeat: repeat-x;
    background-position: left 15px;
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: #000;
    position: fixed;
    width: 100%;
    z-index: 100;
}

.content-inner {
    width: 940px;
    margin-top: 140px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding: 0;
    line-height: 150%;
}

Changing the text inside the search box

If you need to change or translate the 'Search' text, you will find it inside scripts.js, search for the term searchBoxText and change the text to suit.

Changing the map button text

If you need to change or translate the 'Find us' text, you will find it inside the contact.html file. Search for the term view-map and right next to that you will see the text 'Find us', change it to suit.

If you need to translate the 'Hide map' text, you will find it inside scripts.js, search for the term hideMapButtonText and change the text to suit.

Background customisationTop

Adding background images

The backgrounds on the preview version of Storm are not included in the downloadable version due to copyright reasons, so you will need to add your own background images. You are free to download the images that we used and use them yourself, see the section below called Our live preview background images. We suggest making the background images around 1680px width x 1050px height. This will ensure that the image looks great in almost all screen resolutions. To keep the download size relatively small we found that choosing a jpeg quality between 40 - 60% meant that the file size was about 250kb - 300kb each.

Add your background images to the folder images/backgrounds/. After that you will need to add links to your images injs/scripts.js, at the top of that file you will find the following code:

var backgrounds = [
    'images/backgrounds/placeholder.jpg'
],

Add the paths to your images one on each line with a comma at the end of every line except the last one, the file name itself is not important as long as it points to the your background, e.g.:

var backgrounds = [
   'images/backgrounds/your_background1.jpg',
   'images/backgrounds/your_background2.jpg',
   'images/backgrounds/your_background3.jpg',
   'images/backgrounds/your_background4.jpg',
   'images/backgrounds/your_background5.jpg',
   'images/backgrounds/your_background6.jpg'
],

We have included a CSS based full screen background fallback for users with JavaScript disabled. You will need to change index.html, search for the term  you'll see an <img> tag that is pointing to the placeholder background. Change this to point to your background image e.g.

<img src="images/backgrounds/your_background1.jpg" alt="" />

Note: you will need to make the change to the HTML source code on all the other pages you will be using on your site.

Background script options

There are some options you have to change the functionality of the background image script:

Key	Default	Description
speedIn	3000	Speed of the "fade in" transition between background images in milliseconds.
speedOut	3000	Speed of the "fade out" transition between background images in milliseconds.
sync	true	If true - both fade animations happen at the same time, if false - "fade in" waits for "fade out" to complete.
minimiseSpeedIn	1000	Speed that the website fades in when the close button is clicked.
minimiseSpeedOut	1000	Speed that the website fades out when the minimise button is clicked.
controlSpeedIn	500	Speed that the controls fade in at in full screen mode.
fadeIE	false	Fade the website when the minimise button is clicked in IE 7,8.
preload	true	Preload the background images for faster loading.
save	true	Save the current background image across pages in a cookie.
slideshow	true	Enable the slideshow functionality (play/pause button).
slideshowAuto	true	Start the slideshow automatically.
slideshowSpeed	7000	The time that each background image is displayed in the slideshow.
random	false	Display the background images in random order each time, forces "save: false".
keyboard	true	Use the keyboard to control the background images. Left arrow = prev, right arrow = next, esc = close full screen mode.
onLoad	false	Callback that fires right before loading a background image.
onComplete	false	Callback that fires when the background image has finished loading (and animating).

To use the options, open scripts.js and find the code backgroundOptions = {, it's near the top of the file. You should see code looking like the following:

backgroundOptions = {

},

Add your own options between the curly brackets as shown below, each option you add should end in a comma, except the last one, for example

backgroundOptions = {
    speedOut: 0,
    slideshow: false
},

Note: make sure to end each line of your options with a comma (except the last line), or the script will break!

Note: the website fade in / fade out effect has been changed to a show / hide effect in Internet Explorer since the way the browser handles the fading of some positioned elements is not pretty.

Random background images

backgroundOptions = {
    random: true
},

See "Background script options" section above for where to add this code.

Disable the slideshow

backgroundOptions = {
    slideshow: false
},

See "Background script options" section above for where to add this code.

Disable keyboard navigation

backgroundOptions = {
    keyboard: false
},

See "Background script options" section above for where to add this code.

Set background transition to Storm v1.0 effect

backgroundOptions = {
    speedIn: 1250,
    speedOut: 0,
    sync: false
},

See "Background script options" section above for where to add this code.

Different default background per page

It's possible to set a different default background on a per page basis. You will need to find out the index of the image in your list of background images that you added to scripts.js. The first background in your list has the index 0, the second one has the index 1, the third image has index 2, and so on. Once you have the index, add the code below to your page (use your number instead of 3):

<script>var backgroundIndex = 3;</script>

Add your code before this line in the <head> of the page:

<script type="text/javascript" src="js/scripts.js"></script>

Different backgrounds per page

It's possible have an entirely different set of background images on a per page basis. The code you need to create the backgrounds is the same as inside scripts.js but you need to add it in the <head> of page instead.

<script>var backgrounds = [
   'images/backgrounds/your_background1.jpg',
   'images/backgrounds/your_background2.jpg',
   'images/backgrounds/your_background3.jpg',
   'images/backgrounds/your_background4.jpg',
   'images/backgrounds/your_background5.jpg',
   'images/backgrounds/your_background6.jpg'
];</script>

Add your code before this line in the <head> of the page:

<script type="text/javascript" src="js/scripts.js"></script>

Using a solid background colour instead of background images

If you want to completely disable the background image functionality and use a solid colour instead, there are 3 things you must do:

1. Remove all images from the list of images in scripts.js
2. Change the background colour to suit in the CSS

Each step is explained in more detail below.

1. Remove all images from the list of images in scripts.js

Open js/scripts.js and near the top you will see the code where you set the list of background images, as seen below.

var backgrounds = [
    'images/backgrounds/placeholder.jpg'
],

Remove the line in between the square brackets, so it becomes:

var backgrounds = [
],

2. Change the background colour to suit in the CSS

Open css/styles.css and search for the term body {. On the next line you will see the style that sets the current background colour (black):

background: black;

Change it to the colour you want, e.g.

background: #D2D2D2;

Our live preview background images

We found these images on Flickr, a good place to find great images for your website if you don't have your own. Here is a list of the backgrounds we used for the live preview, if you are interested in using them on your site.

city.jpg - Paulo Barcellos Jr. - http://en.wikipedia.org/wiki/File:New_York_City_at_night_HDR.jpg
corridor.jpg - Shane Gorski - http://www.flickr.com/photos/shanegorski/2670175525/
islands.jpg - Agustin Rafael Reyes - http://www.flickr.com/photos/agustinrafaelreyes/5473481174/
ocean.jpg - Kevin L. Cole - http://www.flickr.com/photos/kevcole/4183170759/
pier.jpg - Agustin Rafael Reyes - http://www.flickr.com/photos/agustinrafaelreyes/5227744301/
rays.jpg - Shane Gorski - http://www.flickr.com/photos/shanegorski/2688072771/
sand.jpg - Zach Dischner - http://www.flickr.com/photos/zachd1_618/4886806652/
stones.jpg - Zach Dischner - http://www.flickr.com/photos/zachd1_618/3979289262/
sunrise.jpg - Arturo Donate - http://www.flickr.com/photos/arturodonate/3362855614/
water.jpg - Horia Varlan - http://www.flickr.com/photos/horiavarlan/4785242349/
waterfall.jpg - ForestWander Nature Photography, www.ForestWander.com - http://en.wikipedia.org/wiki/File:Elakala_Waterfalls_Swirling_Pool_Mossy_Rocks.jpg

Page customisationTop

Changing the page content

Open the file you want to change the content on and search for the term class="content-inner", everything inside this div is the content of the page.

Changing the page layout

There are a few different page layouts with different transparency options to choose from.

Note box - as seen in the home page
Full width transparent - as seen in the about page
Plain with transparent header - as seen in the blog, portfolio and contact pages

To use one of these styles on one of your pages, just copy one of the above pages and rename it. Then change the content of the page as described above to suit.

Changing the page content style

In the about page we have added some example HTML that you may want to use in your content pages. To use any of these styles in any of your pages, just copy the corresponding HTML to suit and add your own content.

Portfolio customisationTop

Choosing a portfolio type

You have a choice between 5 JavaScript galleries:

Full screen gallery, with 6 layout options:
- fullscreen-2columns.html
- fullscreen-3columns.html
- fullscreen-4columns.html
- fullscreen-5columns.html
- fullscreen-6columns.html
- fullscreen-grid.html
Colorbox, with 6 layout options:
- colorbox-2columns.html
- colorbox-3columns.html
- colorbox-4columns.html
- colorbox-5columns.html
- colorbox-6columns.html
- colorbox-grid.html
Prettyphoto, with 6 layout options:
- prettyphoto-2columns.html
- prettyphoto-3columns.html
- prettyphoto-4columns.html
- prettyphoto-5columns.html
- prettyphoto-6columns.html
- prettyphoto-grid.html
Fancybox, with 6 layout options:
- fancybox-2columns.html
- fancybox-3columns.html
- fancybox-4columns.html
- fancybox-5columns.html
- fancybox-6columns.html
- fancybox-grid.html
Galleria:
- galleria.html

Each gallery have similar, but slightly different, methods of setting up and adding images. See the sections below for gallery specific help.

Full screen

You will need to create 2 sizes of image for each of the images you want to display in your portfolio, one for the thumbnail and one for the full screen size. We recommend that you make the full screen image size 1680px width by 1050px height, so that it looks great in most screen resolutions of your visitors. The full screen image is automatically resized to fit inside the browser window, so sizes smaller than this may lose quality if they are resized upwards to fit large screen resolutions. The size of the thumbnail is different for each layout option, see the list below to find your size:

2 column - 440px width by 275px height
3 column - 293px width by 183px height
4 column - 217px width by 136px height
5 column - 172px width by 108px height
6 column - 141px width by 88px height
Grid - 99px width by 62px height

You should save your thumbnail images into the folder that corresponds to your chosen layout inside images/portfolio/, for example if you are going with the 4 column layout, save all your thumbnails into images/portfolio/4column/. Save your full screen images into the folder images/portfolio/fullscreen/.

Now open the HTML file for the gallery you have chosen (e.g. fullscreen-4columns.html) and search for the term , this should take you to just before the list of images. Each portfolio item looks similar to this:

<li class="one-portfolio-item">
    <a class="portfolio-thumb-link" href="images/portfolio/fullscreen/placeholder.jpg" rel="portfolio">
        <img src="images/portfolio/4column/placeholder.png" alt="" />
    </a>
</li>

As you can see, it consists of an image surrounded by a link, the image is the thumbnail, and the link points to the full screen image. You now need to change the src="" attribute of the <img> to point to your thumbnail image. Then change the href="" of the <a> to point to the full screen image. For example, your code might look like this once you've made the change, if your thumbnail and full screen image were both called photo1.jpg:

<li class="one-portfolio-item">
    <a class="portfolio-thumb-link" href="images/portfolio/fullscreen/photo1.jpg" rel="portfolio">
        <img src="images/portfolio/4column/photo1.jpg" alt="" />
    </a>
</li>

Repeat these steps for each portfolio item you want to add. You may need to delete some placeholder images, so just delete the entire <li></li> surrounding it.

JavaScript options (optional)

The full screen gallery has a couple of options, in case you want to change them:

Key	Default	Description
speedIn	3000	Speed of the "fade in" transition between background images in milliseconds.
speedOut	3000	Speed of the "fade out" transition between background images in milliseconds.
sync	true	If true - both fade animations happen at the same time, if false - "fade in" waits for "fade out" to complete.
preload	true	Preload the background images for faster loading.
slideshow	true	Enable the slideshow functionality (play/pause button).
slideshowAuto	true	Start the slideshow automatically.
slideshowSpeed	7000	The time that each background image is displayed in the slideshow.
keyboard	true	Use the keyboard to control the background images. Left arrow = prev, right arrow = next, esc = close full screen mode.
onOpen	false	Callback that fires when the gallery opens.
onLoad	false	Callback that fires right before loading a background image.
onComplete	false	Callback that fires when the background image has finished loading (and animating).
onCleanup	false	Callback that fires when cleaning up before closing.
onClose	false	Callback that fires when the gallery closes.

You can add these to the file js/serene.js as shown below:

jQuery(document).ready(function($) {
    $('.serene-portfolio a.portfolio-thumb-link').serene({
        onOpen: $.fullscreen.unbindKeyboard,
        onClose: $.fullscreen.bindKeyboard,
        slideshow: false,
        keyboard: false 
    });
});

Note: Each option line should end in a comma except the last line.

Colorbox

You will need to create 2 sizes of image for each of the images you want to display in your portfolio, one for the thumbnail and one for the popup size. We recommend that you make the popup size have a maximum height of 500px. As a guide, our placeholder images are 800px wide by 500px high. The size of the thumbnail is different for each layout option, see the list below to find your size:

2 column - 440px width by 275px height
3 column - 293px width by 183px height
4 column - 217px width by 136px height
5 column - 172px width by 108px height
6 column - 141px width by 88px height
Grid - 99px width by 62px height

You should save your thumbnail images into the folder that corresponds to your chosen layout inside images/portfolio/, for example if you are going with the 4 column layout, save all your thumbnails into images/portfolio/4column/. Save your popup images into the folder images/portfolio/popup/.

Now open the HTML file for the gallery you have chosen (e.g. colorbox-4columns.html) and search for the term , this should take you to just before the list of images. Each portfolio item looks similar to this:

<li class="one-portfolio-item">
    <a class="portfolio-thumb-link" href="images/portfolio/popup/placeholder.jpg" rel="portfolio">
        <img src="images/portfolio/4column/placeholder.png" alt="" />
    </a>
</li>

As you can see, it consists of an image surrounded by a link, the image is the thumbnail, and the link points to the popup image. You now need to change the src="" attribute of the <img> to point to your thumbnail image. Then change the href="" of the <a> to point to the popup image. For example, your code might look like this once you've made the change, if your thumbnail and popup image were both called photo1.jpg:

<li class="one-portfolio-item">
    <a class="portfolio-thumb-link" href="images/portfolio/popup/photo1.jpg" rel="portfolio">
        <img src="images/portfolio/4column/photo1.jpg" alt="" />
    </a>
</li>

Repeat these steps for each portfolio item you want to add. You may need to delete some placeholder images, so just delete the entire <li></li> surrounding it.

JavaScript options (optional)

The Colorbox gallery has a lot of options, you can find out more from the Colorbox website. The file you need to add any options to is js/colorbox.js

Fancybox

2 column - 440px width by 275px height
3 column - 293px width by 183px height
4 column - 217px width by 136px height
5 column - 172px width by 108px height
6 column - 141px width by 88px height
Grid - 99px width by 62px height

You should save your thumbnail images into the folder that corresponds to your chosen layout inside images/portfolio/, for example if you are going with the 4 column layout, save all your thumbnails into images/portfolio/4column/. Save your popup images into the folder images/portfolio/popup/.

Now open the HTML file for the gallery you have chosen (e.g. fancybox-4columns.html) and search for the term , this should take you to just before the list of images. Each portfolio item looks similar to this:

<li class="one-portfolio-item">
    <a class="portfolio-thumb-link" href="images/portfolio/popup/placeholder.jpg" rel="portfolio">
        <img src="images/portfolio/4column/placeholder.png" alt="" />
    </a>
</li>

<li class="one-portfolio-item">
    <a class="portfolio-thumb-link" href="images/portfolio/popup/photo1.jpg" rel="portfolio">
        <img src="images/portfolio/4column/photo1.jpg" alt="" />
    </a>
</li>

Repeat these steps for each portfolio item you want to add. You may need to delete some placeholder images, so just delete the entire <li></li> surrounding it.

JavaScript options (optional)

The Fancybox gallery has a lot of options, you can find out more from the Fancybox website. The file you need to add any options to is js/fancybox.js

Prettyphoto

2 column - 440px width by 275px height
3 column - 293px width by 183px height
4 column - 217px width by 136px height
5 column - 172px width by 108px height
6 column - 141px width by 88px height
Grid - 99px width by 62px height

You should save your thumbnail images into the folder that corresponds to your chosen layout inside images/portfolio/, for example if you are going with the 4 column layout, save all your thumbnails into images/portfolio/4column/. Save your popup images into the folder images/portfolio/popup/.

Now open the HTML file for the gallery you have chosen (e.g. prettyphoto-4columns.html) and search for the term , this should take you to just before the list of images. Each portfolio item looks similar to this:

<li class="one-portfolio-item">
    <a class="portfolio-thumb-link" href="images/portfolio/popup/placeholder.jpg" rel="prettyPhoto[portfolio]">
        <img src="images/portfolio/4column/placeholder.png" alt="" />
    </a>
</li>

<li class="one-portfolio-item">
    <a class="portfolio-thumb-link" href="images/portfolio/popup/photo1.jpg" rel="prettyPhoto[portfolio]">
        <img src="images/portfolio/4column/photo1.jpg" alt="" />
    </a>
</li>

Repeat these steps for each portfolio item you want to add. You may need to delete some placeholder images, so just delete the entire <li></li> surrounding it.

JavaScript options (optional)

The Prettyphoto gallery has a lot of options, you can find out more from the Prettyphoto website. The file you need to add any options to is js/prettyphoto.js

Galleria

You will need to create 2 sizes of image for each of the images you want to display in your portfolio, one for the thumbnail and one for the popup size. We recommend that you make the popup size have a maximum height of 500px. As a guide, our placeholder images are 800px wide by 500px high. The thumbnails are generated by The size of the thumbnail is changed by the galleria code when it's run, however we used a thumbnail size of 99px width by 62px height which works fine.

You should save your thumbnail images into the folder images/portfolio/grid. Save your popup images into the folder images/portfolio/popup/.

Now open the HTML file for the Galleria, galleria.html and search for the term , this should take you to just before the list of images. Each portfolio item looks similar to this:

<li class="one-portfolio-item">
    <a class="portfolio-thumb-link" href="images/portfolio/popup/placeholder.jpg" rel="portfolio">
        <img src="images/portfolio/grid/placeholder.png" alt="" />
    </a>
</li>

<li class="one-portfolio-item">
    <a class="portfolio-thumb-link" href="images/portfolio/popup/photo1.jpg" rel="portfolio">
        <img src="images/portfolio/4column/photo1.jpg" alt="" />
    </a>
</li>

Repeat these steps for each portfolio item you want to add. You may need to delete some placeholder images, so just delete the entire <li></li> surrounding it.

JavaScript options (optional)

The Galleria gallery has a lot of options, you can find out more from the Galleria website. The file you need to add any options to is js/galleria.js

Contact customisationTop

Contact form installation

The contact form is an iPhorm, which is one of our CodeCanyon items that we sell separately. The documentation for the iPhorm is in the documentation/form-documentation folder, there is also a link to it at the bottom of this section.

To set up the form the only step you need to do is Step 4 of the form installation guide which is to change the form to send enquiries to your email address. I've copied these instructions below.

4. Configure the contact form to send enquiries to your email address

To configure the contact form, open contact-form/config.php and on line 19 you will find the current email address that will be receiving the enquiries. Change that to your email address as shown below.

$recipients = array(
    'spam@freerangewebdesign.com'
);

becomes

$recipients = array(
    'your@emailaddress.com'
);

While you are in contact-form/config.php you can also change the success message if you wish, which is displayed when the form is successfully submitted. The code for that is on line 6.

To customise the form further or for form troubleshooting, see the form help.

Customising the contact form

To customise the form further or for form troubleshooting, see the form help.

Form field toggle values

The theme uses the Toggleval jQuery plugin, which is configured to set the value of the form element to the text inside the <label> tag for that field and the labels are hidden using CSS. If you do add another form field as described in the form help, you can add this behaviour to your new field by adding the class hide-js to the <label> and by adding the class toggle-val to the actual form element (input, textarea etc).

Changing the contact information

In contact.html, search for the term , you will find the code for the phone number information and on the lines below that, you should find the code for the fax number, email address and address.

Changing the map

In contact.html, search for the term , you will find the code for the map image and the link surrounding it. You can create your own map image, and either save it in images/mapexample.png or change the src="" attribute to point to your map image. The current map is 395px width by 254px height You could also add in a link to your map on Google Maps for example by changing the href="" of the link to point to your Google Map link.

Ajax version customisationTop

General guidelines

There are a couple of differences to be aware of when using the Ajax version compared to the standard version.

You should use the file index.ajax.html and rename it to index.html.

The JavaScript file you should be making any changes to is js/scripts.ajax.js.

The only layout you need to change is in index.html, you don't need to copy any changes you make to that file to other files.

The Ajax version still uses the standard version of the other files such as about.html but it only takes the content areas from them. So you only need to change the content areas of these other files.

If you need to have links to other Ajax pages in the content areas of an Ajax page, you should add the class ajax-link to the <a> tag e.g.:

<a class="ajax-link" href="blog-article.html">Read More</a>

When any pages are loaded through Ajax, only any content inside a div with the class content-inner is actually shown from that page.

Adding your own JavaScript

If you need to add your own JavaScript to one of the Ajax pages, the process differs from normal. You should add any external JavaScript files to the top of index.html. You will not be able to use the standard $(document).ready(); since this event is not fired when a page is loaded through Ajax. We have added an ajax callback inside js/scripts.ajax.js which is a function to simulate $(document).ready();. If you search for the term var ajaxCallback you will find the start of this function. Add any JavaScript you need in there, this function is executed for every page loaded via Ajax (including the index page).

Third party scriptsTop

Third party scripts

TroubleshootingTop

Background shows a black screen

Most likely the background image does not exist, check the path to the image in scripts.js and check that it exists on the server.

Poor background animation performance

Old browsers may not be able to handle the animation between background images at the default settings. You can change the JavaScript options (in js/scripts.js near the top) to be more forgiving as shown below.

backgroundOptions = {
    speedOut: 0,
    sync: false
},

The options make it so that when you click next or prev, it hides the current background instantly and then starts fading in the next background, instead of fading in and out both images at the same.

Further supportTop

For additional help you may contact us using the form on our ThemeForest profile page. If you would like us to customise your form for you, we will be happy to do this at our hourly rate of £30 per hour. Contact us if you would like to hire us!

Created	29th March 2011
Version	1.2 (25th August 2011)
Author	ThemeCatcher.net
Contact us	via ThemeForest

Table of contents

Getting startedTop

HTML files

CSS files

JavaScript files

Adding your own JavaScript

PSD files

Ajax version

Fonts

Global customisationTop

Changing the logo

Changing the navigation

Changing the footer information

Adding your social networking links

Removing a link

Adding a link

Adding your Twitter feed

Changing the colour scheme

Making the header fixed position

Changing the text inside the search box

Changing the map button text

Background customisationTop

Adding background images

Background script options

Random background images

Disable the slideshow

Disable keyboard navigation

Set background transition to Storm v1.0 effect

Different default background per page

Different backgrounds per page

Using a solid background colour instead of background images

1. Remove all images from the list of images in scripts.js

2. Change the background colour to suit in the CSS

Our live preview background images

Page customisationTop

Changing the page content

Changing the page layout

Changing the page content style

Portfolio customisationTop

Choosing a portfolio type

Full screen

JavaScript options (optional)

Colorbox

JavaScript options (optional)

Fancybox

JavaScript options (optional)

Prettyphoto

JavaScript options (optional)

Galleria

JavaScript options (optional)

Contact customisationTop

Contact form installation

4. Configure the contact form to send enquiries to your email address

Customising the contact form

Form field toggle values

Changing the contact information

Changing the map

Ajax version customisationTop

General guidelines

Adding your own JavaScript

Third party scriptsTop

Third party scripts

TroubleshootingTop

Background shows a black screen

Poor background animation performance

Further supportTop