“Nova” Documentation by “ansimuz v1.0

“NOVA TEMPLATE”

Created: 20/05/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

A) HTML - top

This theme is a fixed layout theme made in HTML 5 its perfect for corporate sites. It has 7 + different layouts and is very customizable using skins.

HTML STRUCTURE

The main layout is built from 7 main blocks each one contains a wrapper block to mantain the layout centered. There 7 main blocks are as follow:

  1. Header
  2. Menu
  3. slideshow (only for the front page)
  4. main
  5. twitter
  6. footer
  7. bottom

 

 

 

FILE LIST

The html folder contains all the necesary files to build a website it contains. Heres the list of files and folders:

blog.html
contact.html
css (Folder containing all the necesary style sheets)
features-accordion.html
features-appearance.html
features-columns.html
features-infobox.html
features-monobox.html
features-tabs.html
features-toggle.html
features.html
gallery-2.html
gallery-3.html
gallery.html
images (Folder containing the slider images)
img (Contains all the image files)
index.html
js (Javascript files)
portfolio.html
project.html
single.html
skins (Skin folders for the theme appearance)
video-gallery.html

STYLED ELEMENTS

COLUMNS

Set the columns by placin the content for that column inside the divs as shown below and having the "last" class for the last div. The div clear shown in the image is optional if you dont desire columns overlaping.

 

Examples of HTML for all the columns

<!-- 2 cols -->
<div class="one-half">
	<h6>One half </h6>
	<p>Content ...</p>
</div>
<div class="one-half last">
	<h6>One half</h6>
	<p>Content ...</p>
</div>
<div class="clear "></div>
<!-- ENDS 2 cols -->

<!-- 3 cols -->
<div class="one-third">
	<h6>One third </h6>
	<p>Content ...</p>
</div>
<div class="one-third">
	<h6>One third </h6>
	<p>Content ...</p>
</div>
<div class="one-third last">
	<h6>One third </h6>
	<p>Content ...</p>
</div>
<div class="clear "></div>
<!-- ENDS 3 cols -->
<!-- 4 cols -->
<div class="one-fourth">
	<h6>One fourth </h6>
	<p>Content ...</p>
</div>
<div class="one-fourth">
	<h6>One fourth </h6>
	<p>Content ...</p>
</div>
<div class="one-fourth">
	<h6>One fourth </h6>
	<p>Content ...</p>
</div>
<div class="one-fourth last">
	<h6>One fourth</h6>
	<p>Content ...</p>
</div>
<div class="clear "></div>
<!-- ENDS 4 cols -->
<!-- 2/3 cols -->
<div class="one-third">
	<h6>One third </h6>
	<p>Content ...</p>
</div>
<div class="two-third last">
	<h6>Two thirds</h6>
	<p>PContent ...</p>
</div>
<div class="clear "></div>
<!-- ENDS 2/3 cols -->

<!-- 1/4 cols -->
<div class="three-fourth ">
	<h6>Three fourths</h6>
	<p>Content ...</p>
</div>
<div class="one-fourth last">
	<h6>One fourth </h6>
	<p>Content ...</p>
</div>
<div class="clear "></div>
<!-- ENDS 1/4 cols -->

 

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

 

ACCORDION AND TOGGLE BOXES

This template includes a way to make toggle and accordion boxes using the magic of Jquery.

Code example

TOGGLE BOX

A trigger link
<h2 class="toggle-trigger custom"><a href="#">Toggle Switch</a></h2>




and a div block nested inside a container block div.
<div class="toggle-container">
	<div class="block">
		<p>Content</p>
	</div>
</div>

ACCORDION

<div class="accordion">
	<h6><a href="#">Section 1</a></h6>
	<div>
		<p>
		Mauris mauris ante, blandit...
		</p>
	</div>
	
	<h6><a href="#">Section 1</a></h6>
	<div>
		<p>
		Mauris mauris ante, blandit...
		</p>
	</div>
	
	<h6><a href="#">Section 1</a></h6>
	<div>
		<p>
		Mauris mauris ante, blandit...
		</p>
	</div>
</div>

 

TABS

I am using a javascript library for the tabs you can find the source and more documentation here.

Here is the minimal HTML code to get tabs working: 

<!-- the tabs -->
 <ul class="tabs">
 	<li><a href="#">Tab 1</a></li>
 	<li><a href="#">Tab 2</a></li>
 	<li><a href="#">Tab 3</a></li>
 </ul>
<!-- tab "panes" -->
<div class="panes">
	<div>pane 1 content</div>
	<div>pane 2 content</div>
	<div>pane 3 content</div>
</div>

 

GALLERY

 

You can have your gallery in 2 or four columns

The HTML structure for the gallery is:

  1. Flter
  2. Thumbs
  3. Pager

HTML Structure

 

BLOG

For the blog.html page you have two main blocks of code. One for the posts and one for the sidebar.

CONTACT

For the contact form 3 files are used one for the HTML (contact.html) another 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:

 

TWITTER CONFIGURATION

Open the js/custom.js file and edit the variables for the twitter section:

// Tweet Feed ------------------------------------------------------ //
	
	$("#tweets").tweet({
        query: "from:envato http",
        count: 3,
        loading_text: "loading tweets...",
        callback: tweet_cycle
    });

 

 

B) CSS Files and Structure - top

This theme uses several css files contained in the css folder. Please note that the "skins/skin_name/style.css" may overwrite styles defined at the "css/style.css" file.

Css files:

ie8-hacks.css (used to display ie8 correctly)
nivo-slider.css (for the slideshow)
reset.css (core file)
social-icons.css (For the social icons)
style.css (main classes)
styled-elements.css (For the web elements)
superfish.css (For the navigation)
tabs.css (Styles the tabs)

Please note. The "css/styles.css" imports essential external files at the the top of the file:

      
/* IMPORTS ------------------------------------------------------------*/

@import url('reset.css');

@import url('styled-elements.css');


/* HACKS ------------------------------------------------------------*/

.clear{
	clear:both;
	height:1px;
}

.inv{ display:none; }

.alignleft{
	float: left;
	margin: 5px 10px 5px 0px;
}

 

C) Image Files - top

All the slides are contained at the "images" folder.

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 background patterns are stored at the "img/bg" folder.

 

D) 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.

You will find the call to the next fucntions:

nivo slider
Poshytips
Superfish menu
Scroll to top
Rollover functions
Tweet Feed
Tabs
Pop ups windows
Quicksand gallery filters

 

 

E) PSD Files - top

I have removed the PSD files for this donwload package, but you can get them all at: http://luiszuno.com/blog/downloads/nova-psd

 

 

F) 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