Porting Wordpress themes to Serendipity - Part 5

The first thing we need to do with our sidebar is get the titles and content to work as originally intended. This is actually one of the easiest taks your will undertake and simply involves opening the stylesheet and finding #sidebar h2, and change this to #sidebar h3, then find #sidebar ul ul, #sidebar ol and change this to .serendipitySideBarContent.

Now just delete the following sidebar styles, #sidebar ul, #sidebar ul ul, #sidebar ul ul ul, save the stylesheet, open your browser and view your Serendipity blog. That was easy, and your dusk theme for Serendipity should be looking fairly complete.

There are a few small points you may still want to address, these being the calendar arrows, the feed icon, the spacing between the text and the feed icon when using the freetag plugin, and the width of the quicksearch and template chooser input boxes.

I tried a white arrow for the calendar and it just didn't look right, so I quickly changed the color of the arrows to match the page background which is a lovely blue grey and looks great in our calendar. My images are .gif formatted instead of .png, so we also need to copy the default theme plugin_calendar.tpl and edit the arrow names from back.png and forward.png to back.gif and forward.gif.

The orange xml icon really looks out of place in this theme and unfortunately the new mozilla feed icon that is starting to be used is also orange. Rather than try to be too clever with the feed icon I decided to simply use the colors already used by the dusk theme, and I'm sure you'll agree this looks so much better.

I use the freetag plugin to get my keywords listed by Technorati, however I am constantly annoyed by lack of spacing between the feed icon and the tags in the sidebar plugin. Fortunately this is easily fixed with a simple addition to the stylesheet.

img.serendipity_freeTag_xmlButton {
border:none;
padding-left:2px;
vertical-align:bottom; }

In this style I've removed any border our browser may place around the feed icon, I've also added a 2px space to the left of the icon, and just for good measure, added a vertical alignment to make the icon sit on the line that our text is on. If this doesn't appeal to you, feel free to delete that line, since it is purely cosmetic and my tastes may be different from yours.

Lastly, if you use the quicksearch plugin, or the template chooser, or even the multilingual plugin you may have noticed that in some themes the input box/select box is either longer or shorter than the width of the sidebar. A quick search in the Serendipity forums will list dozens of users who have asked for help on how to fix this. The simple and easy solution is the addition of the following in your stylesheet;

#sidebar input, #sidebar textarea, #sidebar select {width:95%;}