To create a new page, you need to add an item to the menu and a new div
for your page contents.
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.
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'.
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>
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>
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.
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.
Open up js/global.js
and go to line 124:
alert('Please fill in all the fields');
Just change value between the single quotes
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
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>
You will need to adjust the position properties of #toolbar, #swatches and #window in styles.css
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>
Please use the following resouces for expanding and understanding the basic funtionality of the jQuery plugins used: