Theming Serendipity

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. Read More

Have you ever thought it would be great if you could make the latest entry in your Serendipity blog stand out, perhaps use a different color, or even add some imagery to let your visitors know this entry is special?

Using some Smarty code and css we can, imagine how much more usable your blog would be. Even more so if your blog is part of a network. If you run competitions, review new products, or perhaps comment on breaking news, your site visitors will appreciate seeing at a glance which entry is most important.

So what could your latest entry or sticky post look like? Well, CSS allows us to do so much, you could literally change every single style. In my experiments I changed the background color around the entry title, in another I added a background image which reads 'Breaking News', but you could go so far as to give your entry different font settings, adjust your margins and padding, perhaps even remove the entry footer so your latest entry looks like an html box.

So how do you go about making your latest entry stand out? The key is to understand that all entries on overview pages are given a unique id starting at 0 which is the top (first) entry. Once we understand this, we also need to make sure Serendipity only changes our first entry if it also appears on the startpage otherwise the top entry of every page will adopt our new styles. Read More

I've been experimenting with the new theme configurator for Serendipity. I'm hoping most users will upgrade to version 1.1 of Serendipity once it reaches a stable state although being a realist I know this isn't going to happen overnight.

This means we may end up with a selection of new templates that are compatible with the theme configurator but cause issues for users with older versions of Serendipity.

The solution is to make Serendipity perform a simple check to see if the user has a compatible version of Serendipity installed, and then provide alternative code if they don't. Read More

Some users of Serendipity blog don't include an entry title, usually this is a mistake and is corrected when they view their blog, but there are times when the mistake isn't corrected. In situations like there there are two methods the template designer can use to ensure an entry title is always displayed.

You could include the first few characters of the post in the title, by simply adding some Smarty code to your entries.tpl, like this;

<h4 class="serendipity_title">
<a href="{$entry.link}">
{$entry.title|@default:$entry.body|
truncate:200:" ..."}</a>
</h4>

The reason the truncate has been set at 200 characters is because this allows even very long titles to be used, however it also means that any entry that does not have a title, will now display the first 200 characters of the entry body.

An alternative, is to use the entry id instead of the first few characters, and this is the approach I'm generally following with all my recent templates. Its an elegant solution, doesn't ruin tight designs, and fits with the fix Garvin applied to the recent entries plugin which wouldn't display a link to the entry if the title was missing.

<h4 class="serendipity_title">
<a href="{$entry.link}">
{$entry.title|@default:$entry.id}</a>
</h4>