Create your own WordPress theme

09 Date background

With the post header in place, next up is to replace the date background image and position the day and month. Head to .calendar and change the background-image to the new option. For ease of use, we have made our image the same size as the original size. To swap the date and month around so that the month, ie AUG is at the top, go to index.php and locate <div class=”calendar”>. Now swap the following two lines around, so “month” is the first line:

<p class=”date”><?php the_time(‘j’); ?></p>
<p class=”month”><?php the_time(‘M’); ?></p>

To modify position, font size and colour, first go back to style.css. Locate .date to change the font-size and colour and adjust line-height to position horizontally. Add padding-left: 2px; to position month text. It will be a case of modifying and testing until the exact combination puts the text in the right place.

10 Sidebars

The following classes and tags (.bottom_sidebar, .top_sidebar, .div_wrap_sidebar and .widget_sidebar h2) all contain the background images that make up the sidebars. First locate .top_sidebar and .bottom_sidebar and delete any background-image references, ie background-image: url(images/side_btm.jpg); background-repeat: no-repeat; background-position: top;. Now locate .div_wrap_sidebar and again remove any background image references. Head to .widget_sidebar h2 and add the new background in background-image: url(images/image.jpg); and change font-family: “Trebuchet MS”, Tahoma, “Arial Narrow”; to font-family: “Georgia”, Tahoma, “Arial Narrow”;.

Now adjust the following (as shown) to match the current theme and style:

height: 44px;
line-height: 22px;
font-size: 1.4em;
color: #FFFFCC;

This effectively styles all the sidebar widgets except the calendar. Locate #wp-calendar caption and change the font-family to Georgia, color to FFFFCC, background-image to your choice and adjust the height and line-height as before (see below). This will match up the calendar with all the other widgets in the sidebar.

#wp-calendar caption {
font-family: “Georgia”, Tahoma, “Arial Narrow”;
font-weight: normal;
text-align: center;
width: 230px;
color: #FFFFCC;
font-size: 1.4em;
background-image: url(images/rightcolumnback.gif);
background-repeat: no-repeat;
background-position: center;
height: 44px;
line-height: 35px;
}

11 Footer fun

The final major step in modifying a theme lies in the footer. The Coffee Desk theme contains a number of background images that are going to be removed and the text styled to match.

The following class and tags (recent_bottom, recent_top, footer_panel, footer_bg and #c_footer) all contain background images relating to the footer. Replace all instances of background images with background-color: #FFFFFF;. This will replace all the background images with a white background. To change the title text, go to #c_footer h2 and modify the font as follows:

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

Finally, to put the footer image into the theme, modify the #footer_bg tag as follows:

#footer_bg {
float: left;
width: 990px;
padding-right: 25px;
padding-left: 25px;
background-image: url(images/footer.gif);
background-repeat: no-repeat;
background-position: bottom;
background-color: #FFFFFF;
padding-top: 10px;
padding-bottom: 30px;
}

Note that the image is positioned at the bottom of the tag and the tag is also given a background colour. Without the background colour, the tag is effectively transparent.

Pages: 1 2 3 4