⌘ Styx - Themes

• ← Configuration
• « Themes »
• Plugins →

Manage Themes

Themes, also known as “Styles” or “Templates”, are just one of the ways that you can personalise your new Serendipity blog. Themes are available to install directly from your backends administration screen, or you could download a tarfile of the theme from the Serendipity Styx repository, or even from the designer’s own blog.

Many users of Serendipity eventually want to modify a theme to suit their needs. All Serendipity themes are written using standard HTML and CSS, but with the addition of the easy to learn and very powerful Smarty templating language.

Installing a new theme

By default Serendipity ships with several attractive themes for you to try. Simply login to your administration suite and click the “Manage Themes” link in the left sidebar. This produces a list of all available themes with screenshots to make it easy for you. At the bottom of each theme is the theme install button. The current selected theme moves to the top of the list “left” next to the current used backend theme.

If your Serendipity blog isn’t able to use Spartacus, perhaps because your webhost won’t allow it, you can still install new themes for your blog. Either visit the web-based version of the Serendipity Styx repository or download a zipfile of the theme directly from the template designer. You’ll need to unzip the theme and upload it (using FTP) to the templates folder of your Serendipity installation. Once you have uploaded your new theme, select the theme from ‘Manage Themes’ page within the administration suite.

If you have any questions about Serendipity themes, please be sure to visit the S9y-Origin forums and ask your question in the themes forum.

User Modifications

You can add any HTML or Javascript to your Serendipity blog! And there’s more than one way to do it.

The easiest way is to install the “HTML Nugget” sidebar plugin.

This plugin provides a block in the sidebar where you can insert your custom code.

If you want your code in the head of the document, you can use the “Head Nugget” plugin.

This does exactly the same thing, but inserts your code in the head of every Serendipity page. You can verify that it works with your browser’s “View Source” capability.

If you want to make the changes directly, you should modify your template file(s).

To put Javascript in the head of the page, for instance, you’d want to modify the index.tpl in templates/{your currently selected template’s name}. If it doesn’t exist, please copy it from templates/default/index.tpl.

Just remember, the index.tpl is parsed by Smarty, and both Smarty and Javascript assign special meaning to the curly braces “{}”, so there’s going to be a conflict.

Smarty is going to win, since it goes first – on the server, whereas Javascript has to wait until the client’s browser is ready to execute it.

To slip the braces past Smarty and on to Javascript, you need to convince Smarty to either ignore the braces, or generate them.

Ignoring the braces is the simpler solution. Smarty passes on anything between {literal} tags, thusly:

{literal}
some_javascript
{
  with(braces);
}
{/literal}

So when you modify index.tpl, you could just enclose all your Javascript in {literal} tags.

The other option, generating the braces, isn’t difficult, just annoying. Smarty will turn any instance of {ldelim} into a left-curly-brace, and any instance of {rdelim} into a right-curly-brace. Thusly:

some_javascript
{ldelim}
  with(braces);
{rdelim}

So you could just replace all occurrences of “{“ with {ldelim} and all occurrences of “}” with {rdelim} in your Javascript only.

When you visit your page, if your Javascript doesn’t work as expected, first check the page source. If the script looks like you wanted, there’s likely a problem with the script. If it’s missing all its braces, you need one of the solutions above.