Urban Giraffe

Step 3 - Styling the sidebar

So far we’ve talked about the sidebar PHP functions, and made one or two changes. The sidebar still looks very basic, so we will now look at styling it.

If you remember, the sidebar consists of an unordered list, with each list item being a section. Each of these sections typically consists of a heading, followed by another unordered list. By default, an unordered list will be prefixed with a bullet-point. This is definitely not what we want for the heading.

The first step will be to remove the first level of bullets:

#sidebar ul
{
  list-style: none;
}

Unfortunately it removes bullets from all unordered lists – including the sub-lists. This can be fixed with another style:

#sidebar ul ul
{
  list-style-image: url(images/listitem.png);
  list-style-type: circle;
}

This puts the bullets back for unordered lists that contain sub-lists. Note that here I have used an image as a bullet and, if this cannot be found, it falls back to a circle bullet point.

This isn’t quite what we expected because the bullets are too far left, and there is no hierarchical indentation. The reason is the global style we introduced in the previous guide, where all margins were reset to zero. A small change brings everything back:

#sidebar ul ul
{
  list-style-image: url(images/listitem.png);
  list-style-type: circle;
  margin-left: 20px;
}

And now we have the bullets as we want:

Remember that this and all other styles are not optimised. This is a guide to understanding a WordPress theme and will make use of as much verbosity as necessary. It is not a guide to creating the smallest, most efficient CSS code.

Next I will add some colour and a border to the sidebar and headings.

This looks complicated but condenses to a few changes:

• Colour is added to the sidebar and the headings (3, 4, 10)
• A border is placed around the sidebar, and the top and bottom of the headings (5, 11, 12)
• The heading font is defined at 1.2em so it is standard across all browsers (13, 14)
• The heading margin and padding are changed to provide more space (15, 16)

The style is almost done, but we can still tweak the spacing. The most obvious change is to add more space between the heading and the previous list. We could add a top margin to the heading itself, but this would push the first heading down, and this doesn’t look good. Instead we add a bottom margin to the list style:

#sidebar ul
{
  list-style: none;
  margin-bottom: 10px;
}

This does the trick, but introduces a margin for every list, including the sub-lists:

We need to reset the margin for these sub-sub-lists.

#sidebar ul ul ul
{
  margin-bottom: 0;
}

And everything looks fine: