# Camelus - nature tones template

Theme documentation & reference by rvision. Created on 06 Mar 2011

##

##### Thank You!

Thank you for purchasing Camelus - nature tones template.

Please read documentation before sending any requests, since this file has all the information needed to help you to customize your template.

If you have any questions that are beyond the scope of this help file, please use a contact form on my profile page to contact me. If you are happy with the theme, please take a moment to rate it on the ThemeForest website.

## A) Theme overview top ↑

This design is good choice for an eco, environmental, recycling, non profits, grassroots, organizations, etc. or nature business website. But it can easily be modified to reflect any genre. Some buyers used this theme for festivals, medicine-related websites, science websites, etc.

#### Features:

- Valid HTML5
- 7 Skins, 20+ pages
- Tested in IE7/IE8, Firefox 2/3, Safari, Chrome, Opera
- Multi-level menu navigation
- Homepage has a feature block with custom jQuery slideshow
- Contact page, newsletter signup - Ajax form submit and client-side validation with jquery.validate plugin
- 6 Portfolio variations, custom portfolio filtering animations
- 2 Pricing pages
- FAQ animated page
- Custom grid system, based on a 960.gs grid system (12 columns)

#### Versions

Theme comes in 2 versions: PHP version and HTML version. If you have the option to choose which one, go for the PHP version.

#### Automatic update notifications

This documentation file also has a update notifier script which checks your theme version with a latest version on the theme on themeforest. If a newer version of the theme is available, it will show you the download link and changes made so you can download an updated version.

##### Note

The .php version of the theme makes use of the `include` function which allows for easy management of the content that does not vary from page to page. For example, rather than changing some of the content of the menu in every single page, you simply open menu include file (`#top.htm`) and edit the HTML within. The changes will be reflected throughout the website.
If your hosting provider supports php files (most of them does), I highly reccommend using the php version of this theme.

#### PHP version performance

Theme includes a php version with optimized performance: all CSS is served in a single request, same goes for Javascript. This is making your site perform better for the end user and is possible using a simple include statements and including needed css files or scripts. This way, page renders faster for the end user but stays flexible for the changes since the files are separated on the server. PHP pages which server those combined versions are called `index.php` and they are in respective folders: `/style/skinX/index.php` and `/script/index.php`. CSS version has a minifier included, so it's size will be reduced even more.

## B) HTML Structure top ↑

#### HTML Theme version

HTML version of this theme is located in folder named '1 HTML version'.

#### Code

This theme uses latest HTML5 tags and structure with tableless design. All code is properly indented to make it easier to read and edit. There are also comment markers as a guides to find the beginning and end of major sections such as the header, slider, content and footer. Each of these sections is labeled with the appropriate tags and has a corresponding tag of the main element for that section.

#### 12 columns Grid system

Theme is a multi-column, fixed width template developed with a grid system based on popular 960 grid system, but with a few improvements (containers, different padding, etc.). The grid columns syntax is the same (`grid_1, grid_2... grid_12`).. So if you want to make a column that is 1/3 width, you'll add it a css class of `grid_4`, since 4 is 1/3 of the 12 (total columns). Please see the example grid demo page for various combinations.

#### The general page skeleton:

Every page has the following structure:

    <html>
    <head>
    	<css styles... />
    	<javascripts... />
    </head>
    <header class="container_12">
    	<div id="logo">
    		logo image...
    	</div>
    	<div id="search">
    		search box...
    	</div>
    	<nav class="top">
    		top-right small navigation...
    	</nav>
    </header>
    <nav class="main container_12">
    	main navigation multilevel menu...
    </nav>

    page specific content, for example:
    <section id="layout" class="v1 container_12 clearfix">

    secondary content, for example
    <section class="portfolio secondary container_12 clearfix">

    <footer class="container_12 clearfix">
    	footer...
    </footer>

#### Theme images

Logo, avatars, social icons, team member icons and big demo images are located in the `/images/` subfolder

#### PHP Theme version

PHP version of this theme is located in folder named '2 PHP version'.

Each page has couple of include files, but most important are: `#top.htm` and `#bottom.htm`. Top file has the header, javascript and css linking tags and navigation. Bottom file has footer and credits element. Structure of each page php file is like this:

    <?php include("#top.htm");?>
    ...
    -- page content here --
    ...
    <?php include("#bottom.htm"); ?>

#### Page titles

To modify each page title in PHP version, set the name of the `$title` variable on the top of the page to the desired title. Example:

    <?php $title="Portfolio 3" ?>

## C) CSS Stylestop ↑

All css files are in `/style/skinX/` subfolder for each skin version of the theme. To use a specific skin, change the path - for example:

    <link href="style/skin1/" rel="stylesheet" media="all,screen" />

will set `skin1`styles in PHP version of the theme. In the HTML version, all stylesheets are separate files:

    <link href="style/skin1/reset.css" rel="stylesheet" media="all,screen" />
    <link href="style/skin1/grid.css" rel="stylesheet" media="all,screen" />
    <link href="style/skin1/baseline.css" rel="stylesheet" media="all,screen" />
    <link href="style/skin1/jquery.fancybox-1.3.4.css" rel="stylesheet" media="all,screen" />
    <link href="style/skin1/styles.css" rel="stylesheet" media="all,screen" />

#### CSS files explanation

- `reset.css` - CSS reset file ,based on YUI reset file and HTML5 reset file with additional reset rules
- `grid.css` - grid system CSS rules
- `baseline.css` - baseline styles: typography and styling for all HTML elements
- `jquery.fancybox-1.3.4.css` - fancybox (lightbox clone) styles
- `IE.css` - internet explorer specific stylesheet; this is loaded in IE browsers only
- `styles.css` - main styles file; all CSS for each skin is in this file. Make your modifications here

If you would like to edit a specific section of the site, find the appropriate element in the CSS file and appropriate style that needs to be edited. Code is indented & commented - all child elements are nested, so it is very easy to find what you need to change.

#### Grid and columns

Note there are some css classes/elements which define general styling and grid. Those are: `.container_12` - 12 columns grid container; in nested subcontainers this can be from 1-11 (`.container_6`, for example, is 1/2 of the full width) `.clearfix` - global utility class to clear the floated elements (columns) in the grid. Class `.secondary` - is for secondary content (the content with top gradient).

Design allows modular structure, so you can make use any element from the any page and add it to the combined page. For example, you can insert any `<section>` element after main navigation (`<nav class="main container_12">`) or before footer (`<footer class="container_12 clearfix">`) and it will be displayed as a part of the design. As the theme has a bunch of pre-designed layouts, you can freely use section from one page and add it to the other to suit your needs. To make custom layouts, make a `<section>` element with `.container_12` and `.clearfix` classes and you're good to go. For example (fictional product layout):

    <section id="product" class="container_12 clearfix">
    	...product html
    </section>

#### Sidebar

Some pages have sidebar - it's defined as `<aside>` element with 1/3 width of the layout (css class `'grid_4'`). It's ID is `'sidebar'` and css class changes for each page. Example: `<aside id="sidebar" class="about">`

#### Specific CSS stylings

- `.box` - to add a lightbox to the image; this link points to the bigger version. Add rel attribute to group images.
- `.icon` - add to headings to display the icon images to the left. Example: `<h2 class="icon recycle">``Headline``</h2>` or `<h2 class="icon globe">Headline</h2>`
- `.thumblist` - list with thumbnail images and text on the right
- `ul.red` - colored imageless bullet lists (also ul.blue, ul.green)

All other styling is commented in the css files for further reference. Please see demo pages for specific styles.

##### Note

To make your customizations easily, I highly recommend you Firebug - a Firefox add-on. For more information please see this example, this one, or this one. Read more about about Firebug's css tab on official website and be sure to check out the FireDiff extension. Be sure to use it in the HTML version, since PHP version has combined files and inspect element menu option won't show proper position of the code.

#### Skin images

All skin images are in `/img/` subfolder of each skin. There is a naming convention for images (with prefixes), to make changes easily:

##### backgrounds:

    bg-body.png
    bg-footer.png
    bg-nav.png
    bg-nav-active.png
    bg-nav-over.png
    bg-quote.png
    bg-secondary.png

##### icons:

    ico-accept.gif
    ico-accept_male_user.png
    ico-chart_up.png
    ico-globe.png
    ico-megaphone.png
    ico-recycle.png
    ico-refresh.png
    ico-zoom.png

##### other images:

    action-button.png
    arrows-ffffff.png
    buttons.png
    pricing-ribbon.png

#### Images

All illustrative theme images (photos) were stripped from the final download in order to reduce the size of the download. However, you don't need to guess the sizes of each image for any layout - images are named according to their sizes. For example, image named `248x144b.jpg` is 248 pixels wide and 144 pixels tall.

## D) JavaScripts top ↑

##### Note

Unless you are familiar with jQuery and JavaScript, I strongly advise you not to play around with these files.

#### Scripts location

All theme scripts are located in the`/script/` subfolder of the theme.

#### jQuery Framework

The theme makes use of various JavaScripts and the jQuery framework to add dynamic functionality. Scripts used are:

- `jquery.min.js` - jquery library
- `jquery.rotator.js` - rotator plugin (slider on the homepage, used also on the about page for testimonials example)
- `jquery.fancybox-1.3.4.pack.js` - fancybox (lightbox clone)
- `jquery.validate.pack.js` - client validation plugin that validates contact form and newsletter form
- `jquery.faq.min.js` - animated FAQ plugin
- `jquery.twitter.js` - twitter plugin to display tweets in the footer
- `jquery.transform.min.js` - 2d transformations jquery library which enables animations like scaling etc.
- `cufon-yui.js` - font replacement library
- `Aller_400-Aller_700.font.js` - Aller font (normal and bold variants) converted for Cufon usage
- `main.js` - theme custom scripts which call all of the above libraries/plugins. If you need to change behaviour (slider speed, twitter username, etc.) this is a file where to do it.

#### Portfolio filtering

Portfolio list items have css classes which defines their category:

    <ul id="portfolio">
    	...
    	<li class="advertising">
    	...
    </ul>

The filter links have those categories set as `rel`attribute:

    <ul id="filter">
    	<li>
                    ...
    		<a rel="advertising" href="javascript:void(null);">Advertising</a>
                    ...
    	</li>
    </ul>

Theme Javascript automatically connects filter buttons to categories and show/hide them as needed. Leave `rel` attribute empty to get filtering removed ('All').

## E) Form(s) Configurationtop ↑

#### Form submitting

jQuery is used to submit contact form without page refresh (AJAX), and message is sent to the `form-submit.php` file. To change target email where message is sent: open `form-submit.php` located in the theme folder and change email to your email address at the top of the file:

    define("WEBMASTER_EMAIL", 'myemail@domain.com');

Both forms (contact page and newsletter subscription form) are handled via AJAX. In case when user has the JavaScript turned off (less than 5% of users), submission will fallback to non-ajax form submission.

#### Feedback messages

The response from the server is displayed on 2 custom feedback pages. Edit those pages to customize feedback when user submits the forms:

    newsletter-feedback.php
    contact-feedback.php

To change ajax response messages, edit these pages normally and note that there is a specific div:

    <div id="feedback">...</div>

The content of this div will be displayed as a feedback message when AJAX form sending takes place.

#### Client validation

Form also features client-side validation and it won't be submitted if any of the fields are empty or email address is in wrong format. This is possible with `jquery.validate plugin`. Validation is done through css markup classes added to form elements. All elements have `required` css class, and email field has `email` css class. These css classes don't change the layout at all, they are used to instruct validation plugin types of fields. If you want to make any of the fields optional, simply remove 'required' css class.

## F) PSD Filestop ↑

All graphics were designed and exported with latest version of Adobe® Photoshop. In the PSD files, page elements which are saved as CSS sprites are placed into main file as smart objects. Best way to customize them is to double-click smart object layer, edit the element and save the changes with export for web option.

#### PSD Files

There are 3 PSD files, 1 per each basic color scheme:

- Camelus - HomePage C1.psd
- Camelus - HomePage C2.psd
- Camelus - HomePage C3.psd

## G) How to...?top ↑

How to change logo?
  Locate company logo block at the top of the page (or `#top.htm` file if you're using php version) and change the path of the image tag:

      <!-- company logo -->
      <div id="logo">
      	<a href="index.php" title="CompanyName.com">
      		<img src="images/logo.png" title="CompanyName.com" />
      	</a>
      </div>
      <!-- / company logo -->

How to change background image?
  Each skin has it's own `/img/` folder inside. Replace file `bg-body.png` with a new image for the background.
How to edit menu items?
  Menu items are located in the `<ul id="nav">` element at the top of the page and are represented as a nested unordered list. Find menu item and change it's name and path. To add submenu items, edit the nested unordered list of the top menu element. To display menu item as a current page, add css class `active` to the menu item link.

## H) Something's not working, what should I do?top ↑

#### Don't panic: it's probably a minor issue.

Although every effort has been made to ensure the theme is bug free and as easy to use as possible there is always the chance that I missed something. If you do find a problem please contact me through my profile contact form and we'll sort it out.

## I) Sources and Creditstop ↑

- Heading fonts are replaced with Cufon font replacement technique. Font used for all heading titles is Aller.
- Projects and porftolio pages have a fancybox - a lightbox clone.
- Illustration icons are by Dryicons and social media icons are by jwloh.
- jQuery 2d Transform plugin by Grady Kuhnline
- jQuery validation plugin by Jörn Zaefferer

## J) Changelogtop ↑

- `15 December 2009` : Initial version
- `28 March 2010`: v1.1: added php version and two more pages
- `8 March 2011`: v2.0 HTML5 conversion, bunch of new pages

Once again, thank you so much for purchasing 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. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

### Rvision