Storm documentation by ThemeCatcher.net
Storm

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

Thank you for purchasing Storm. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form here. Thanks so much!

# Table of contents

# 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 <!--Logo--> 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 <!--Horizontal Menu-->. 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 <!--Footers Left Column-->. 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 in`js/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 <!-- Non-JavaScript background --> 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 <!--Portfolio content-->, 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 <!--Portfolio content-->, 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

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. fancybox-4columns.html) and search for the term <!--Portfolio content-->, 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 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

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. prettyphoto-4columns.html) and search for the term <!--Portfolio content-->, 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>

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="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 <!--Portfolio content-->, 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>

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 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 <!--Phone Number-->, 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 <!--Map-->, 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

- jQuery JavaScript library
- Colorbox
- Fancybox
- Galleria
- Prettyphoto
- jQuery Cookie
- HoverIntent
- Superfish
- Cufon
- Toggleval
- jQuery BBQ
- jQuery hashchange event

# 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!