« Blog server as socia... | Main | Off to the mountains »

How to create a Roller 4.0 theme, part 2

This is part two of a two part series:

In part one I explained how to create a theme directory and add the required template and resource files. Now I'll wrap things up by explaining what goes into a theme.xml theme definition file and how to deploy your new theme.

Create a theme.xml file

The example1 theme that I discussed in part one has a preview image, a Stylesheet Override file, a weblog template, a _day template, a custom template that displays an about page and a single image called aquadot.jpg. The theme.xml theme definition file below includes each of those items.

<?xml version="1.0" encoding="UTF-8"?>
<weblogtheme>    
  <id>example1</id> 
  <name>Example1: minimal theme</name>
  <author>Dave Johnson</author>     
  <preview-image path="preview.jpg" />

  <stylesheet>
    <name>Override</name>
    <description>Stylesheet override</description>
    <link>override.css</link>
    <templateLanguage>velocity</templateLanguage>
    <contentsFile>override.css</contentsFile>
  </stylesheet>

  <template action="weblog">
    <name>Weblog</name>
    <description>Main template of weblog</description>
    <link>weblog</link>
    <navbar>false</navbar>
    <hidden>true</hidden>
    <templateLanguage>velocity</templateLanguage>
    <contentType>text/html</contentType>
    <contentsFile>weblog.vm</contentsFile>
  </template>

  <template action="custom">
    <name>_day</name>
    <description>Displays one day of entries</description>
    <link>_day</link>
    <navbar>false</navbar>
    <hidden>true</hidden>
    <templateLanguage>velocity</templateLanguage>
    <contentType>text/html</contentType>
    <contentsFile>day.vm</contentsFile>
  </template>

  <template action="custom">
    <name>About</name>
    <description>About this weblog...</description>
    <link>about</link>
    <navbar>true</navbar>
    <hidden>false</hidden>
    <templateLanguage>velocity</templateLanguage>
    <contentType>text/html</contentType>
    <contentsFile>about.vm</contentsFile>
  </template>

  <resource path="images/aquadot.jpg" />   
</weblogtheme>

Now I'll break it down and explain each element.

Inside

The root element of the XML file contains some theme meta-data, an optional stylesheet, one or more templates and zero or more resources. Here's a run-down of the meta-data you must include in each theme:

  • - the unique ID, by convention this is the same as directory name
  • - name of the theme
  • - name of theme author
  • - path to image preview file, relative to theme directory

The override

Following the theme meta-data is the stylesheet declaration, including all of the required elements:

  • - name of stylesheet
  • - description of stylesheet
  • - value used in stylesheet URI (e.g. http://example.com/../page/styles.css)
  • - in 4.0, this must be 'velocity'
  • - path to theme file containing stylesheet, relative to theme directory

The elements

Next are the template elements, one for each page template. Each element must have an 'action' attribute that declares on which action the template will be invoked. Here are the possible values of the action attribute:

  • weblog: Each theme must have a weblog template, which displays the main page of the blog
  • permalink: (optional) template which will be used when displaying individual entries
  • searchIndex: (optional) template to be invoked to display search results
  • tagsIndex: (optional) template to be used when displaying entries by tag
  • custom: (optional) You can add as many custom templates as you want.

And here are the elements that must be included in a :

  • - name of the template
  • - description of template
  • - value used in stylesheet URI (e.g. http://example.com/../page/mypage)
  • - true if page should be include in navigation menus generated by standard macros
  • - true if page not to be called directly and only used as an include
  • - in 4.0, this must be 'velocity'
  • - the content-type to be generated by the template
  • - path to theme file containing template, relative to theme directory

Including resources

After the template elements, we include the one element we need for the one image that is included in the theme. The path is relative to the theme directory.

Deploying your theme to Roller

To make your theme available to Roller, copy the theme directory into the Roller themes directory. Restart Roller and watch the logs to see that your theme is deployed correctly. If there is an error in your theme.xml file you should see an XML parser error in your roller.log file. You can also turn on additional theme debugging by adding the following to your roller-custom.properties override file.


log4j.category.org.apache.roller.weblogger.business.themes=DEBUG

If you want to share your theme with an even wider audience, then consider contributing it to the Roller Support project, a site that hosts additional themes that are not included in the official Apache Roller release because Roller ships with only four core themes.

That's all

I think that covers all the bases. Let me know if it works for you or what parts of the doc could be improved. I hope to get this into the next rev of the Roller Template Guide (which you can get from the Roller download page in PDF form).

Here's the example1 theme that I discussed in this post:

Comments:

Thanks for the quick little guide, it is appreciated! I am currently just starting out with roller to eventually deploy as my main blog application of choice. Roller 4.0 is a nice release with just the things I'm looking for, where it can only get better. Cheers... I look forward to the guide for creating templates from scratch in its final form.

Posted by Flossgeek on January 02, 2008 at 08:28 PM EST #

Very good example for starting theme customization ( at least for me ) :)

Posted by Hendra Effendi on February 29, 2008 at 03:54 AM EST #

can get my theme into roller interface. restart , delete, restart tomcat, deploy, etc. i don't know what else to do. and i did everything you wrote in this howto. i even added that line to roller-custom properties. i feel sad the only thing i did not was to include a preview. i excluded that element from the file theme.xml. could that be cause?

Posted by raúl on March 21, 2008 at 09:54 PM EDT #

I'd like to thank you for your excelent manual for creating a new theme. Using it I achieve to create my templates, but I have a problem with it: I don't know how to include sidebar and permalink templates in my created weblog and day ones. I'd appreciate your help so much.

Posted by Darwin Ramos Cuervo on July 14, 2008 at 07:38 PM EDT #

Problem solved. Just added <div id="sidebar-a"> #includeTemplate($model.weblog "sidebar") </div> and roller makes its magic. Thanks too much for all!

Posted by Darwin Ramos Cuervo on July 14, 2008 at 07:55 PM EDT #

Do i have to use the velocity engine to create a Template isn't there a way to integrate Roller into a JSP?

Posted by Hax on January 19, 2009 at 09:49 PM EST #

Hi! Excelente manual. I'm aware that this blog is from along ago, but i'm just starting to use roller. I was wondering if i could instead of listing the categories that i have, use images that i design to link them to the categories. I'm not really sure on how to this, if you could give a hint about this topic i'll appreciate very much. Thank You.

Posted by Ana Pardo on November 13, 2009 at 07:34 PM EST #

Post a Comment:
  • HTML Syntax: NOT allowed

« Blog server as socia... | Main | Off to the mountains »

Welcome

This is just one entry in the weblog Blogging Roller. You may want to visit the main page of the weblog

Related entries

Below are the most recent entries in the category Roller, some may be related to this entry.