s9y themes

The calendar plugin that is installed by default in Serendipity shows all entries for the month with links to the archive page for that day. This makes it so easy to find posts for particular days. Some theme designers are also adding extra coloring, borders, or background images to calendars to make them really stand out. It is even possible to add events or personal activities to the calendar by installing extra plugins.

The calendar itself is created from a Smarty template file 'plugin_calendar.tpl' and sits within a table to create the columns and rows. Continue reading "Calendar sidebar plugin"

Unlike other blogging engines the Serendipity designers have produced two different modes of displaying comments, either linear or threaded. Linear mode displays all comments in the order they were created, whereas threaded mode allows the comment author to select a parent comment that their reply applies to. The inspiration for this came from the many forums and guestbooks in use today, and allows your blog users to see at a glance which conversations are generating the most interest.

Trackbacks to your entries are automatic with Serendipity and in most cases your readers will never need to use a dedicated trackback address (URI).

Are you writing a new theme for Serendipity? If so, comments and trackbacks can be arranged in many different ways by changing your CSS in the template stylesheet or by altering the Smarty Templating files. Continue reading "Comments and trackbacks"

The extended body of this post includes an 800px wide image. Some users happily include large images in their posts, and as designers we have to work out how best to deal with this, do we ignore it and let the image dominate our design or do we find some way of preventing the image from breaking our design. What is more important, consistent design or user privilege?

If you do decide to deal with large images within your theme, the two most common visual styles are to set the overflow property on .serendipity_entry_body and .serendipity_entry_extended to either 'overflow:hidden;' or overflow:auto;

Setting to hidden will crop the image to the width of the entry, while auto will allow scroll bars, but doesn't work in IE unless you also add a 'width:100%;' to the above styles. Continue reading "Very wide image"

Serendipity includes form elements within posts (comment form) and within sidebars (quicksearch, template chooser). As theme designers we should be aware of these and style our themes appropriately.

Form elements are input boxes, select drop downs, textareas, checkboxes, radio buttons, submit buttons etc. All of these elements are styled automatically by your browser, but can take on properties from their parent container. For this reason you owe it to your users to test them, and if necessary, to style them. Continue reading "Form elements"

At some point almost every blog user will want to make a list in an entry, and while some might just use a carriage return (new line) others may know a little html and decide to use html lists instead. The following lists, unordered, ordered, and definition demonstrate how themes handle them.

This is an unordered list <ul>
• this is a list item <li>
another unordered list
• sub-list item
• another sub-list item
• another list item
• and another one

Continue reading "Using lists in entries"

The continue reading "post title" is a tricky little devil, and in the default theme has no extra styling. In fact it is just part of .serendipity_entry_body, however, blogging is deeply personal and every user has different needs.

You should notice that some of the themes on this site don't style the 'continue reading' byline so it appears directly after the content, often breaking the designers hard work.

My belief is that the entries.tpl needs to be amended and the continue reading code needs a <p> placed around it. I also tend to add an additional class to my byline so that I don't have to worry that my paragraphs elsewhere will be affected. Lets assume you add the <p>, your entries.tpl code could look like this,

<p class="continue_reading"><
a href="{$entry.link}#extended">
{$CONST.VIEW_EXTENDED_ENTRY|
@sprintf:$entry.title}</a></p>

Now simply create the following style in your stylesheet,

.continue_reading {
clear:left; }

This has the advantage of also allowing further styling, so you could for example change the color or add an image.

There are two rows of images on this page. The first row has no captions and is located in the entry body (.serendipity_entry_body), while the second set of images are in the extended body (.serendipity_entry_extended).




Continue reading "A users image gallery"

All of the images on this page are aligned right using media manager. I have deliberately added text around these images to space them out because otherwise they tend to ruin the page. Check out the photogallery to see it is possible to completely break a page. Continue reading "Images aligned right"

All of the images on this page are aligned left using media manager. If the two top images are sitting too close together adjust the margin or padding around them. If the second image is sitting to the right of the first image then you may wish to add a 'clear:left;' to .serendipity_entry_extended Continue reading "Images aligned left"

All of the images on this page are aligned to top using media manager. Notice the difference between images without a caption (left-aligned) and those with a caption (centered). Continue reading "Images aligned to top"

Serendipity blog comes with an excellent search tool that allows users to find all posts that contain a certain word within your blog. As theme designers we need to be aware of how the quicksearch plugin works, and how to style the results appropriately.

At some time almost every users has noticed that the quicksearch tool doesn't work as expected, often because it can't find a result for a word the user knows to be in their entries. The quicksearch function relies heavily on the a similar php function, and a design feature of the quicksearch is that a word that appears in every post should not produce any results, after all what is the point simply reproducing the archives page.

To test the two different results that a user will experience, try searching for 'pluto' and 'column', now search for one of these words spelt incorrectly. If your theme is fully compatible with serendipity blog you should be happy with the results.

HTML tags give blog authors much more control over how their posts will look, and this page shows how most of the basic tags have been styled in the theme you want to use.

Serendipity is tremendously powerful and users are able to select from plain text entry to a variety of wysiwyg editors for creating posts. If you choose plain text entry and want to use these tags, simply type the tags as you would normally and Serendipty will automagically format your post correctly. Continue reading "HTML tags in posts"

You may have noticed this page has a very very long title. In fact I just kept typing until I reached the limit. Many theme designers don't realise that some users are quite happy to use long titles.

If the banner of your theme uses a large font, or if you would like to restrict the length of the title, it is possible to prevent long titles from upsetting your finely crafted design.

Open your index.tpl, and where the h1 title link is, replace

{$head_title|@default:$blogTitle}

with this

{$head_title|@default:$blogTitle|truncate:50:" ...":false}

What you've just done is told serendipity that if the title exceeds 50 characters then truncate the title and add three dots. You could easily change the number of characters, and you needn't insert three dots if you have some other approach you would prefer to take.