Template version: 2.0
Created: May 20th, 2012
Thank you for downloading this template.
This template is released under a Creative Commons Attribution 3.0 Licence. This means you are free to download and use it for personal and commercial projects. However, you must leave the 'design from css3templates.co.uk' link in the footer of the template.
If you have any questions that are beyond the scope of this help file, please feel free to contact me via my website. Thank you!
This theme is a fixed layout with two columns (apart from the image gallery pages, which have a different html structure - you can see additional information for the gallery pages here). The left content is contained within a div with an id of "left_content" and the right content is contained within a div with an id of "right_content". Here is the general two column structure.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Header Metatags -->
<!-- Main Stylesheet / Light Theme -->
<!-- Modernizr JS Enables HTML5 Elements -->
</head>
<body>
<div id="main">
<!-- begin header -->
<header>
<div id="logo"><h1></h1></div>
<nav>
<!-- menu -->
</nav>
</header>
<!-- end header -->
<!-- begin content -->
<div id="site_content">
<div class="left_content"></div>
<div class="right_content"></div>
</div>
<!-- end content -->
<!-- begin footer -->
<footer></footer>
<!-- end footer -->
</div>
<!-- jQuery with plugins -->
<script type="text/javascript">
$(document).ready(function(){
<!-- initialise sooperfish menu -->
$('ul.sf-menu').sooperfish();
});
</script>
</html>
</body>
There are several stylesheets used in this theme, depending on the page being viewed. The stylesheets are:
There are 2 fonts used in this theme. The fonts are Jenna Sue and News Cycle. The font files are
This theme imports several Javascript files, depending on the page.
There are no PSD files with this theme, as the theme was hand-coded from scratch!
I've used the following images, icons or other files as listed.
There are three different styles of gallery pages with this template:
The first style, shown on the home page, is simply an image fader with transparent caption. The format for this image fader is shown below:
<li><img width="950" height="450" src="images/image_name.jpg" alt="'You can put a description of the image here if you like, or anything else if you want.'" /></li>
To add an image to the image fader simply add a new list item (li) to the unordered list (ul) with class="slideshow". You need to specify the width of the image, the height of the image and the src. If you would like a caption to slide in, simply add alt="caption". If you would like the image to hyperlink to one of your portfolio pages, simply add an <a></a> around the <img> tag .
NOTE: Remember to put 'class="show"' on the first <li> in the list, so that the image fader knows which one to start with.
The second style, shown on the portfolio_one page, uses the Galleriffic jQuery plugin for 'rendering rich, fast-performing photo galleries'. It is quite simple to set-up your Galleriffic gallery: To add an image to the gallery simply resize your main image (450px x 450px) and create a thumbnail for this image (75px x 75px). Then add the following list item (li) into the unordered list (ul) with class="thumbs noscript":
<li>
<a class="thumb" href="images/portfolio_one/main_image.jpg"><img src="images/portfolio_one/main_image_thumbnail.jpg" alt="one" /></a>
<div class="caption">
<div class="image-title portfolio_one">"Image caption goes here"</div>
</div>
</li>
where href equals your main image (450px x 450px) and img src equals your thumbnail image. Within the img tag, you should put an 'alt' for your image. If you want a caption for your image, simply include the 'div class="caption"' section and add your image caption within the "Image caption goes here" part.
NOTE: There are lots of settings for the Galleriffic Photo Viewer. These settings are passed in when the galleriffic gallery is initialised (within the portfolio_one.html). The settings are optimised for the portfolio_one gallery, but can be changed if required. A description for these settings can be seen here.
The third style, shown on the portfolio_two page, uses the Galleriffic jQuery plugin for 'rendering rich, fast-performing photo galleries'. It is quite simple to set-up your Galleriffic gallery: To add an image to the gallery simply resize your main image (950px x 450px) and create a thumbnail for this image (75px x 75px). Then add the following list item (li) into the unordered list (ul) with class="thumbs noscript":
<li>
<a class="thumb" href="images/portfolio_one/main_image.jpg"><img src="images/portfolio_one/main_image_thumbnail.jpg" alt="one" /></a>
<div class="caption">
<div class="image-title portfolio_two">"Image caption goes here"</div>
</div>
</li>
where href equals your main image (950px x 450px) and img src equals your thumbnail image. Within the img tag, you should put an 'alt' for your image. If you want a caption for your image, simply include the 'div class="caption"' section and add your image caption within the "Image caption goes here" part.
NOTE: There are lots of settings for the Galleriffic Photo Viewer. These settings are passed in when the galleriffic gallery is initialised (within the portfolio_two.html). The settings are optimised for the portfolio_two gallery, but can be changed if required. A description for these settings can be seen here.
Once again, thank you for downloading this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.