This is the next part in the WordPress series. In the last part How To Get Started Creating Web Pages I introduced you to some very basic HTML and CSS. If you missed it and haven’t had any experience of web design then I strongly recommend that you go back and do the exercise before proceeding with this lesson.

In this installment, we are finally going to modify a WordPress theme. You shall:

• Set some glabal values, like padding, margins and fonts.
• Style the Header
• Style the Navigation bar.

Preparation

The theme I have chosen is the SandBox theme, it is clean, well established and built for modders. So go ahead download, unzip and copy it into:

FLASHSTICK:\wordpress\wp-content\themes\

Then startup FireFox, login to the WordPress Amin panel (http://localhost/wordpress/wp-login.php) and under Presentation select the Sandbox theme. When I work on a theme, I turn of all the plugins, so that they don’t influence the layout.

Once I have finished the theme I then turn them on one at a time and check the theme is still good to go. To do this go to Plugins and click on deactivate for each plugin you have.

Before we get started there are three things I recommend you do.

• The Sandbox theme comes with a readme.htm, you should print this out for reference as it contains a lot of useful information on the classes used and some reference material. View it in your browser and print from there, it’s path is:
  
FLASHSTICK:\wordpress\wp-content\themes\sandbox\readme.html

• Create a folder in HTML-kit for easy access to the theme files.
  • Startup HTML-kit and select Workspace > Add Folder / FTP Server > Add Local / Network Folder…
  • Click the Folder icon on the Folder Path line and navigate to your Flash Stick.
  • Type in a Display Name, I used flash-memory.
  • Hit the OK button to accept your entries and create the Folder.

  The flash-memory folder will appear in the right hand pane.

• You should add a plugin to HTML-kit. You shall be editing mostly CSS, rather than typing it all in you can enter most of it from drop-down menus. To down load the plugin, click on the (1) Updates tab in HTML-kit, in the (2) text-box type tmcss and then click the (3) icon to the right. Once it has downloaded, install it. After it has finished close down HTML-kit and then start it again to activate the plugin. You shall see a new tab TM CSS, this is what we shall be using.

Overview

In the right hand pane click on the folders to drill down to:

flash-memory > wordpress > wp-content > themes > sandbox

In there you will see a number of php files, the readme file, the screenshot file and style.css the CSS file. The php files contain the information that appears in your browser, the css file determines the appearance of that information. As we want to change the way the pages look, almost all our work will be in modifying style.css.

The Style Sheet

In HTML-kit double-click on the style.css to view its contents. The first eight lines are comments. Comments start with /* and end with */. You can put anything you like in between these character pairs, it will not cause any errors and is basically invisible to the browser. In this case, it tells you about the author and where to get the theme etc. This section must be at the start of a themes style sheet.

Next we have the lines:

/* Two-column with sidebar on left from the /sandbox-layouts/ folder */
@import url('sandbox-layouts/2c-l.css');


The first line is another comment, the second line is more interesting, it imports another file that determines the overall layout of the web page. In this case you have a 2 column theme with the side bar on the left.

In your browser, sign-out of the admin panel and go to the blog’s view at http://localhost/wordpress/. See the sidebar, it’s on the left. To move it over to the right do the following:
Change the line:
@import url('sandbox-layouts/2c-l.css');
to:
@import url('sandbox-layouts/2c-r.css');
Save the changes, in your browser click on the refresh button. The sidebar should jump from the left to the right.

In the sandbox-layouts folder there are a total of six different layouts that range from single to three column displays for your blog. All you need to do is change the 2c-r.css to the layout filename that you want. For this exercise I am going to stick to having the sidebar on the right.

Global Values

Different browsers apply different default values to the padding and margins of the page and it’s elements, so I like to set them all to zero, this gives a better chance that the layout will look the same on all browsers.

There are two types of font, serif and sans-serif, the serif fonts have those little Quot;tailsQuot; on all the letters. An example of their use is if you look at a newspaper. The headlines are usually in a sans-serif font and the story text is in a serif font. This is fine on paper, but on screen it works better the other way round.

If you look at the blog, you will see that all the text is rendered in a serif font so we will change that as well as set it’s default size.

Two colors need to be set, the color of the background and the color of the text. Here you shall set them to a white background and black text. This gives the best contrast for readability.

The last thing to set is for the images. If you have an image inside a link so that when you click on it you go to another page (like a button), the browser will put an ugly blue border around the image. We shall make it so there is no border. All of the above is accomplished by entering the following code just after the @import line:

body {
 padding: 0px;
 margin: 0px;
 border: none;
 font-family: verdana, arial, sans-serif;
 font-size: .9em;
 background: white;
 color: black;
}
div {
 margin: 0px;
 padding: 0px;
}
img { border: none; }


Save the file and then refresh the browser display, a lot better, yes? One other thing that I don’t like is the underlining of links. You can remove all underlines in one go by adding:

a { text-decoration: none; }

after the previous css. Save it and refresh the browser. The display looks a lot cleaner now and you can still tell what text is a link bt it’s color.

Changing The Header

At the moment the header has three pieces of text in it, the blog title, the byline and "Skip to content". A bit boring as it stands. You can either change the look of the text and the header colors or put an image there instead. With this layout adding an image could be a problem because as the you change the browser width, the header’s width will change with it.

One way to overcome this is to have an image repeat itself horizontally across the header to fill it no matter what it’s width is. To do this, locate the line:

div#header{text-align:center;margin-bottom:2em;}

And change it to:

div#header{height:100px; width: 100%;}


Save it and refresh the browser. The Blog name and byline are now over on the left. Before we go any further, we need to decide what colors to use. I have decided on a dark to light blue gradient with white title and black tag-line. So I went into PhotoShop, and created the gradient on a canvas 10×100 pixels and saved it as hdr-gradient.jpg. You can right-click and save the image to the right of this text for your example.

The Sandbox theme does not use any images so go to

FLASHSTICK:\wordpress\wp-content\themes\sandbox\

And create a folder called images. Copy hdr-gradient.jpg to the image folder you just created.
In HTML-kit:
Change
div#header{height: 100px; width: 100%;}
To
div#header{height: 100px; width: 100%; background: url(images/hdr-gradient.jpg) repeat-x;}
This adds the image background and repeats it only in the horizontal (x) direction.
Below this line add:

#blog-title, #blog-title a, blog-title a:hover{
 color: white;
 margin: 0px;
 padding: 0px;
 font-size: 2em;
}
#blog-description { font-weight: bold; }

Where did I get these names? In HTML-kit, double-click on header.php. Lines 20-23 are the header div. Inside of it you will see both blog-title and blog-description both are IDs. Inside of blog-title there is a link, this translates to #blog-title and #blog-title a. The third one (a:hover) needs to be included so that the header does not change color when the mouse is over it.

While you have header.php open go to line 26 and delete it. This is the skip to content text which isn’t really needed in this case. Save both header.php and style.css and refresh the browser to see the result. You should see something like this:

If you just wanted a plain color background to the header then you would do more or less the same as above, except you would not need the image folder or the image and the css would be:

div#header{height: 100px; width: 100%; background: #6d7df9;}
#blog-title, #blog-title a, blog-title a:hover{
 color: white;
 margin: 0px;
 padding: 0px;
 font-size: 2em;
}
#blog-description { font-weight: bold; color: white; }

The #6d7df9 is a dull medium blue kind of color.

The Navigation Bar

The nav bar looks a bit dull, let’s brighten it up a bit. Before doing that, there is one button missing from the nav bar - the home button. So we shall add that first.

If you look at header.php, line 27 you will see <?php sandbox_globalnav() ?>. This is a piece of php code and the two brackets (), mean that this is a function that generates all the buttons. This function will be found in the file functions.php so double-click on it. Lines 3-8 is the code for this function where we shall add the home button.

First of all in header.php go to line 25 and change it to:

<div id="access">
 <?php
   echo '<div id="menu"><ul><li class="page_item page-item-1"><a href="';
   echo bloginfo('url');
   echo '" title="Home">Home</a></li>';
   sandbox_globalnav() ?>

This adds the button. Then go to functions.php and delete line 4:

echo '<div id="menu"><ul>';

Save both the functions.php and header.php then refresh the browser and you will see the extra Home button. Now I don’t know about you, but for some reason I like the navigation buttons to be in uppercase. To do this, in style.php, line 40 and change it to:

div#menu ul a{font-weight:700;text-decoration:none; text-transform:uppercase;}

Next up you want the buttons to look like buttons, The buttons are going to be a medium blue type color. To do this we add a border to each of the links like this in the style sheet:

• Line 40 and 43, change #eee to #4c5ff2. this will change the background color of the navbar and buttons.
• Line 40, add color: white; border-right: 2px solid #313ea8; border-left: 1px solid #a7b1fb; This adds the "dividers" between the buttons.
• Line 39, change height from 1.5em; to 1.6em;
• Right after line 40, hit enter and add the following line:
  div#menu ul a:hover { background: #3845ad; color: #f4ed7e;}.

This will make the button a darker blue and the text will turn yellowish when the mouse hovers over the button.

Wrap Up

That’s the navbar finished, and this post is starting to get a bit long, so we’ll finish there for now. Here are all the modified files,functions.php, header.php and style.css the extensions have all been changed to txt, right-click and download, then change them all back to php except for style.txt which should be style.css.

Next time we shall continue to modify a WordPress theme by styling the sidebar. As usual, if you have any problems or questions leave a comment here.