Breadcrumbs, which always make me think of Hansel & Gretel using them to find their way back home, are a useful addition to any website, especially ones with levels and sub-levels of content. Not so long ago, I posted about adding breadcrumbs to your WordPress blog, and today I want to talk about the styling of breadcrumbs with CSS. It’s incredibly easy, and I’ve included the files for download at the end of this post.
Here’s a screenshot of how I want my breadcrumbs to look:
I’m going to show you how to do this quickly and painlessly. Now, the best coding for breadcrumbs is also the simplest: use an unordered list, like so:
[html]
[/html]
Unstyled, this looks like this:
The magic snippets are:
[css]ul, li { list-style-type:none; padding:0; margin:0; }[/css]
This gets rid of padding and margin, and removes any default bullets- basically resetting your list, giving you a clean slate to work with.
[css]#breadcrumbs { border-bottom:1px solid #ccc; background-color:#fff; line-height: 20px; overflow:auto; font-size:11px; font-weight:bold; }[/css]
This creates a light gray border at the bottom, sets the height, and the font details.
[css]#breadcrumbs li { float:left; padding-left:8px; }[/css]
Here, you’re floating each list element, so that they line up, like so:
Now the fun part:
[css]#breadcrumbs li a { padding:0 24px 2px 0; background:transparent url(blue-arrow.png) no-repeat right center;}
#breadcrumbs li a:link, #breadcrumbs li a:visited { text-decoration:none; color:#003366; }
#breadcrumbs li a:hover, #breadcrumbs li a:focus { text-decoration:underline; color:#0099CC; }
#breadcrumbs li {color:#FF9900;}[/css]
The arrow graphic is presented as a background image- the rest of the styles are link styles, as well as the color orange (#FF9900) for the non-linked text (i.e. the Current Page). And voila:
Yes, it’s that easy. Play around with different images and colors and borders to find a style to best fit the rest of your site. You can also download the files (png and html) I used here to use and/or refer to.
That was less than 5 minutes, wasn’t it?
