Build a simple custom theme – Part 1

Step 2: Set up the colours and layout dimensions

Now that we have our stater theme and content ready, we can start modifying the theme and give it a new look and feel.

At this stage, have a look in the final theme and copy the images in the images folder. You could of course just use the PSD if you prefer, but who has time to slice up images?

In your style.css, following the theme’s attribution, comes the normalize css. No changes are needed there.

Next comes the code for our images. These refer to images incorporated in our posts. We don’t have any indications of what these should look like in our PSD, so let’s just leave this as is for now.

Next comes the general styles.

Looking at our PSD, we can see that three font colours are used throughout.

Purple – #99619f
Eggplant – #48244c
Black – #0d0d0d

Go ahead and change the link colours to:

a {
        color:#99619f;
}

a:hover {
        color:#48244c;
}

and the headings to:

h1,h2,h3,h4,h5,h6 {
	color:#48244c;
	font-family:Georgia, Times, 'Times New Roman', serif;
	font-weight:normal;
}

h1 {
	margin:4px 0 10px 0;
	font-size:28px;
	line-height:30px;
}

h2, h2 a, h3, h4, h5, h6 {
	margin:10px 0;
	font-size:22px;
	line-height:26px;
}

You’ll notice above, that I also tweaked the font-size of the titles and I’ve set them to normal instead of the default bold.

The blockquote is next. No blockquotes appear on our design, but you’ll notice that our sample page contains them, so let’s just tweak the colours and see what they look like.

Replace the blockquote css to this:

blockquote{
	color: #99619f;
	border-top:1px solid #48244c;
	border-bottom:1px solid #48244c;
	font-size:16px;
	font-style:italic;
	font-family:Georgia, Times, 'Times New Roman', serif;
	margin:10px 0;
	padding:10px;
}

The CSS for the main layout appears next.

Let’s change our body to:

body {
	background:url(images/bg.gif);
	color: #0d0d0d;
	font:14px/20px Helvetica, Arial, sans-serif;
	margin:0;
	padding:0;
}

This will apply the background image and modify our body text colour.

The wrapper contains our main content. We need to modify it so that it’s slightly transparent, has a border and a drop shadow. We can do this with some fancy CSS3 like so:

#wrap {
	position:relative;
	width: 960px;
	margin: 0px auto 0px auto; padding:0;
	background: rgba(255,255,255,.80);
	border:1px solid #48244c;
	border-top:0;
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,.6);
	-moz-box-shadow: 0 0 15px rgba(0,0,0,.6);
	box-shadow: 0 0 15px rgba(0,0,0,.6);
}