index.html (full)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<title>SmartComp » Homepage</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script type="text/javascript">google.load("jquery", "1.2");</script>
<script src="js/script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body class="home">
<div id="wrapper"><div id="shades">
<div id="header">
<div id="menu">
<ul>
<li><a href="index.html" title="Home" class="active">Home</a></li>
<li><a href="default.html" title="Products">Products</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="About Us">About Us</a></li>
<li><a href="#" title="Contacts">Contacts</a></li>
</ul>
</div>
<a id="logo" href="index.html" title="SmartComp" rel="home">
<img width="265" height="61" src="img/logo.jpg" alt="SmartComp"/>
</a>
</div>
<div id="callout">
<img width="783" height="171" src="img/callout.jpg" alt="Callout" />
</div>
<div id="content">
<div class="post">
<h2>Top service in our industry</h2>
<a href="#" title="#"><img class="photo" src="img/photos/main.jpg" alt="Main" /></a>
<p class="emph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Nam venenatis nibh porta diam. Vivamus venenatis.</p>
<p>Nam adipiscing ante ut sem. Donec viverra lectus in elit. Sed odio turpis, convallis convallis, ullamcorper eu, pulvinar quis, urna. Mauris suscipit lorem sed pede. Morbi tempus, turpis a rhoncus adipiscing, turpis purus tempus massa, a ornare arcu lorem sed turpis.</p>
</div>
<div class="post">
<h2>Our best products</h2>
<div class="product-img">
<a href="#" title="#"><img class="photo" src="img/photos/product1.jpg" alt="Product1" /></a>
<small class="product-description">» <a href="#" title="#">Lorem ipsum dolor sit</a></small>
</div>
<div class="product-img">
<a href="#" title="#"><img class="photo" src="img/photos/product2.jpg" alt="Product2" /></a>
<small class="product-description">» <a href="#" title="#">Phasellus cursus dui sit</a></small>
</div>
<div class="product-img">
<a href="#" title="#"><img class="photo" src="img/photos/product3.jpg" alt="Product3" /></a>
<small class="product-description">» <a href="#" title="#">Sed lorem. In dictum</a></small>
</div>
<div id="other-products">
<ul>
<li><a href="#" title="Product">Lorem ipsum dolor sit amet</a></li>
<li><a href="#" title="Product">Consectetuer adipiscing elit</a></li>
<li><a href="#" title="Product">Aliquam lacinia massa quis metus</a></li>
<li><a href="#" title="Product">Phasellus elementum viverra velit</a></li>
</ul>
<ul>
<li><a href="#" title="Product">Lorem ipsum dolor sit amet</a></li>
<li><a href="#" title="Product">Consectetuer adipiscing elit</a></li>
<li><a href="#" title="Product">Aliquam lacinia massa quis metus</a></li>
<li><a href="#" title="Product">Phasellus elementum viverra velit</a></li>
</ul>
</div>
<a class="more" href="#" title="More">» More</a>
</div>
</div>
<div id="sidebar">
<h2>Latest news</h2>
<a href="#rss" id="rssicon"><img src="img/rssicon.jpg" alt="rss" /></a>
<div class="news">
<span class="date">« 12/15/2008 »</span>
<p><span class="emph">Quisque sagittis luctus metus.</span>
Vestibulum fermentum rutrum mi. Morbi at metus. Ut et pede at magna feugiat convallis. Donec ullamcorper aliquet nunc. Sed non ipsum.
</p>
</div>
<div class="news">
<span class="date">« 01/04/2009 »</span>
<p><span class="emph">Quisque quis nunc.</span>
Donec id orci. Integer auctor malesuada tortor. Nunc felis risus, tincidunt non, varius ut, rhoncus sit amet, ipsum. Mauris pretium, lacus vel hendrerit.
</p>
</div>
<div class="news">
<span class="date">« 02/11/2009 »</span>
<p><span class="emph">Vivamus a odio.</span>
Maecenas pellentes. Donec dapibus blandit odio. Cras quis diam a dolor interdum porta. Mauris hendrerit.
</p>
</div>
<div class="news">
<span class="date">« 09/11/2009 »</span>
<p><span class="emph">Lorem quisque nunc.</span>
Integer auctor malesuada tortor. Donec dapibus blandit odio.
</p>
</div>
</div>
<div id="footer">
<span id="copyright">© 2008 Smart Corp </span>
<span class="meta-sep">|</span>
<a href="#" title="Privacy" >Privacy</a>
<span class="meta-sep">|</span>
<a href="#" title="Sitemap">Sitemap</a>
<span class="meta-sep">|</span>
<a href="#" title="Login">Login</a>
</div>
</div></div>
</body>
</html>
style.css (sample)
body{
font-family:Verdana,Arial,sans-serif;
font-size:12px;
line-height:16px;
color:#656b72;
}
a{
color:#184483;
}
a:hover{
color:#2656a0;
text-decoration:none;
}
body{
background:url('../img/background.png') repeat-x #1D1E1D;
}
div#wrapper{
width:839px;
margin:0 auto;
position:relative;
background:#e1e1e1 url('../img/sheet-top.png') repeat-x;
overflow:hidden;
}
div#shades{
display:block;
width:839px;
background:url('../img/body-shades.png');
padding-top:120px;
position:relative;
}
div#menu{
width:839px;
height:70px;
background:url('../img/menu.jpg');
position:absolute;
top:0; left:0;
}
a#logo{
width:265px;
height:61px;
display:block;
position:absolute;
top:45px;
left:45px;
}
div#sidebar{
width:196px;
padding:2px 18px 0px 18px;
margin:0px 30px 16px 0px;
background:#dadbdb;
float:right;
position:relative;
}
div#content{
width:560px;
float:left;
padding-bottom:16px !important;
}
div#footer{
clear:both;
height:49px;
background:#143360 url('../img/footer-bk.png') repeat-x;
color:#fff;
vertical-align:middle;
line-height:49px;
padding-left:60px;
font-size:11px;
}
readme.txt (full)
/////////////////////////////////
// SmartComp 1.0
/////////////////////////////////
Created: 11/18/2008
By: Valentino Aluigi (postream)
Contact Info: maverickdva@gmail.com
Thank you for purchasing my theme.
If you have any questions that are beyond the scope of this help file,
please feel free to email, via my user page contact form.
Thanks so much!
// TABLE OF CONTENTS //
1) Description
1.1) XHTML Structure and CSS
1.2) Javascript
1.3) Source files
2) Usage
2.1) How to change the logo
2.2) How to customize the menu
2.3) How to change the callout
3) Credits
// 1) DESCRIPTION //
----------------------------------------------------------------------------------------------------------
1.1) XHTML Structure and CSS
This theme is a fixed layout with two columns and a big callout in homepage.
----------------------------------------------------------------------------------------------------------
1.2) Javascript
This theme uses just a little, unobtrusive script to add rounded corners.
jQuery is loaded via Google Ajax Library.
----------------------------------------------------------------------------------------------------------
1.3) Source files
In the "sources" directory you can find:
1) main layout
2) logo and callout (for easier customization)
3) css colors (used to create different css versions)
// 2) USAGE AND CUSTOMIZATION //
----------------------------------------------------------------------------------------------------------
2.1) How to change the logo
Replace "img/logo.jpg" with your logo.
You can use "sources/cp_logo.psd" for a better replace.
----------------------------------------------------------------------------------------------------------
2.2) How to customize the menu
Editing menu is easy. Just change "li" tags inside menu div.
Tip: if you have a lot of entries you can reduce the space between items
by adding this code at the bottom of "css/style.css":
div#menu ul {left:314px}
div#menu li a{margin-right:0px;}
----------------------------------------------------------------------------------------------------------
2.3) How to change the callout
Replace "img/callout.jpg" with a customized callout.
You can use "sources/cp_callout.psd".
If you are not using the blue theme activate the appropriate color layer.
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.
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.
Valentino Aluigi (postream)
http://www.themeforest.net/user/postream
Email: maverickdva@gmail.com
