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.
The footer that contains the links to the beccary and weblogs.us websites doesn't look like it should, and a quick glance in the stylesheet shows us that the links are styled with a paragraph <p> which our theme doesn't do. This is an easy fix and simply requires we edit index.tpl to place a <p> at the beginning of the footer links, and then close it with a </p>.
The original dusk theme doesn't support images added to Serendipity posts using the image manager so we need to add a few styles to do this. I've found the easiest way to add this support is to simply copy all of the styles from the default theme into whichever theme I'm working on, and then make changes to background colors, fonts, paddings and margins etc. The styles needed are
.serendipity_imageComment_center,
.serendipity_imageComment_left,
.serendipity_imageComment_right,
.serendipity_imageComment_center,
.serendipity_imageComment_left,
.serendipity_imageComment_right,
.serendipity_imageComment_img,
.serendipity_imageComment_img img,
.serendipity_imageComment_txt. The dusk theme uses such a limited palette of color that I decided a background color or border color around any of the images would look out of place, so the only styling for images has been padding and margin of 3px, and a grey border around images that also have a caption.
When I test my themes I now test them with static pages because so many Serendipity users just love this function. In my template folder I've copied the static pages smarty template files and edited the page title so that they match the rest of the theme. This is the code that used by the static pages plugin;
<h3 class="serendipity_date">{$staticpage_articleformattitle|@escape}</h3>
{/if}
<h4 class="serendipity_title"><a href="#">{$staticpage_headline|@escape}</a></h4>
and my changes;
{/if}
<h3 class="serendipity_title"><a href="#">{$staticpage_headline|@escape}</a></h3>
While testing this theme I realised the blog description that we left out in part one could actually be added back in, and honestly, this is one of the things that I miss about themes when they're missing, and it adds to the usability of the theme. So, I changed my index.tpl to this;
<div id="homelink">
<h1><a ref="{$serendipityBaseURL}"> {$head_title|@default:$blogTitle|truncate:40:' ...'}</a></h1>
<h4>{$head_subtitle|@default:$blogDescription}</h4>
Darwin said,
Thursday, July 6. 2006 at 07:56 (Reply)
Carl said,
Thursday, July 6. 2006 at 21:03 (Reply)
Please accept my apologies I had updated the zipfile and replaced the dashes with underscores in the filename. Please go ahead and download the template now. I would be interested in your thoughts of the theme once you start using it.
Carl
Darwin said,
Friday, July 7. 2006 at 20:57 (Reply)