Let’s begin with a roadmap of where this series is going, so that you can see if it will interest you.

We are setting out with a basic WordPress theme which has been “stripped”. In other words, we have a no-frills set of HTML files - Archives, Comments, Footer, Header, Main Index Template, Page Template, Search Results, Sidebar - and a stylesheet from which almost all the settings have been removed:

body {
	margin: 0px;
	padding: 0px;
	}

h1, h2, h3 {
	}

h1 {
	}

h2 {
	}
	
h3 {
	}

p {
	}
	
...etc

The theme is actually usable in its current state and shows you what any visitors will see who are using browsers which cannot handle stylesheets:

In the above graphic you are also seeing the entries which WordPress includes in their default install. I have left them untouched, so that if you want to set up a test blog and work along with this series, everything on your site can look just as it does here. That should make the series easier to follow.

This will not be just a classroom-style exercise. During this series we are going to turn this raw theme into a complete, fully-working theme which you could use on a site. I shall explain what I am doing in a way which will allow you to change things to suit your own tastes and needs. There will be 1-2 articles per week, so you will have time to make your personal modifications between articles and ask questions if you get stuck. I have opened a thread in the forum - HERE - for any questions arising from these articles. I only request that you do not jump ahead of where we are, because that will make the thread hard for others to follow. If you have general questions about WordPress or CSS, start your own thread!

We are going to be building a 2-column theme with a black background, but you will be able to change that for any color scheme you want. It will be coded as table-free XHTML 1.0 Strict: the HTML, CSS and RSS feeds will validate. I am going to be making the theme up as we go along, so that you can follow not only the technical aspects of the process, but also what passes for the creative thinking behind it. I want to stress that what I explain here is by no means the only way to tackle this job. It’s just the way that I do it and when you become more experienced you will surely develop your own approach. Here is what you will need to work along:

• A working test installation of WordPress. Everyone who runs blogs should have an installation which is not promoted publicly, so that they can build and test new designs. It can be in a sub-directory of an existing site and use an existing database (providing you use a different table prefix: see below). All that matters is that you have such an installation.
• An installed copy of the stripped theme which you can download from here and install it on your test site (see below).
• Optionally an HTML editor and a graphics editor.

Installing WordPress

WordPress is one of the easiest installs around. Download the current version from here, then follow the Famous 5-Minute Install. For the purpose of creating a test installation I recommend you do install in a sub-directory (as explained in step 5) and if this install is going to share a database with another WordPress install, make sure that when you edit wp-config-sample.php (step 3) you change the default wp_ table prefix:

$table_prefix  = 'test_';   // Only numbers, letters, and underscores please!

Installing the “Stripped” theme

Download the zip file from here and extract it onto your PC using directory names such that a sub-directory called “stripped” is created in your themes directory:

FTP the stripped directory to the parallel location on your server and change the permissions of the css file and php files to CHMOD 666 so that they are writable.

Colors

Every design has to start somewhere and for me it begins with thinking about colors. There is nothing to prevent you using any color you like but I think most of us would agree that certain colors tend to suggest particular niches: for example teen sites often use pinks and pale blues, babe and mature sites are frequently purple, ebony sites brown and orange, etc. There is no percentage in confusing our visitors, quite the contrary, it pays to use their preconceptions to our advantage. So in this instance (this is a hypothetical exercise for me) I imagined I was tasked with designing a blog for a leg-fetish site and therefore decided on a black background. Dark colors tend to suggest fetish or hardcore to porn surfers and black stockings are considered sexy by many, so it was a logical if uninspired first step.

If one of my designs is to have any graphics at all, the next thing I do is hunt around for an image which I can use to reinforce the impression the background color is intended to convey. As you will see in a moment, for this design I decided on a picture of a woman wearing fishnet pantyhose and extreme stiletto heels. I jacked up the contrast and saturation to create some additional impact, faded it out to black and then cropped. This is (a reduced-size version of) the result:

Okay, so we have a black background and a header image, now for the rest of the colors. The two elements we have chosen so far do enough to suggest what we are offering as soon as someone reaches our site. So next I try to find highlight colors that will give the site some individuality. There is no way to find something no-one else has ever done, but I want to avoid the most common combinations, which in this case means reds and golds. I don’t like to simply pull colors out of thin air and anyway I’m not great at guessing colors, so I use a handy program called Color Schemer. It has an eye dropper tool I can hover over my header image (in this case picking up some of the oranges and browns from the woman’s legs) and it will show me related colors. I found a blue which looked promising and decided it would be good basis for highlighting this design.

That is twice I have used the word “highlighting”. Blocks of text we want our visitors to read and above all, links, should contrast strongly with the background. That consideration doesn’t commit us solely to black on white or white on black, but it imposes severe restraints. We can relieve what could easily become very boring color schemes with highlights: that is what the blue will do in this instance and to kick off I found two tones around my starting point - #BFD8F1 and #082B6B - which thus far at least work, for me.

Header

We are already partway, but I want to add the site title. It should be displayed, but I want to keep the h1 and h2 headers free for keywords to help with the search engines, so I usually include the site name in the header/background graphic. I tend to go towards slightly understated, because I want surfers to spot the site name. I do not however want it to have so much impact their eyes don’t move on. Once my graphic is done and optimized, I upload it to the images directory of my theme folder

Putting it together

Go to your WordPress “Dashboard” and select Presentation » Themes. The Stripped theme should appear in the list below. Click on it to make it the current theme. Next click on Theme Editor which should open a page with style.css showing.

You can edit this file directly, but I don’t like working with a small window, it doesn’t allow tabbing, etc., so my choice is to copy and paste back and forth between the WordPress editor and my usual HTML editor.

I also know that at some point I shall always bollox something up, so although I have a pristine copy of the theme on my PC, I don’t really want to have to start completely over when that happens. Therefore I create a working directory somewhere on my PC and after each set of changes I save each file that I work on to it: but only after I have visually confirmed that the latest changes work!

We shall be digging into the HTML soon enough, so for now take my word for it that at this point we need only be concerned with the body and #header parameters:

FIND:

/* globals */

body {
	margin: 0px;
	padding: 0px;
	}

CHANGE TO:

body {
	margin: 0px;
	padding: 0px;
	background: #000;
	}

FIND:

/* header and main body */

#header {
	}
	
CHANGE TO:
/* header and main body */

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

Those who are used to writing #000000 to represent black in HTML, may wonder what happened to three of the zeroes. The answer is that CSS allows you to represent identical pairs of color identifiers with just one letter/number and since part of the value of CSS is to be able to reduce the amount of code we use, it makes sense to take advantage of this facility.

Note that when providing the path for any images we want to use, we can provide full url’s, absolute url’s (prefixed with an oblique and then the full path from our root directory), or most easily, as I did here, simply reference the image directory relative to the directory in which the stylesheet is stored. Note also that you never put quotes around url’s when using them in stylesheets.

The default positioning for background images is top-left, so since that is what I want in this instance, I do not need to be specific. However I have been, because if I come back to this file in a year, I shall be reminded instantly how this image is placed. I must add no-repeat, since repeat is the default and that is not the behavior I want here. Finally I have set the height of the header div to match my graphic and ensure that it is all shown.

Homework

Which is enough to read for one day and - if you want to be creating a site to use yourself - you need to think about your own color scheme and prepare some graphics, before we go much further.

Your header image can be as simple or as complex as you want, but remember it has to be loaded and although we want to impress people, we do not want them to get fixated by it. You can choose any height you like, but I would recommend sticking under 250 pixels so that header is not all anyone sees when they load your page. Stick within 770 pixels wide (although our pages will stretch wider than that) and when finished, call your header image logo.jpg and upload it to the images directory of the Stripped theme.

Useful links

• HTML validator
• CSS validator
• RSS feed validator

Never steal images, not even part images. If you don’t own anything suitable for your header, find a picture among the content that sponsors make available for affiliates, contact the sponsor in question, explain what you want to do and offer a credit on your page. I have done that frequently and to date, no-one has ever said no.