# “PhotoArtWork_bokeh” Template Documentation

Template version: 2.0
Created: February 16th, 2013

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!

## Table of Contents

1. HTML Structure
2. CSS Files and Structure
3. Fonts
4. JavaScript
5. PSD Files
6. Sources and Credits
7. Gallery Pages

### A) HTML Structure - top

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 / Dark 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>

### B) CSS Files and Structure - top

There are several stylesheets used in this theme, depending on the page being viewed. The stylesheets are:

1. css/style.css
2. css/portfolio_one.css OR css/portfolio_two.css
3. css/dark.css

1. style.css is the main stylesheet and is included in all pages. It contains all the structural stylings for the template.
2. portfolio_one.css contains all the styling for the gallerific portfolio shown on the portfolio_one.html page.
3. portfolio_two.css contains all the styling for the gallerific portfolio shown on the portfolio_two.html page.
4. dark.css is the dark theme stylesheet and contains all the styling for the dark theme.

### C) Fonts - top

There is 2 fonts used in this theme. The fonts are Yanone Kaffeesatz and News Cycle. The font files are

1. fonts/YanoneKaffeesatz-Regular.ttf
2. fonts/YanoneKaffeesatz-Regular.eot (IE Specific)
3. fonts/NewsCycle-Regular.ttf
4. fonts/NewsCycle-Regular.eot (IE Specific)

### D) JavaScript - top

This theme imports several Javascript files, depending on the page.

1. js/modernizr-1.5.min.js
2. js/jquery.min.js
3. js/jquery.easing-sooper.js
4. js/jquery.sooperfish.js
5. js/image_fade.js
6. js/jquery.galleriffic.js
7. js/jquery.opacityrollover.js

1. modernizr is a Javascript library that enables HTML5 elements and feature detects.
2. jQuery is a Javascript library containing lots of commonly used Javascript functions.
3. Easing sooper is a jQuery plugin for easing transitions, optimised for the Sooperfish drop-down menu.
4. Sooperfish is a jQuery plugin for the drop-down menu.
5. Image fade contains the functions for the gallery image fader on the home page (index.html).
6. Galleriffic is a jQuery plugin for rendering the photo galleries on the portfolio pages (portfolio_one.html and portfolio_two.html).
7. Opacity rollover is a jQuery plugin used by the the Galleriffic plugin.

### E) PSD Files - top

There are no PSD files with this theme, as the theme was hand-coded from scratch!

### F) Sources and Credits - top

I've used the following images, icons or other files as listed.

- modernizr (MIT and BSD licenses)
- jQuery (MIT and GPL licenses)
- jQuery easing sooper (BSD license)
- Sooperfish (GPL license)
- Galleriffic (MIT license)
- Photos taken by me
- jQuery Opacity Rollover (MIT license)

### G) Gallery Pages - top

There are three different styles of gallery pages with this template:

1. Image Fader with Caption (index.html)

   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.

2. Galleriffic Two Column Gallery (portfolio_one.html)

   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.

3. Galleriffic One Column Gallery (portfolio_two.html)

   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.

Go To Table of Contents