Urban Giraffe

Changing the links

We’ve styled and coloured the main part of the sidebar, but our links are still using the default colours. Let’s change that with two styles:

#sidebar a
{
  text-decoration: none;
  color: #4A2C00;
}
 
#sidebar a:hover
{
  text-decoration: underline;
}

And the result is a standard colour scheme:

Search style

The search has not yet been changed and looks pretty ugly in the default state. A few styles and this is transformed.

#searchform
{
  text-align: center;
}
 
#searchform input
{
  border: 1px solid #4A2C00;
  background-color: #FDE5C3;
}
 
#searchform #s
{
  width: 50%;
  background-color: white;
}

Now the search looks like this:

Calendar style

A final step, if the PHP code has been enabled, is to style the calendar. The calendar is a complicated element and is constructed using an HTML table. It requires substantial styling to get it looking just right.

#wp-calendar
{
  border: 1px solid #FDE5C3;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 15px;
}
 
#wp-calendar th
{
  background-color: #FDE5C3;
}
 
#wp-calendar a
{
  border: 1px solid #4A2C00;
  background-color: white;
  display: block;
}
 
#prev a, #next a
{
  border: 0;
}
 
#wp-calendar caption
{
  text-align: center;
  width: 100%;
}

These styles modify the table elements, adding a lot more space. The table headers th are given colour, and the days with posts are highlighted in white. A special style is made for the ‘next’ and ‘prev’ elements so they do not contain a border. This produces an output of:

Putting it all together

The sum total of this part of the guide has been to produce a final sidebar. It’s simple but concise, and there are many ways to change and enhance it further. Putting it in context of the themes from part 2 we get:

Conclusion

In this part of the guide we have completed the sidebar and produced something that fits in with the previous themes. Our focus has been on the WordPress PHP functionality and we have discovered that it is easy to add elements by making use of the WordPress Codex.

The next part will tackle the most important part of any blog: the content. After this the theme will be mostly finished, with a final guide bringing everything together.

Read part 4.

Support

Please direct all support questions to the Theme Customisation support forum. Any support questions left on this page may not be answered.