/* General Styles */
body {
margin: 0;
padding: 0;
color: #333;
background: #fff;
font: 76%/1.5 Verdana, sans-serif;
}
a:link, a:visited {
color: #d39;
background: transparent;
text-decoration: none;
border-bottom: 1px solid;
}
a:hover {
color: #f5b;
}
/* Normalizes font size on headings */
h1, h2, h3, h4, h5, h6 {
font-size: 1em;
}
/* Get rid of not required elements */
hr {
display: none;
}
/* Adjust links inside headings */
h1 a:link,
h1 a:visited,
h2 a:link,
h2 a:visited {
border-bottom: none;
}
Now our template has been normalized, that is, we've only set some basic styles in order to create a common ground from which we can start building our layout. Now we can move to more complex things. Let's start with our main container:
/* LAYOUT */
/* Global container */
#page {
margin: 0 auto;
width: 80%;
}
As you can see here, our layout has been centered. Additionally, we've also added a width in percentage so that our layout will be resizable. Now it's time for another massive normalization:
/* HTML elements inside the global container */
#page h1,
#page h2,
#page h3,
#page h4,
#page h5,
#page h6 {
font-family: Georgia, serif;
color: #b17;
}
#page h1 a:link,
#page h1 a:visited,
#page h1 a:hover,
#page h2 a:link,
#page h2 a:visited,
#page h2 a:hover {
color: #b17;
}
#page p {
margin-top: 0;
}
And here is the result. Now our headings and links are stylized. Time to move on. Let's stylize our header:
/* Header */
#header {
width: 100%;
height: 8.2em;
min-height: 100px; /* consistency between platforms using different fonts */
background: #fff url("../img/header.png") repeat-x 0 0;
}
#headerimg {
width: 100%;
height: 100%;
background: transparent url("../img/h1.png") no-repeat 100% 5%;
}
#headerimg h1 {
font-size: 3em;
margin: 0 0 0 150px;
line-height: 1;
padding-top: 10px;
}
#headerimg div.description {
margin-left: 150px;
padding-top: 3px;
font: italic 1.2em/1 Georgia, serif;
}
You can see the result here. Notice the min-height workaround: some platforms may use a different font type and size, so this trick ensures a cross-platform compatibility. Now it's time to position our elements:
/* Positioning: Main content */
#content {
width: 70%;
float: left;
margin: 0;
}
/* Positioning: Sidebar */
#sidebar {
width: 25%;
float: right;
margin: 0;
}
/* Positioning: Footer */
#footer {
clear: both;
width: 100%;
margin: 0;
}
As you can see here, we've put our main content to the left and the sidebar to the right by using floating. Our footer will appear under both columns because of the clearance applied to it. Let's move on to our main content now:
/* Main content */
.post {
width: 100%;
}
.post h2 {
margin: 0;
padding: 0.3em 0 1px 1em;
font-size: 1.6em;
border-bottom: 1px dashed;
background: transparent url("../img/h2.png") no-repeat 0 0.5em;
}
.post small {
margin: 0.3em 0;
display: block;
background: #d39 url("../img/small.png") repeat-x 0 0;
color: #fff;
font-weight: bold;
text-align: right;
padding: 2px;
}
/* Create gutters */
.entry, .postmetadata {
margin: 0 auto;
width: 96%;
}
/* Post metadata */
.postmetadata {
border-top: 1px dashed #b17;
padding-bottom: 1em;
background: transparent url("../img/metadata.gif") no-repeat 0 0.2em;
padding-left: 1.5em;
}
We've stylized our post contents, as you can see here. Nothing really difficult, just some fancy background images on headings and descriptions. Now it's time to stylize our sidebar:
/* Sidebar */
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
#sidebar #searchform, #sidebar #searchform p {
margin: 0;
padding-top: 0.5em;
}
#sidebar #searchform label.hidden {
position: absolute;
top: -1000em;
}
#sidebar #searchform input {
vertical-align: middle;
font: 1em Verdana, sans-serif;
}
#sidebar #searchform input#s {
width: 120px;
background: #fff;
border: 1px solid #f5b;
}
#sidebar #searchform input#searchsubmit {
background: #d39;
color: #fff;
font-weight: bold;
}
#sidebar h2 {
margin: 0;
font-size: 1.2em;
background: transparent url("../img/category.png") no-repeat 0 50%;
line-height: 1;
padding: 0.3em 0 0.4em 14px;
}
#sidebar ul li ul li {
background: transparent url("../img/li.gif") no-repeat 0 50%;
margin-left: 14px;
padding-left: 1em;
}
#sidebar ul li ul {
padding-bottom: 0.5em;
}
And here is the result. We've just stylize our search form and our categories menus. Let's move to our footer:
/* Footer */
#footer p {
margin: 0;
width: 100%;
padding: 2em 0;
background: #b17 url("../img/footer.png") repeat-x 0 0;
color: #fff;
text-align: center;
}
#footer p a:link,
#footer p a:visited,
#footer p a:hover {
color: #fff;
}
You can see here the result. Finally, a touch of style by adding a background image to the whole page and the sidebar:
/* Sidebar background image */
#sidebar {
padding-bottom: 231px;
background: transparent url("../img/sidebar.png") no-repeat 50% 100%;
}
/* Body background image */
body {
background-image: url("../img/body.png");
background-repeat: no-repeat;
background-position: 0.2em 7.3em;
}
Here's the final result. However, Internet Explorer 7 (and lower) need the following styles that you can add via conditional comments:
/* Fixes IE6 wrong percentages calculation */
* html #content {width: 69%;}
p {
margin-bottom: 0;
padding-bottom: 1em;
}
body {
background-position: 0.1em 5.5em;
}
Now our theme is complete. You can download it here.