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!
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.
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.
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.
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" />
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;
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
To set the sender and the recipients just change the value for the hidden input values inside the contact.html.
Form-validation.js This is the javascript validation for the fields.
How to add fields to the contact form:
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
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.
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.
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.
I've used the following images, icons or other files as listed.
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