Adding pages

To create a new page, you need to add an item to the menu and a new div for your page contents.

Adding menu item

First find the unordered list which contains the current menu items.

<ul id="menu"> ...list items here... </ul>

Add a new li within the ul with the following format:

<li><a href="#" title="Show the New layer" name="new">New</a></li>

The most important thing here is the name attribute, you'll need to use this when creating your page.

Adding a page

In this case you only have to create a new div rather than a new HTML file.

Inside the content div, add a new div with the following format:

<div id="new" class="page"> </div><!-- /new page -->

Remember the name attribute we gave the new anchor tag? It must match the id of our new div for the JavaScript to work. In this case, both were called 'new'.

Adding new colours to the swatch palette

Find the colours div and add an anchor tag with a href value (This must be a valid hex code with the preceeding #).

Note: The JavaScript/CSS will take care of everything else.

<a href="#111111"></a>

Adding new patterns to the swatch palette

Find the patterns div and add an anchor tag with a href value (This must be a direct link to a .jpg/.png/.gif).

Note: The JavaScript/CSS will take care of everything else.

<a href="images/patterns/new-pattern.jpg"></a>

Changing details of the contact form

Details such as sender, send to address, subject etc... can all be customised within contact.php. The code in there is well commented and easy to change.

Removing/adding the ability to drag elements

Open up js/global.js and go to line 6:

$('#window, #toolbar, #layers, #swatches').draggable();

Simply add or remove elements inside the single quotes to add/remove the ability to drag elements.

Changing error messages that are alerted when trying to submit the contact form

Error message

Open up js/global.js and go to line 124:

alert('Please fill in all the fields');

Just change value between the single quotes

Success message

Open up js/global.js and go to line 152:

alert('Thank you! You form has been sent.');

Just change value between the single quotes

Adding pieces of work to the portfolio

This gallery comprises of thumbnails and full images. Place the initial full image you want to display in #portfolio #loader.

<div id="portfolio" class="page"> <div class="left-column" id="loader"> <img src="images/portfolio/port1.jpg" width="450" height="510"/> </div><!-- /left-column -->

Then in #portfolio #right-column add your thumbnail with a link to the full image.

<div class="right-column"> <a href="images/portfolio/port1.jpg"><img src="images/portfolio/port1-thumb.jpg" width="195" height="50"/></a>

Changing initial positions of the palettes

You will need to adjust the position properties of #toolbar, #swatches and #window in styles.css

Adding/changing social media icons

The icons can be found here if you require some of the same style, they are my creation and you are free to use them for personal and commercial use.

To add icons to is, resize them to 22px by 22px and add them with an anchor tag into the #social div.

<div id="social"> <a href="#"><img src="images/icons/digg.png" width="22" height="22" /></a>

Resources

Please use the following resouces for expanding and understanding the basic funtionality of the jQuery plugins used: