Premium Files

“Zen” Documentation by “ansimuz v1.0

“Zen TEMPLATE”

Created: 01/06/2011
By: Luis Zuno aka ansimuz
Email: luis@luiszuno.com

Thank you for downloading my theme. If you like this file you may like some of my premium items found on themeforest portfolio Visit portfolio. Thanks so much!

Table of Contents

  1. HTML
  2. CSS Files
  3. Image Files
  4. JavaScript
  5. PSD Files
  6. Sources and Credits

HTML - top

This theme is a fixed layout theme made in HTML 5 its perfect for personal blog/magazine style websites. It is designed so the nav bar and the sidebar are dynamic. For example the nav dock is always visible no matter the window scrolling, and the sidebar auto hides when mouse is out the sidebar area to have a cleaner layout.

HTML STRUCTURE

The Site structure is composed wrapper div block that mantains the layout centered, there are 3 main blocks in a column organized layout: the nav dock, the content (posts) and the sidebar. The footer is at the bottom of the content block.

FILE LIST

This download package contains all the necessary HTML, CSS, JS and Image files necessary to build a complete site. Also it includes this help file and some editable PSD files in case you need to customize the graphic elements.

TOOLTIPS

For the tooltips i am using a javascript library called poshytip its very easy to set up. The default browser tooltip that displays the value of the title attribute is replaced with a "poshier" version just add a title text and a class of poshytip.

 

Example

<a href="#" title="I am a tooltip" class="poshytip">Tool tip</a>
         
         
<img src="image.jpg" title="I am a tooltip" class="poshytip" alt="Image" />

GOOGLE MAP CONFIGURATION

To set your own google map follow these 3 steps:

1) Sign Up for an"API KEY" http://code.google.com/apis/maps/signup.html Save this key in a notepad for the moment.

2) Go to http://itouchmap.com/latlong.html to get the Latitud and Longitud values from the itouch map app.

3) Edit your "contact.html" file around line #122 and enter the values for the Api key, the Longitude and the Latitude values:

<!-- GOOGLE MAPS -->
 <script type="text/javascript" src="http://www.google.com/jsapi?key=PASTE API KEY HERE" ></script>
 <script type="text/javascript" >google.load("maps","2.x");</script>
 
 <script type="text/javascript">
 
 jQuery(document).ready(function($) {
 
 //##########################################
 // Google maps
 //##########################################
 
 // You can get the latitud and Longitude values at http://itouchmap.com/latlong.html
 
 var latitude = COPY LATITUDE VALUE HERE;
 var longitude = COPY LONGITUDE VALUE HERE;


CONTACT FORM

There are 2 files nedded filed needed for the FORM VALIDATION (js/form-validation.js) and the PHP (send-mail.php) that actually sends the data .

The HTML

Configuring the email recipients and data

To set the sender and the recipients just change the value for the hidden input values inside the contact.html.

Form validation

Form-validation.js This is the javascript validation for the fields.

How to add fields to the contact form:

 

 

CSS Files and Structure - top

All the CSS files are stored in a folder named css on the root of the html files. Also you can have the dark skin by adding the following line of code to before the closing </head> tag: <link rel="stylesheet" href="css/dark.css" type="text/css" media="screen" />

List of css files under the CSS folder:

comments.css

Use this file to edit the visual of the comments on the single.html template page

ie-hacks.css

Just in case a CSS rule don't display correctly on IE.

jquery.tweet.css

To edit the appearance of the tweets

reset.css

Core CSS file needed to display correctly by reseting the default values

social-icons.css

The list of social icons files

style.css

This is the main styles for the whole site, in there you will probably find the most CSS rules for the template

superfish.css

This is a core file for the correct display of the dropdown menu

tabs.css

This controls the visual aspect for the tabs widgets

 

Image Files - top

All the graphic elements for the entire theme are contained at the "img" folder. The mockup images used to feed the site are contained at the "img/dummies" folder.

 

JavaScript - top

All the pages link the neccessary js files inside the "head" tag of the document. If you need to modify the behavior from a certain jquery element open the "js/custom.js" file. where you can alter the parameters of some of the js elements.

 

E) PSD Files - top

I have included editable psd files in case you need to change or edit the graphic elements. You can find them at the PSD folder.

 

Sources and Credits - top

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

JAVASCRIPT

IMAGES

Once again, thank you for downloading this free file. I don't offer support on freebies however you can always look for help at http://luiszuno.com/free-forums/

ansimuz

Go To Table of Contents

Premium Files