Replacing sidebar titles with images

This short tutorial is about changing the text used in sidebar titles with images so that unusual fonts or artistic headers become possible. This is a really cool effect, and if you’re a fan of the css Zen Garden you’ll know that websites can be works of art.

The designers of Serendipity really did think of all possibilities when they gave every sidebar block its own unique style name.

Replacing the sidebar title with an image is relatively easy, start by creating your image and give it a width and height that compliment your sidebar.We need to edit two of the template files, sidebar.tpl and style.css, your template may not have its own sidebar file so simply copy that file from the default folder and paste it into your template folder.

Using your favorite text editor, open sidebar.tpl and place a <span> </span> around the smarty code that inserts the sidebar title, like this;

<span>{$item.title}</span>

Next, open your stylesheet. You’ll be adding two new classes, the regular class to display your image as a background, and then a second class for the <span> which will hide the usual text that Serendipity inserts.

In my example I’m going to replace my categories title with an image;

.serendipity_categories_plugin {background:transparent
url({TEMPLATE_PATH}img/categories.gif) no-repeat;
height:20px;}
.serendipity_categories_plugin span {visibility:hidden;}

The ‘serendipity_categories_plugin’ style name is found by viewing the source once your blog is displayed in your browser. Find the HTML that sets up the categories and look for the unique stylename that is used for the category title.

Comments are closed.