Theming Serendipity

When I look at other blogging engines and CMS's I often marvel at the design of their header, and the sites that impress me the most are those that make full use of their header to either give the visitor useful information or allow them to interact more with the site.

As I learn more about usability of webpages I'm realising that the sidebars are the wrong place for some of the plugins we see in Serendipity themes. I particularly dislike seeing the site search form in the sidebar, and I know this is my own preference that probably isn't shared by everyone, but for those designers who think like me, here's a quick easy way of placing a search form with submit button into your header, and also making sure that the quicksearch form won't display in the sidebar. Read More

A Serendipity user emailed me about changing the sidebar in my andreas08 pink theme. She loved the header and background but thought her sidebar area was lost in a sea of grey text. Fair enough I thought, blogging is a deeply personal experience and if she wants a different sidebar that is her right.

So we chatted a bit and worked out we could give the sidebar title a dark pink background, and a light pink background to the rest of the sidebar block, but with a darker border to give it definition. Dave Cummins helped me understand the beauty of framing elements, which I think really helped with this modification to the theme. Read More

Have you ever wanted a breadcrumb trail on your blog? Most themes for Serendipity don't include a breadcrumb, my conversion of andreas06 includes one, and you could easily add one to any theme.

Giving your users an extra cue to help them navigate around your blog enhances usability, could help with your SEO initiatives, and definitely looks very groovy. The following Smarty code is ready to be copied and pasted directly into your Serendipity blog theme, and could be placed above your site header, just above your content, or even in the footer of your page. Read More

All of our efforts to date have given us a working theme ported to Serendipity, but there are a few small things that still need work. Download the completed dusk theme for Serendipity.

The previous and next page links at the bottom of the overview page look like they're squashed into a space that is too small. I've always been a fan of white space in websites so I usually add a little padding or margin, and in this case we're going to adjust the margin. I've also changed the name of the style used in entries.tpl to pageFooter instead of entryFooter.

.serendipity_pageFooter {
margin: 2em 0;
font-size: 0.92em;
}

As you can see I've added a 2em margin to the top and bottom of the pageFooter, I've also kept the font-size the same as our other entry footers. Read More