Theming Serendipity

I've had an interesting email conversation with another user who wants to get started on the path to being recognised as a Serendipity template designer, and more importantly, then wants to be able to monetize this hobby.

Rather than keep this conversation hidden away out of site I thought I'd publicise some of it, hopefully it will encourage other users to start developing templates. Let's assume you've got your template finished, how do you promote it? Read More

In a previous entry I demonstrated how to add a quicksearch form to any Serendipity template, and we added a 'Go' Button to make the form look more attractive. In this entry I'm going to create a quicksearch form that includes an image for the button instead of text, and we're going to update the form to be compatible with the LiveSearch plugin.

To begin, we need to add the html form to our template.

<form method="get" id="searchform" action="{$serendipityBaseURL}">
<input type="text" id="serendipityQuickSearchTermField" name="serendipity[searchTerm]" size="15"
value="{$CONST.QUICKSEARCH}..." onfocus="if(this.value=='{$CONST.QUICKSEARCH}...')value=''" onblur="if(this.value=='')value='{$CONST.QUICKSEARCH}...';" />
<input type="hidden" name="serendipity[action]" value="search" />
<input id="submit" type="submit" name="submit" value=" " />
</form>
<div id="LSResult" style="display: none;"><div id="LSShadow"></div></div>
<script type="text/javascript">lsbase = "{$serendipityBaseURL}plugin/ls?";
waittext = "Wait, sending request...";
addLoadEvent(liveSearchInit);
</script>

This code doesn't actually include a reference to the image for our search button, we're going to add that to our stylesheet as a background image for the input id #submit. Notice that the value attribute for the submit button is blank, this simply prevents any text from displaying over the top of the button. I chose to use this technique instead of an actual button tag because I plan to continue to develop the search form snippet.

Also, be aware of one issue with this form, it includes the javascript onFocus and onBlur so that if a user clicks into the form the 'Quicksearch...' text is removed, and if they click back out, the 'Quicksearch...' text returns. This conflicts with the LiveSearch plugin.

What happens is that if the user enters a search query the LiveSearch plugin is activated and displays the list of matching entries. If the user chooses not to click any of the search results, the 'Quicksearch...' text will not return, this is beacuse the LiveSearch plugin code is still in control of the input box and I haven't found any way of getting the LiveSearch javascript to return control to the inline javascript. I'm definitely not a javascript expert. In fact the LiveSearch plugin doesn't release the input box in under normal use so this problem doesn't only affect my snippet, it affects all LiveSearch queries, even those on some other Blog engines. Read More

Someone emailed me asking how to widgetize a Serendipity template. For those who don't know, widgets is the name Wordpress people use for their plugin that allows users to sort their sidebar plugins or even remove them altogether.

The Serendipity developers actually included this functionality so long ago we've probably even forgotten who orignially came up with the concept. Wordpress just copied us. And only recently as well. Now I know my loyal WP readers and friends in that community are going to flame me, but I don't care, bring it on. Ok that's not true, I do care, but bring it on anyway.

So, if you're a Serendipity user and you want to edit your templates to add that widget stuff, you don't need to, every template for Serendipity already has it built-in. Need proof, easy, just open index.tpl in one of the templates. What you're looking for is a couple of lines that look like this;

{serendipity_printSidebar side="right"}
{serendipity_printSidebar side="left"}
Read More

Robert Lender has published a short tutorial on adding an extra navbar link in the smallbiz01 template for users of Serendipity 1.1

For my English visitors, the gist of the tutorial is fairly simple to follow and involves editing the config.inc.php and index.tpl files from the template folder.

In config.inc.php add the following code, making sure to start adding additional links from number 6 since 5 is already used for one of the footer links.

array(
'var' => 'navlink6text',
'title' => 'Navlink #6 Text',
'description' => 'Enter the sixth navigation text',
'type' => 'string',
'default' => 'Downloads',
),
array(
'var' => 'navlink6url',
'title' => 'Navlink #6 URL',
'description' => 'Enter the sixth navigation URL eg \'http://www.somesite.url\'',
'type' => 'string',
'default' => '#',
),

Then, open index.tpl and add the following line after the existing list items within the second part of the navbar (these are the bits that have the smarty code which includes a reference to the $template_option's

<li><a href="{$template_option.navlink6url}" title="{$template_option.navlink6text}">
{$template_option.navlink6text}</a></li>

Robert's tutorial mentions that adding as many extra links as you need is possible by simply repeating the process described above, and incrementing the numbers in the variables navlink6text and navlink6url. Easily done and this will extend your template navbar to include as many links as you require.

Thanks to Robert for sharing his experiences.