Initial Changes

I want a menu of pages – About, Contact, Submit, Donate etc – above the title on the left hand side of the screen; whilst on the right hand screen I would like a search box. Currently we have a menu, but it is underneath the title. It is easy to move this, we simply need to cut and paste the code in the header.php file. At the same time, I don’t want the ‘skip to content’ link that currently appears in the header as I do not think it is needed, seeing as this blog design is going to focus on the content anyway.

So, you can start by deleting the following code to remove the ‘skip to content’ link:

Click to Enlarge

Refreshing your blog will show you that this link has now gone, but you are still left with the page menu:

Click to Enlarge

The PHP inserting the page menu is as follows: . Currently this is wrapped in the div id “access”, we can change this to something more suitable for our purposes, such as “top_menu”, and move the code above the title and tagline. You should end up with something like this:

Click to enlarge

Refreshing your blog will now show that the menu has moved above the blog title like so:

Click to Enlarge

Now the menu is in the right place, you can start to style it.

Styling the Top Menu

First of all, you need to consider how wide the menu can be. We know that the wrapper is 1000px and we want to save perhaps 200px for a search box, so, to be on the safe side let’s make the menu 750px wide – which leaves plently of room for a search box and a suitable gap between the two. Now let’s add the extra pages that we want to appear on the menu: contact, submit article, donate, advertise so that we have our pages:

This is the menu without any styling, let’s add some to make it suitable for a top menu. Firstly, let’s set the width of the division and float it to the left (at the same time we will create the blank division ready for the search box:

#top_menu {
width: 750px;
float: left;
}
#top_search {
width: 200px;
float: right;
}

Insert this code into your stylesheet, then add the #top_search division into the header, below the #top_menu division. At the same time, we had better make the #header division (where the blog title and tagline live) 1000px wide, to ensure that it stays below the other divisions:

#header {
clear: both;
width: 100opx;
}

Now, let’s add the simple search box to get it started, copy and paste the following code between the ‘top_search’ div (remember to replace the ‘action’ url with your own blog address):

Click to Enlarge

Click here for search box code (.txt file).

This should then give you a working search box like so:

Click to Enlarge

Make sure it is working by performing a search. Once you have it working you can start to style the menu. First of all, it would be good to get rid of the bullet point and make the menu items line up horizontally. To do this, use the following code:

#top_menu ul {
list-style-type: none;
float: left;
}
#tope_menu li {
float: left;
}

Copy this into your stylesheet, refresh your blog and you should see the following:

Click to Enlarge

As you can see, the overall menu is indented from the left and each item is too close to each other. To remove the indentation from the left add margin: 0; padding: 0; to #top_menu ul. To add some spacing between the list items add margin-right: 10px; to #top_menu li. You should now have the following:

Click to Enlarge

We now have a horizontal menu that is nicely spaced. Now we can start to change the look of it. Before we do this, let’s just add one more thing to the stylesheet: an overall font size. Do this by adding the following code:

body {
font-size: small;
}

You’ll now see that all the text is slightly smaller. All this does is give you a set base to work from, so all the elements you style now can have a font-size defined as a percentage. For example, of you want your top menu to appear bigger then you can set the font-size to 150%. If you wanted the menu font slightly smaller you set the font-size to 80% for example. We can use percentages to give us plenty of control over the font-sizes in a browser friendly way throughout our blog.

So, as well as choosing the appropriate size font for our menu, we also need to style the links. Most people prefer to remove the underline from links and change the colour. We also might want to specify that the colour changes as you hover the mouse over the link – or whether the link becomes underlined when you hover the mouse over it. You can play with this however you like, I am setting my top menu links with the following code:

#top_menu li a {
font-family: "century gothic", "Lucida Grande", verdana, arial, sans-serif;
font-size: 150%;
text-decoration: none;
color: #900;
}
#top_menu li a:hover {
color: #4a0000;
text-decoration: underline;
}

Which makes my menu look like this:

Click to Enlarge

Remember, this can easily be tweaked at any time to fit in with the way the site develops. You can spend as much time as you want adjusting spacing, font style, font sizes, colours, hover effects and so forth (you’ll see my menu has been tweaked since to add a line to seperate each item for example). Just one word of caution: make sure you have several favourite fonts listed under font-family to ensure that every user has at least one of them on their PC.

We can now adjust the search box, most importantly we just want to remove the bullet point for now:


li#search {
list-style-type: none;
padding: 0;
margin: 0;
}

This will have removed the bullet point. To alter what text appears in the search box go into the header and adjust the following code:

Click to enlarge

If you add more text then you will need to increase the box size until all of the text is displayed.

Styling your Blog Title

Now that we have a nice menu and a working search box – this can be styled more at a later time, but altering a search box is quite complex and not really a top priority – we can style your blog title.

To alter your blog title, ammend the following code to suit your blog and add it to your stylesheet:

#header h1 a {
font-family: "old english text MT", chiller, "earwig factory", impact, biondi, "bookman old style", "britannic bold", byington, serif;
font-size: 250%;
color: #000;
text-decoration: none;
}

To alter your blog tagline (or description) use the following code.

#blog-description {
font-family: “bookman old style”, “britannic bold”, byington, serif;
color: #000;
font-size: 140%;
}

Notice on the following screenshot that the title has shifted down, away from the top menu, and also some spacing has been added underneath the tagline. You can set this by adding: margin-top: 40px; margin-bottom: 20px; – or whatever relevant values you want to the #header division in your stylesheet:

Click to Enlarge

Also notice that I only style the basic link, I did not style the hover property. This is because I do not wish any hover effect when a mouse hovers over the title. You can add an hover effect if you wish.

Subscribe options and Twitter link

It is important to place your subscribe options in a visible place and as I am on Twitter I also want a link to ‘Follow me’ to be quite prominent. We are going to do this by adding some code underneath the ‘header’ division. I am using the following images which you are free to download and add to your own blog:

Copy the code below (from the .txt file) into your header.php, remember to change the website details for the comments and post feed, as well as the Twitter link (paste below the closing tag of the ‘header’):

Click to Enlarge

Get the code (.txt file)

Paste the following code into your stylesheet:

ul#subscribe-options {
padding: 3px;
margin: 0;
list-style-type: none;
float: left;
width: 1000px;
background: #900;
-moz-border-radius: 5px;
}
ul#subscribe-options li {
float: left;
margin-right: 10px;
}
ul#subscribe-options li a {
font-family: Myriad, univers, "Dax Regular", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #fff;
font-size: 100%;
padding: 0;
text-decoration: none;
}
ul#subscribe-options li a:hover {
color: #ccc;
text-decoration: underline;
}

Part 4 Checklist

Congratulations, your header is now complete. Before moving onto the next part, please ensure that you have:

• Removed the ‘skip to content’ link
• Moved the top menu above the ‘header’ division (blog title and description)
• Added the relevant pages to the top menu to suit your blog
• Added the search box and checked that it is working
• Styled your blog title and blog description
• Adjusted all of the various spacing requirements, added all the relevant floats to your header items to ensure that everything is properly aligned
• Added the relevant links for subscribing to posts, comments and Twitter (making sure you have changed the links to suit your blog)

Part 5 will be coming shortly and will deal with styling your content and sidebars.