04 Time to modify

Click Theme Editor under Design and observe the various components of the Theme Editor. The left column contains all the Theme files, ie index.php, header.php, sidebar.php, a few of which will be called into action. Note that different themes will have different components, layouts and different tags and classes. The Coffee Desk is just one example of thousands of themes, but the principle of modifying follows very much the same steps. To get started, the style sheet (style.css) is to be tackled first, so click to view it. The first tag on show is the body, and the first modification we are going to make is to change the background image and default font.
The original tag contained the following:

background-image: url(images/back.PNG);
font-family: Geneva, Arial, Helvetica, sans-serif;

The new version looks like this:

background-image: url(images/siteback.jpg);
font-family: Georgia, Arial, Helvetica, sans-serif;

Now click Update File and switch to the Live tab (see Technique boxout).

05 New header

The header image within a WordPress template is often a major element of the page and will undoubtedly make a big difference to how a page looks. Identify the tag or class that contains the header using the tips suggested in the Technique boxout, and change the background image to the desired image. In our example, the width of the image is the same but the height is not. This has been adjusted accordingly.

This is the original code:

.content_header {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
float: left;
width: 990px;
height: 307px;
}

and the new version:

.content_header {
background-image: url(images/siteheader.jpg);
background-repeat: no-repeat;
float: left;
width: 990px;
height: 366px;
}
06 Header text
The header of the theme currently contains the blog title, as defined in the installation and setup, the tag line “Just another WordPress Blog” and links to Home and About. To define the text, first switch to the header.php file. Under <div class=”header_logo”> you will find the following cod

<span><a href=”<?php echo get_
settings(‘home’); ?>”><?php bloginfo(‘name’);
?></a></span>
<p><?php bloginfo(‘description’); ?></p>
</div>
</div>
<div id=”c_navigator”>

Remove all of this, adding another closing </div> to the end of the code and press Update File. Now the blog title, tag line and original navigation bar will have disappeared, with Home and About positioned at the top of the header. To reposition the text, simply locate the .navigator class in style.css and adjust padding-left: and add padding-top: to position, for example:

padding-left: 80px;
padding-top: 220px;

07 Remove backgrounds

The main content of the theme boasts a background image, which needs to be replaced with a single-colour white background. Locate the #c_content tag and remove the following code:

background-image: url(images/desk.jpg);
background-repeat: repeat-y;

and replace with:

background-color: #FFFFFF;

Now locate .post_top and replace the three lines of background with the following code:

background-color: #FFFFFF;

Inserting this code will remove the background image at the top of individual posts with a white background. Next, locate .post_index and remove:

background-image: url(images/postbg.jpg);
background-repeat: repeat-y;

Now locate .post_bottom and remove any background references to remove the bottom background image.
Each post will now be image-free, and blend perfectly with the white background. Finally, locate .clear_content and adjust Height: 30px to Height: 1px to bring together all of the posts.

08 Post header action

The next step is to add a background image to encompass the post title and details. Head to .post_info and add the following code to the tag:

background-image: url(images/postheader.jpg);
background-repeat: no-repeat;

Also modify the left-padding to 30px and reduce the width by 25 pixels to make sure it all still fits across the page and the text is in a better position. We are going to remove the third line in the post title, which collapses the post header to the default two-line size. To compensate, add the following line: height: 70px; to the class. To remove the Published in text, go to index.php and remove the following line:

<span class=”category”>Published in <?php the_category(‘, ‘) ?></span>.

In order to position the text, go back to .post_info and add padding-top: 7px;. Then remove the same number of pixels from the height. The text in the post title is now invisible (black on black). To change the font and size of the post title, head to #post_entry h2 and change to the following:

font-family: “Georgia”, Tahoma, “Arial Narrow”;
font-size: 20px;

To change the colour of the text, go to .post_info h2 a:link, .post_info h2 a:visited and change the colour. To change the hover colour, go to .post_info h2 a:hover, .post_info h2 a:active and change the colour.

Pages: 1 2 3 4