This is the first in a series which will dissect a Wordpress theme. Logically enough, it begins with a look at the header and its related CSS. To illustrate this I am using the Blix Redux theme because the header includes an image used as a background, with text showing on top of it.

Note: Add your site title and a brief description of your blog inside your WordPress admin.

In WordPress’ theme editor open up the Header file and look for the HTML for the header block itself. Then open up the Stylesheet and look for the CSS relating to the header block and the entries within in. And we hit the first gotcha: this author has separated structure and decoration to the point that he uses two separate CSS files and calls them from within the “official” WordPress stylesheet. This “wrinkle” makes no difference to the principles involved.

In Header (header.php):
<!-- header ................................. -->
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h3><p class="description"><?php bloginfo('description'); ?></p></h3> 
</div> <!-- /header -->


In Stylesheet (style.css):
@import "layout.css";
@import "shadesofgray.css";


In layout.css:

/* reset
--------------------------------------------------*/
body,h1,h2,h3,h4,h5,h6,p,form,fieldset {margin:0;padding:0;}

/* body
--------------------------------------------------*/
body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:75%;
  line-height:1.6em;
}

/* headings
--------------------------------------------------*/
h1 {font-size:30px;}

/* links
--------------------------------------------------*/
a {text-decoration:none;}

/* paragraphs, lists, etc
--------------------------------------------------*/
p {
  margin:0;
  padding:0 0 18px 0;
}

/* header
--------------------------------------------------*/
#header {
  height:150px;
  padding:0 0 0 18px;
}
#header h1 {
 /* display:none; This will hide the text in your header */
  padding-top:50px;
}


In shadesofgray.css:

body {
  color:#414141; /* provides the color for the description line */
}

/* headings  hso: all headings & mouse over
--------------------------------------------------*/
h1, h1 a, h1 p
  {color:#FFF;}
h1 a:hover
  {color:#FFF;}

#header {
  background-color:#fff;
  background-image:url(images/shadesofgray/logo.jpg);
}

The HTML of the header block is very simple. It contains an h1 tag around the blog title which is linked to the site’s base URL. Then there is an h3 tag with a paragraph tag inside it, which holds the description of the site.

Hopefully I have identified all the relevant CSS entries. I tend to feel that while this style of CSS presentation may be technically correct, it does nothing for ease of use. Anyway to summarise: the header block is 150 pixels tall (to match the background image) and it has white (#FFF) as a background color, for those who have images turned off. 50 pixels padding has been applied to the top and 18 pixels to the bottom. As it happens, the choice of background color might be a poor one, because the h1 tag has been set with no margins or padding, 30-pixel font size, no underline, and also white in color. The h3 tag has no margins or padding, the paragraph (p) tag within it has no zero margins but an 18-pixel bottom padding. The site’s description is going to take its size and color from the default body settings and both h1 and h3 will be bold by default.

The most simple change would be to use another image of the same dimensions (690×150) and either overwrite the orginal or save it as you like and change the path in the background-image parameter. We could use a smaller image, say 670 x 150 and give it a colored border:

/* header hso: header backgound color --------------------------------------------------*/
#header {
  background-color:#4E7F01;
  background-image:url(images/shadesofgray/logo.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}

Changing colors is easy. Let’s alter the h1 display and give the color of size of h3 specific settings. We shall also have h3 show as non-bold and while we are there, let’s move the text right and down some:

In layout.css add to:
/* headings
--------------------------------------------------*/
#header h3 {
	font-size: 1.4em;
	font-weight: normal;
	}
	
In layout.css:
/* header
--------------------------------------------------*/
#header {
  padding:0; /* change so the lowered text does not push the bottom of the block down */
  }
#header h1 {
  padding-top:100px; /* change from 50 */
  padding-left: 120px; /* add */
}
#header h3 {	/* add */
  padding-left: 120px;
}
#header p { /* add to prevent the block being expanded */
	padding-bottom: 0;
	}
	
	
In shadesofgray.css add to:
/* headings  hso: all headings & mouse over
--------------------------------------------------*/
#header h1 a {
	color: #FF2E37;
	}
#header h1 a:hover {
	color: #FF2E37;
	}
#header h3 {
	color: #4AF017;
	}

The result is hardly aesthetic, but it does illustrate the ease of making changes, providing you approach them methodically. All changes in size, color, positioning (both of foreground text and background image) follow the same principles.

There are two tricks which come in useful if you do not want your image sullied with foreground text, but you want to keep the text in your code for its search engine potential. The first is simply to make it not display, which is easier, but removes the link back to your root URL which - for better or worse - many blog surfers have got used to. The second, although you will need to remove the h3 tag completely for this to work properly, involves moving the h1 tag off-screen while leaving the whole header image linked:

To leave all the text but make it invisible to visitors, in layout.css add:
/* header
--------------------------------------------------*/
#header h1 {
  display: none;
}
#header h3 {
  display: none;
}

To have an invisible h1 but leave the whole header image clickable, in header.php comment out (or delete) the h3 line:
<!-- header ................................. -->
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<!-- <h3><p class="description"><?php bloginfo('description'); ?></p></h3> -->

In layout.css:
/* header
--------------------------------------------------*/
#header h1 {
  /* padding-top:100px; comment out this line */
  /* padding-left: 120px; comment out this line */
}
#header a { /* add */
  display: block;
  height: 100%;
  text-indent: -500em;
} 

That last technique might be most useful when any header graphic already included your site name and other details. The first technique, although easier to implement, might work best if only the h3 tag were rendered invisible. Once you are happy with your changes, delete any code which so far you have only commented out.

Obviously a lot more changes are possible and it isn’t practical to attempt to anticipate them all. The key to making such changes is: first identify the relevant HTML; second identify all the CSS which relates to it; and third, understand what the CSS is actually doing. Initially make changes by commenting parts out rather than by deleting them. Comment what you have changed (I haven’t done this thoroughly here, wanting to keep what you are seeing relatively uncluttered) and test each group of changes before moving on to the next. Nothing is worse than changing a whole page, seeing the layout has been thrown out of whack and not knowing where to start looking for the problem.