ORNARE FREE PORTFOLIO TEMPLATE October 28, 2009

Ornare
Portfolio Template

CSS / HTML
Template!
Thank you for downloading this theme. If you have any questions that
are beyond the scope of this help file, please feel free to leave a
comment on the post of this theme where you downloaded I would
be more happy to assist you if its minor change and if it’s a big change
then I will charge depending on your requirements.
 ORNARE FREE PORTFOLIO TEMPLATE October 28, 2009

Introduction
This theme is a fixed layout with two columns using 960 grid system. This site is best suitable for a
business, company, Blog, portfolio, or freelancer portfolio website as well. For a Navigation Colors and
Content Background Color Settings Please follow steps below.

For the most part you can just follow the HTML with commented codes. The font I've used for the logo in
case you are wondering is Chunkfive, you can just search in google for Chunk five font. you can create new
logo areas using the PSD file included.

Main Features
The home page includes completely custom slider that allows you to change the
slides using thumbnails for each slide you can modify it by editing the js file for
speeding or fade in duration.
Highly Customized About Us Page, Blog Page, Portfolio Page and Services Page you
are able to edit every content as i have well commented each code.
Multilevel Dropdown menu, Submenu with Active Page Status.
Portfolio page with Lightbox Option to preview big image
Easy Slicing for the images as PSD Files for section perfectly layered and named, if
you want to edit an existing Theme or create your own image, PSD Files included for
ease of slicing images.
Compatibility (IE 6, IE 7, IE 8, FireFox, Opera, Safari, Chrome)

Files Included
PSD File for the homepage with named layers and groups as well
PDF File Help file with clean instructions

Scripts Credits
jQuery
TINYSlideShow
PrettyPhoto
DD Belated png
Drop Down Menu - Superfish
 ORNARE FREE PORTFOLIO TEMPLATE October 28, 2009

Note : Make sure you have a knowledge in html/css before editing any code which is In html or Div or css

Logo Setup
For changing the logo you need to save the logo in png 24bit transparent and place it here in the html code
and changing the position of it can be done via css code below.

.logo{
margin:20px 0 0 20px;
}

Navigation Setup
Changing the colors and mouse over image you can open the superfish.css file in the css directory and
change according to your needs below is the HTML Code for you.

For current page class you can use class="current " in your LI item as below

<li><a href=”#” class="current">name</a></li>

Setting Homepage Portfolio Slider

Editing the slider area is so simple as I have content each slide/list. Below is an example.
<!--start:slideshow -->
<li>
<!--start:slideshow content and image -->
<h3>Title Here</h3>
<span>photos/largepic.jpg</span>  This is the main pic
<!--an image only -->
<p>content goes here <br />
<a href="#" class="readmoremain">read more</a> </p>
<img src="thumbnails/thumbnail.jpg" alt="img-1" /> This is the thumbnail
<!--an image thumbnail only -->
</li>
<!--end:slideshow content and image -->
 ORNARE FREE PORTFOLIO TEMPLATE October 28, 2009

Sidebar Menu
I have used separate class for submenu see the following code below for html use.

<div class="submenu">
<ul>
<li class="current"><a href="#1" title="Link 1">About Us</a></li>
<li><a href="#2" title="Link 2">Where we are</a></li>
<li><a href="#3" title="Link 3">Who we are</a></li>
<li><a href="#4" title="Link 4">About Management</a></li>
<li><a href="#5" title="Link 5">About Company</a></li>
</ul>
</div>

Changing the colors and mouseover image you can open the styles.css file in the css directory and change
accordingly. Class is submenu

For current page class you can use class ”current” in your LI item as below
<li class="current"><a href=”#”>name</a></li>

Use of right mark image for the list items

Use the below list for using the list items with right mark image
<ul class="list">
<li>Integer vel leo in nisl pulvinar</li>
<li>Mauris elementum elit quis turpis</li>
<li>Quisque at dolor eget arcu eleifend</li>
</ul>

Block Float
For using the text alignments to left or right use the below class
.rightalign{
float:right;
}

.leftalign{
float:left;
}

Text Float
For using the text alignments to left or right use the below class
.textright{
text-align:right;
}

.textleft{
text-align:left;

}
 ORNARE FREE PORTFOLIO TEMPLATE October 28, 2009

News List Block in sidebar

Use of news list in side bar use a class newslist or see example below

<ul class="newslist">
<li> <a href="#"><span class="date">14 April, 09</span> Listuem Names ligula a blandit ornare, t</a> </li>
</ul>

Portfolio Block
Creating a Portfolio block is also so simple below is an example of 1 block for your future references. The
portfolio block is nested with a comment like <!--start:portfolio -->

<div class="portfolio">
<!--start:portfolio -->
<div class="port_img">
<ul class="gallery clearfix">
<li>
<a href="images/fullscreen/port_img1.jpg" rel="prettyPhoto[lol]" title="dynamic html Template" >
<img src="images/port_img1.jpg" alt="image-1" class="img_border" />
</a>
</li>
</ul>
</div>

<!--an image only -->

<div class="port_details">
<!--start:port_details -->
<h3>Dynamic Xhtml</h3>
<p>Cras vehicula, ante ut sollicitudin ultricies, tellus odio cursus nisi, convallis dignissim urna nisi eu urna. Mauris sit
amet risus velit. Donec dapibus luctus ante, in feugiat lacus feugiat sed.</p>

<h4>Screenshots</h4>
<ul class="gallery clearfix">
<li>
<a href="images/fullscreen/screenshot_big1.jpg" rel="prettyPhoto[lol]" title="dynamic html Template" >
<img src="images/screenshot_1.jpg" alt="img-1" /></a>
</li>
<li>
<a href="images/fullscreen/screenshot_big2.jpg" rel="prettyPhoto[lol]" title="dynamic html Template" >
<img src="images/screenshot_2.jpg" alt="img-2" /></a>
</li>
</ul>
<br clear="all" />

<a href="#" class="view">Visit Site</a> </div>

<!--end:port_details -->
<div class="clear"></div>
</div>
<!--end:portfolio -->

Portfolio Details section is nested with the div block port_details <div class="port_details"> where you can add/ edit
the details and more screenshots of your portfolio item.
 ORNARE FREE PORTFOLIO TEMPLATE October 28, 2009

Contact Form Settings

Find the code below in the contact.php page and change it to the email id you want and your custom
messages for the error messages and thank you messages.

<?
$submit=$_POST['Submit'];
if($submit == Submit){
$status = "OK";
$email=$_POST['email'];
$message=$_POST['message'];
$subject=$_POST['subject'];
$name=$_POST['name'];
$company=$_POST['company'];

$msg="";
$msgerror="";
//error_reporting(E_ERROR | E_PARSE | E_CORE_ERROR);

if ( strlen($name) < 1 ){
$msgerror=$msgerror."* your name field is missing <BR />";  Change this message for the Name field error message
$status= "NOTOK";}

if ( strlen($message) < 5 ){
$msgerror=$msgerror."* your Message field is blank must be more than 5 words <BR/>";  Change this message for the message
field error message
$status= "NOTOK";}

if (!stristr($email,"@") OR !stristr($email,".")) {
$msgerror=$msgerror."* your email address is not correct <BR />";  Change this message for the Email field error message
$status= "NOTOK";}

if($status=="OK"){// echo $query;

$headers="";
$headers4="youremail@domain.com";  Change this to the email ID you want to receive your emails
$headers.="Reply-to: $headers4\n";
$headers .= "From: $headers4\n";
$headers .= "Errors-to: $headers4\n";
$headers = "Content-Type: text/html; charset=iso-8859-1\n".$headers;
mail($headers4,$subject,"Contactus <BR>
Name :$name
<BR>Email:$email
<br>Company:$company
<br>Message: $message","$headers");
$msg="Thank you! your message has been sent we will contact you soon.";  Change this message to the message you want to
display after a contact form has been submitted.
}
}
?>
 ORNARE FREE PORTFOLIO TEMPLATE October 28, 2009

SUB Page titles

This is subpage content box nested with 1 column changing the padding inside of the content can be
found in the subtitle class

Use H1 for the Titles

Below is the code you can find in the HTML pages

<div class="grid_16">
<!--start:subtitle grid -->
<div class="subtitle">
<h1><b>Big title here!</b></h1>
<p> a small tag line goes here</p>
</div>
</div>
<!--end:subtitle grid -->

Blog Box Block

Using a blog block is so simple I have used the commented coding for your better readings as well as that
you can follow the code block below

Make sure your blog page block images should be of max size 570 pixels or width and height is up to you!

<div class="blog">
<!--start:blog -->
<h2><a href="#">A post without image on the left side content</a></h2>
<div class="post-info">Posted by <span><a href="#">USER</a></span> on <span><a href="#">June 21st,
2009</a></span>, comments ( 10 )</div>

<p>Morbi vitae elit a turpis malesuada malesuada in sit amet velit. In suscipit, ipsum adipiscing imperdiet
rhoncus, erat enim elementum risus, eu lacinia sem nunc eget est. Duis sit amet hendrerit velit. Aenean
non urna massa, egestas scelerisque nulla. In massa tortor, tincidunt quis consectetur ut, condimentum id
magna. Pellentesque vitae elit non ligula dictum viverra nec et leo. Integer nec est mi. Etiam neque purus,
semper non viverra sit amet, luctus et sapien. </p>
<br />
<a href="#" class="view">Continue Reading Post &raquo;</a>
<br clear="all" />
</div>
<!--end:blog -->

Setting the PNGFixes

If you are using any png image then use a class “pngfix” for IE only

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. I'll do my best to assist.