Serendipity Blog

After a few weeks of development, its finally ready to be tested by the world at large. Hemingway is bleeding edge at the moment, and will only work as it is intended to on Serendipity v1.1 beta4 (or one of the latest nightly snapshots) so be warned!

It's possible that many small issues need to be dealt with well, actually a few less thanks to loyal Serendipity users, and this template won't be fully complete until the Serendipity developers have finished developing their multi-column sidebar plugin selector. So expect minor updates to Hemingway over the next few weeks whilst this is all wrapped up. I owe a special debt of gratitude to Matthias, Costa and Ivan for the German, Polish, and Bulgarian language translations. I would dearly love to ship the final version of Hemingway with other Serendipity supported languages, so please read my original request if you're interested in being credited with this.

EDIT: Thanks to a request from Sebastian, I've incorporated an extra sidebar, which will only ever appear in the detail page and allows the entry's links plugin or any plugin for that matter to be displayed on the entry detail page under footer info in the left-hand column. Hope you like it Sebastian. Also thanks to Yellowled and Costa, I've changed the way the authors plugin and entry links plugins are displayed. The list links will take more effort, it seems the location of the css may be hardcoded into the plugin, but I'll report back once I've done some more work on it.

The zipfile has been upated, so download Hemingway

I was very pleasantly surprised to see an announcement in the Serendipity forums that Costa has designed a new template for his blog, incorporating an idea he had emailed me about, which was to place the comments and comment form to the right of the blog entry. Take a look at the screenshot to see what I'm talking about.

Costa is justifiably proud of his efforts, and I think that his concept sets the stage for some new and innovative designs for the Serendipity world. Well done Costa!

Its been a few days now since I started working on Hemingway, and the result is that I estimate I'm probably about 30% to completion. At this rate, I may be able to release the template sometime in the next 1-2 weeks. I've posted a couple of screenshots so you can see how parts of the site are coming together. The startpage is more or less complete, so is the detail page, and also the main overview pages. The sidebar items haven't been styled yet.

I added the white colorset yesterday, and it looks stunning, as you can see from these screenshots. I suspect that white will be the most popular colorset for Serendipity users.

You'll notice from the startpage screenshot that the latest entry is always displayed along with the list of recent entries. This is diffferent from the original WP version because I think it affects the usability of the template.

The single entry screenshot shows how different this template is from any other Serendipity theme. The entry footer is moved over to the left of the entry, and is rewritten to remove parts that aren't really needed, such as comments and trackbacks. The smarty code has been rewritten for comments and trackbacks, and the comment form is the same as the WP version. I hate the tables based version of the comment from, and this template adopts the exact same code as the WP version. Some of my other template also use a css only comment form based on a definition list, but Hemingway breaks from that and uses the regular form controls of input and label.

After a request from Garvin Hicking, the lead developer of Serendipity, for a port of the hugely successful Wordpress theme Hemingway to Serendipity, I thought I'd take up the challenge, in between updating this site and continuing to work on other templates - which reminds me, I need to do more on the updated default theme, ah well not enough hours - anyway, enough rambling. The screenshot shows the first very rough draft of the startpage of Hemingway for Serendipity.

This is an interesting template to work on. First, the startpage only displays the latest two entries, and they are truncated. I've been forced to create a new smarty template file for these that removes all the other bits and pieces that you would normally expect from a Serendipity entry, specifically all the plugin code, comments, comment form etc. Those bits might be added back in later.

The next challenge was the sidebars. Hemingway actually uses three columns for sidebars, fortunately Garvin is really wanting to push development of Serendipity and the latest alpha of Serendipity 1.1 includes a new template configuration option that allows the template designer to add more sidebar spots around the screen instead of the previous two.

This is actually an amazingly powerful tool and will mean less troubleshooting in the future. Let me tell you why. At present, any template that doesn't support the traditional left and right sidebars, for example if the template is two column and only one sidebar, is confusing to many new users of Serendipity. What happens is they happily go into their plugin management screen and drag plugins into the left or right sidebar, then expect these to showup in the template, but they don't.

And the reason they don't is because the template only has one column for sidebar plugins, then the user makes a complaint in the forums, and the whole things gets really confusing to explain. The new template option that Garvin has coded will allow the template designer to remove a sidebar column from the options list if it isn't needed, meaning that the user will never even get the option of placing a plugin into a column that doesn't exist - Beautiful, an elegant solution, and a MAJOR step forward for Serendipity theme design.

This tutorial demonstrates how to place two background images behind the HTML <blockquote> tag. The first image will be positioned at the top left of our blockquote and will be our opening quote mark, and the other at the bottom right which will be our closing quote mark. The apporach I'm going to demonstrate appears to work in all of the modern browsers, although some of the older browsers might struggle.

The reason for this tutorial is the inability of CSS to allow more than one background on a single page element, so in the case of the blockquote I, like many other template designers, have resorted to creating borders and background colors to separate blockquotes from the surrounding text. We do this because many blog and forum scripts provide a quote button that simply wraps the quote in <blockquote> </blockquote> tags.

Using CSS and the :first-letter pseudo class, we are able to assign two background images to our HTML <blockquote>, and all we need to do is position them so that they work correctly. The image below shows you what I mean.

The opening quote mark and larger first letter are defined by blockquote:first-letter, and the border, background and closing quote mark are defined by the blockquote style.
Read More