#### "Zeences HTML" Documentation by "elemis"

Created: 07/09/2011
By: elemis
Email: Contact form
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to send us an email using the contact form on our profile page here. If you wish to hire us for customizations we can help you for extra.

### Customization

## Full Screen Background Images

To add your fullscreen images edit the image paths of following lines in the html files:

You can add more images or remove them if you have less or more than 6 images.

To change the background image rotating settings open style/js/scripts.js. You can edit the highlighted lines:

## Content Background Opacity

You can change the background opacity through style/js/scripts.js line 62:

In the above example background color opacity is 80%. You can increase or decrease the value .80 as you need.

## Colors

There are 5 color options available:

- Blue: blue.css
- Green: green.css
- Lime: lime.css
- Purple: purple.css
- Red: red.css

You will need to state which color you will use inside every html file. The default color of the theme files is "red" (as seen in the example below). If you want to change it to other available color options you will need to change the highlighted part with one of the available colors.

## Fonts

There are 13 font options available for headings:

- Adelle: adelle.css
- Arvo: arvo.css
- Carto: carto.css
- Classic: classic.css
- Copse: copse.css
- Delicious: delicious.css
- Mido: mido.css
- Museo: museo.css
- Otari: otari.css
- Puritan: puritan.css
- Quicksand: quicksand.css
- Titillium: titillium.css
- Vegur: vegur.css

You will need to state which font you want to use inside every html file. The default font is "museo" (as seen in the example below). If you want to change with another available font option you will need to change the highlighted part with the new font name.

## Editing Menu

Below you can see a menu example:

    <div id="menu" class="menu opacity">
    		<ul>
    			<li><a href="#" class="active">1. Item</a></li>

    			<li><a href="#">2. Item</a>
    				<ul>
    					<li><a href="#">2.1 Item</a></li>
    					<li><a href="#">2.2 Item</a>

    						<ul>
    							<li><a href="#">2.2.1 Item</a></li>
    							<li><a href="#">2.2.2 Item</a></li>

    							<li><a href="#">2.2.3 Item</a>
    								<ul>
    									<li><a href="#">2.2.3.1 Item</a></li>
    									<li><a href="#">2.2.3.2 Item</a></li>

    								</ul>
    							</li>
    						</ul>
    					</li>
    				</ul>
    			</li>

    		</ul>
    	</div>
    </div>

## HTML elements and Carousel

- Buttons, Information Boxes and Images: Buttons, images and information boxes are inside button-boxes-images.html
- Typography: Lists, blockquote, dropcap, highlight and other typographic styles are inside typography.html
- Tab, Toggle and Tables: Tabs, toggle and table examples are inside tab-toggle-table.html
- Tables: Table and pricing table examples are inside tables.html
- Testimonials: Testimonial style examples are inside testimonials.html
- Columns: Available column layouts are inside columns.html
- Carousel: You can see the carousel example in index files and portfolio-post.html. Note that image size must be 164x130px

### Sliders

## Awkward Slider

In the theme package index3.html and index4.html include Awkward Slider. Image size must be 900x400px. Basic usage of the slider is as follows:

You can change the slider settings by editing the script in the html files:

### Portfolio

## Editing Portfolio

Basic usage of the portfolio is as follows:

The important parts are highlighted above.

You can add any number of categories and change their names in the filtering-nav.

You can use details, zoom or play as overlay icons when hovered over the thumbnails.

If you would like to make the images open up with lightbox make sure you have rel="prettyPhoto" attribute in your a tags.

portfolio.html in the theme package is 5 columns. But you can change it as 4 or 3 columns by editing the col5 class in the div tags as col4 or col3.

If you are using 5 columns then the thumbnail image with must be 164px. Height can be any value.

If you are using 4 columns then the thumbnail image with must be 210px. Height can be any value.

If you are using 3 columns then the thumbnail image with must be 288px. Height can be any value.

### Contact

## Receiving messages

To receive the messages sent through the contact form in contact.html or in the footer area, open up contact/form-handler.php and edit line 5:

    $emailto = 'name@domain.com';

For SMTP support edit line 4. Set to "1" if you want to use SMTP to send the email. Default is "0", which uses the standard PHP mail function.

    $use_smtp = '1';

If using SMTP you will also need to fill in the 4 SMTP variables - lines 64 - 67.

    $SmtpServer = 'SMTP SERVER';
    $SmtpPort = 'SMTP PORT';
    $SmtpUser = 'SMTP USER';
    $SmtpPass = 'SMTP PASSWORD';

### Sources

## Scripts

- DDSmoothMenu: [Source]
- Carousel: [Source]
- Awkward Slider: [Source]
- Masonry: [Source]
- PrettyPhoto: [Source]
- Super BG Image: [Source]
- Tabs: [Source]
- Toggle: [Source]
- Transify: [Source]

## Fonts

- Adelle: [Source]
- Arvo: [Source]
- Carto Gothic: [Source]
- Charis: [Source]
- Classic Round: [Source]
- Copse: [Source]
- Delicious: [Source]
- Mido: [Source]
- Museo: [Source]
- Otari: [Source]
- PT Sans: [Source]
- Puritan: [Source]
- Quicksand: [Source]
- Titillium: [Source]
- Vegur: [Source]

## Icons

- Meta: [Source 1] and [Source 2]
- Services: [Source]
- Social Media: [Source]

## Backgrounds

1. bg1 [Source]
2. bg2 [Source]
3. bg3 [Source]
4. bg4 [Source]
5. bg5 [Source]
6. bg6 [Source]

### Thank You

Once again, thank you so much for purchasing this theme. As we said at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our 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. elemis