By the end of the last article we had a page which was beginning to look more like it could belong on a real site: a title graphic and some basic colors, set into a centered block and split into two columns. If you did your homework, adding a couple of with-pictures posts, you should now have something looking a bit like this:

There are more ways to fancy up your picture displays than I am going to illustrate here, but for this exercise, all you need for your posts is code along these lines. Note that if you want the text to wrap around the pic(s) then you should not put a carriage return before the text:

<img src="http://yourdomain.com/path_to/yourpic.jpg" width="500" height="250" alt="" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="http://refer.ccbill.com/cgi-bin/clicks.cgi?CA=925452-0000&PA=1116973">Persephone from Crazy Babe</a>

We are going to shoot through a lot of formatting today and since most of it is straightforward, I shall just show the way blocks of your stylesheet should look after they are done, commenting when something needs saying. But before we get on, I want to plant a thought in your head, which is that thus far we haven’t touched a line of HTML and as far as I can tell there are about two-dozen people working along with this. That’s twenty-some different designs from the same HTML. Makes you think doesn’t it: maybe this CSS stuff has potential?

If you are in any doubt about the impact of these changes, refer to the source code of your blog’s main page and make such changes one item at a time, so that you can see the result and more easily adapt my settings for the design you are creating.

/*
Theme Name: Stripped
Theme URI: http://carpejugular.com/
Description: A stripped WordPress 2-column theme to act as a foundation for individual designs.
Version: 1.0
Author: John Foulds
Author URI: http://carpejugular.com/
*/

/* globals */

body, html, p, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, blockquote, fieldset, input { margin: 0px; padding: 0px; }
:link, :visited { text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; }
a img, :link img, :visited img { border:none; }

body {
	background: #000;
	text-align: center;
	font: 80%/1.7em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Geneva, sans-serif;
	color: #BFD8F1;
	}

h1, h2, h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	}

h1 {
	}

h2 {
	}
	
h3 {
	}

p {
	}

a {
	color: #95BEE7;
	}
	
a:hover {
	color: #E29634;
	}

img {
	border: none;
	}

input[type=submit] {
	background: #BFD8F1;
	padding: 2px 4px;
	border: 1px solid #082B6B;
	color: #082B6B;
	cursor: pointer;
	}

/* wrapper */

#wrap {
	text-align: left;
	width: 90%;
	margin: 0px auto;
	min-width: 770px;
	}	
	
/* header and main body */

#header {
	background: url(images/logo.jpg) top left no-repeat;
	height: 200px;
	margin-bottom: 50px; /* NEW */
	}

#header h1 {
	text-align: right; /* NEW */
	font-size: 1.5em; /* NEW */
	}
	
#header h2 {
	text-align: right; /* NEW */
	font-size: 1.3em; /* NEW */
	}
	
#content {
	float: left;
	width: 70%; /* CHANGED */
	}

#content p {
	}
	
.entry {
	}
	
.entry h2 {
	font-size: 1.8em; /* NEW */
	}
	
.entry h3 {
	}
	
.entrymeta {
	font-size: 0.85em; /* NEW */
	}

.entrybody p {
	}	

.entrybody ul {
	}

.entrybody ul li {
	}
		
.entrybody ol {
	}
	
.entrybody ol li {
	}
	
 /* NEW */
.entrybody a {
	color: #95BEE7;
	padding-bottom: 2px;
	border-bottom: 1px dashed #95BEE7;
	}
	
 /* NEW */
.entrybody a:hover {
	color: #E29634;
	padding-bottom: 2px;
	border-bottom: 1px dashed #E29634;
	}
	
.entrybody img {
	padding: 7px; /* NEW */
	border: 3px double #082B6B; /* NEW */
	margin: 5px 10px 5px 0px; /* NEW */
	}

blockquote {
	}

p.comments_link {
	margin-top: 10px; /* NEW */
	font-size: 0.85em; /* NEW */
	}	


/* archives */

.arc {
	}
	
.arc h2 {
	}	

/* comments */
	
.nocomments{
	font-size: 0.85em; /* NEW */
	}

.commentblock {
	margin-top: 5px; /* NEW */
	padding: 0px 0px 50px 20px; /* NEW */
	}
	
.commentblock h2 {
	padding-top: 30px; /* NEW */
	font-size: 1.5em; /* NEW */
	}

.commentblock p {
	}
	
.commentblock ol {
	}

li.alt {
	}
	
li.standard {
	}
	
.commentauthor {
	}

.commentinfo{
	font-size: 0.85em; /* NEW */
	}

.commenttext-admin {
	}

.commenttext {
	margin: 10px; /* NEW */
	background: url(images/quote.gif) no-repeat; /* NEW */
	padding: 0px 0px 30px 40px; /* NEW */
	}

h2.commentsformheader{
	}

.commentsform {
	}

.commentsform form {
	}

.commentsform p {
	}

.commentsform form textarea {
	}


/* sidebar */

#sidebar {
	float: right;
	width: 23%;
	font-size: 0.85em; /* NEW */
	}

#sidebar p {
	}
	
#sidebar ul {
	}
	
#sidebar ul li {
	}

#sidebar h2 {
	padding-top: 30px; /* NEW */
	font-size: 1.5em; /* NEW */
	}

#sidebar ul a {
	}
	
#sidebar ul a:hover {
	}

#sidebar ul li ul li {
	background: url(images/arrow.gif) left center no-repeat; /* NEW */
	padding-left: 15px; /* NEW */
	} 


/* search */

#searchdiv {
	}
	
#searchdiv p {
	font-family: Georgia, "Times New Roman", Times, serif; /* NEW */
	font-size: 1.5em; /* NEW */
	}
	

/* footer */	

#footer {
	clear: both; /* NEW */
	padding: 50px 0px; /* NEW */
	text-align: center; /* NEW */
	}
	
#footer p {
	}

A word about h1 and h2 in the header. In real life you would choose a site title and description which was more imaginative than I have done here: perhaps a title with two key phrases in it and a description repeating them and adding three more. Although the description in particular should read normally, IMO they cannot help but be a slight distraction for your visitors. So until a few months ago I would have hidden them via display: none or with a text-indent to shove them away to the left of the visible screen. But I have been reading that Google has now got wise to these tricks and doesn’t like them, which is why these headers are tucked away (fairly) discreetly at the top of the screen.

Otherwise worth noting is a personal choice to use the bottom border (with a couple of pixels padding) in place of regular underline for some links. I prefer this approach because it does not cut through the bottom of downward extending letters and it adds a slightly less common touch to sites making the links stand out better while still using the convention with which surfers are familiar.

I decided there wasn’t sufficient gap between the columns, so I cut the left column width back to 70%. Take a look at the style for the footer and notice it includes clear: both. It mean clear both margins and it needs to appear in any block which follows a multi-column block, otherwise browsers will try to tuck the new div into any spaces between them or onto the end of the shortest column above.

The quote marks used next to comments is a 30-pixel square gif and the arrow used in the sidebar an 8×9 gif which I made and uploaded to my theme image directory. Look at the unusual format of input[type=submit]: that is called an attribute selector and does away with the need (unless we have another reason for using one) of having to give each submit button a class. We are also able to add a cursor to this button with the cursor: pointer attribute.

And that is all the detail we shall worry about on the front page at the moment. In the next article we shall go through the other pages to check whether there are any anomalies or any additional styling with which we need be concerned.

If you want to check what my version of the design looks like after all the stylesheet changes have been made in this article, click here.