Serendipity calendar with background images

You would think this would be an easy thing to do in serendipity, and you would be right, it just takes a little bit of thought and imagination. Human ingenuity is a marvellous thing, and even though I'm not a programmer I decided to have a play with the calendar, and in my 'Pink Lilies' theme I finally succeeded in styling my calendar just as the original designer of the template had intended. If you look at the image above you'll see that every day with a date in it also has a background image, and days that are empty have the same background color as the rest of the table. In addition, days that contain entries have a darker background image, and today's date is styled with a red background.

Notice that the second image is different. In this image the author has also posted an entry today, and our styling makes it easy for the user of the blog to see days that have posts, and also still see which day is today.

The calendar template file
Producing the actual colors and background images for the calendar you see in these images is beyond the scope of this tutorial. Instead I'm going to explain how I got Serendipity to recognise whether a cell is empty or not empty. To style these differently we need to provide a css class to our browser so that it can apply the style specified in our stylesheet. Problem is that the default calendar doesn't have this styling.

{foreach from=$week.days item="day"}
<td class="serendipity_calendarDay {$day.classes} Not_Empty{if not $day.name} Empty{/if}"{if isset($day.properties.Title)} title="{$day.properties.Title}"{/if}> {if isset($day.properties.Active) and $day.properties.Active}<a href="{$day.properties.Link}">{/if}{$day.name|@default:" "}{if isset($day.properties.Active) and $day.properties.Active}</a>{/if}</td>
{/foreach}

The code you see above is found toward the end of the plugin_calendar.tpl smarty template file. It looks pretty intimidating, and I'm not going to explain it all. Most of us never have the need to change this code anyway, I've underlined my additional code so you can see where it fits in. The entire section of code I added is within the class tag of the <td> that makes up the rows with the dates.

Basically what my code does is tell Serendipity to add a class 'Not_Empty' if the cell contains a date, but if in fact the cell is empty because the array containing the variable doesn't have a corresponding day name, then also add the class 'Empty'. I'm sure this could be tidied up considerably and perhaps someone reading this tutorial could add a comment describing alternative solutions. On the other hand it works very well as can be seen from the images.

Styling the calendar classes
I've added two new classes to the calendar plugin, but we also need to style the classes that are originally created by the plugin.

td.serendipity_calendarDay {
color: #555;
font-weight: normal;
padding: 2px 2px;
text-align: center;
border: 1px solid #CCBE92; }

td.Not_Empty {
background: url({TEMPLATE_PATH}img/day.gif); }

td.Empty {
background: url({TEMPLATE_PATH}img/blank.gif); }

td.Today {
background: #6E2224;
color: #FFF; }

td.Active a {
display: block;
text-decoration: none;
color: #6E2224;
background: url({TEMPLATE_PATH}img/day2.gif); }

td.Active a:hover {
background: url({TEMPLATE_PATH}img/day.gif);
color: #E7768C; }

The above styles only change the cells that include the dates, and you'll need to download the Pink Lilies theme if you want to use the complete calendar seen in the above pictures.

td.serendipity_calendarDay is the container style for every cell that includes the date. These are the rows beneath the month name and day names.

td.Not_Empty is one of the newly created classes, and tells Serendipity to pace a background image on any cell that contains a date. In this case it is a light silver background image.

td.Empty is the other newly created class, and resets our cell back to the default established by td.serendipity_calendarDay. Without this class, every cell would contain a background image, and some theme designers may want that, but in this case we don't.

td.Today changes the styling for today's date only, and adds a background colour instead of a background image. This class needs to be positioned in the stylesheet before the active classes otherwise it will override them. Try changing the order of this classes in your stylesheet and you'll see what I mean. CSS means Cascading Style Sheets, and your browser reads and applies the styles from beginning to end.

td.Active a gives different styling to any cell that contains a link to days that have posts. This is where the background image changes to the darker bronze-like color. We've also changed the text color to a maroon color.

td.Active a:hover, our final class, and any cell that conatins a link to days that have posts get the original background image back again. We've also changed the text color again.