Creating a Roller theme from scratch using Apache Roller 4.0

0
155
6 min read

Creating a Roller theme from scratch

Now things are going to get a little rough; just kidding! In Apache Roller, it’s very easy to create your own themes, and in this section I’m going to show you how.

For the following exercises, you’ll need to download http://www.packtpub.com/files/code/9508_Code.zip. Extract the chapter07.zip file’s contents into a directory in your hard disk. For example, I used Ubuntu Linux in the exercises, created a chapter07 directory inside my Desktop directory, and copied the mytheme directory inside Desktop/chapter07. All the steps in the exercises are based on these assumptions.

Creating a directory for your theme

Every Roller theme has a directory and some required files such as weblog.vm, _day.vm, and theme.xml. The next exercise will show you how to create a directory for your new theme inside Roller’s themes directory, and how to copy these required files from the support files.

Time for action – creating a directory for your theme

Now, I’ll show you all the necessary steps to create your new theme directory inside Roller’s themes directory in a Linux Ubuntu system, and then copy all the required files. If you’re using Windows or any other flavor of Linux, the procedure is very similar:

  1. Go to your Roller themes directory and create a directory named mytheme:

    Apache Roller 4.0 – Beginner's Guide

  2. Open a terminal window, go to the themes subdirectory inside Desktop/chapter07, and type sudo cp * /usr/local/tomcat/webapps/roller/ themes/mytheme to copy all the mytheme files to your Roller installation:

    Apache Roller 4.0 – Beginner's Guide

  3. In the end, your mytheme directory will have four files, as shown in the following screenshot:

    Apache Roller 4.0 – Beginner's Guide

  4. Now restart Tomcat and wait until it’s running again. Then open your web browser, log into Roller, and go to the Design tab to see the Weblog Theme page:

    Apache Roller 4.0 – Beginner's Guide

  5. Click on the Shared Theme option and select My First Roller Theme from the drop-down listbox:

    Apache Roller 4.0 – Beginner's Guide

  6. Click on the Update Theme button to change your current Roller theme, and then click on the See how your blog will look with this theme link:

    Apache Roller 4.0 – Beginner's Guide

  7. Roller will open a new web browser tab to show you a preview of the new theme you selected:

    Apache Roller 4.0 – Beginner's Guide

  8. Close the preview tab and leave the Front Page: Weblog Theme page open for the next exercise.

What just happened?

As you can see from the previous exercise, the mytheme theme has a very basic functionality. That’s because the CSS stylesheet (mystylesheet.css) is empty, so I’m going to show you how to add styles to your headings, links, and all the other elements displayed in your weblog. However, first we need to see a quick introduction to the four files that every Roller theme must have in order to run without any trouble:

File

Definition

Tip

weblog.vm

Describes the main page of your weblog

In this file you set the structure for your weblog, using macros and elements from Roller and the Velocity template language.

_day.vm

Describes how to display one day’s worth of entries in your weblog

Here you can configure how to display each entry’s title, content and comments, for example. You can set the font’s color and size of each element, based on the CSS stylesheet definitions.

mystylesheet.css

Stylesheet override file that defines the CSS style code used by your weblog

Here you define all your weblog’s styles, like size and color for headings and fonts used in your posts.

theme.xml

Theme definition file that describes each file used in your weblog

You need to include some basic data about your theme, the stylesheet file, the weblog and _day templates, and every other file and/or resource used in your weblog.

In the next exercises, you’ll learn how to edit these files to change your weblog’s visual appearance and suit your needs.

The stylesheet override file

The first thing we need to do in order to change your new theme’s visual appearance is edit the stylesheet override file: mystylesheet.css. We can do this in two ways: Edit the file directly from the mytheme directory inside Roller’s themes directory, or use Roller’s Custom Theme feature. If we use the first option, we’ll need to restart Tomcat every time we make a modification to mystylesheet.css. On the other hand, if we choose the second option, we can edit the stylesheet inside Roller’s admin interface and see how our changes affect our weblog’s visual appearance immediately, so I’m going to show you how to use the second option.

Time for action – editing the stylesheet override file

It’s very easy to edit the stylesheet override file for your custom theme inside Roller, and the next exercise will show you how to do it:

  1. Go to the Front Page: Weblog Theme tab in your web browser, select the Custom Theme option, click on the I want to copy the templates from an existing theme into my weblog checkbox, and click on the Update Theme button:

    Apache Roller 4.0 – Beginner's Guide

  2. Roller will show you the following success message:

    Apache Roller 4.0 – Beginner's Guide

  3. Now click on the Templates link to see a list of the templates you currently have in your custom space:
  4. Looking at the template list in the previous screenshot, there are some templates from the other custom theme which we need to remove. Click on the Remove link of the custom.css, mytemplate, and _css templates to delete them from your custom space, as we won’t need them, and they don’t belong to mytheme.
  5. After removing all the unneeded files, there should be only two templates inyour list:

    Apache Roller 4.0 – Beginner's Guide

  6. Now click on the Stylesheet link to see and start editing your mystylesheet.css file’s code:

    Apache Roller 4.0 – Beginner's Guide

  7. As you can see, your custom stylesheet is empty. If you click on the Front Page link in Roller’s menu bar, you’ll see your weblog’s current front page:

    Apache Roller 4.0 – Beginner's Guide

  8. Now click on your web browser’s Back button to return to the stylesheet editing page, and add the following code to your custom stylesheet:
    div.dayTitle {
    color:brown;
    font-weight:bold;
    font-size:90%;
    text-transform:uppercase;
    border-bottom:1px dotted #666;
    }
    .entryTitle {
    font-weight: bold;
    }

  9. Your stylesheet should now contain the line beginning with /*, along with the code you’ve just entered:

    Apache Roller 4.0 – Beginner's Guide

  10. Click on the Save button to apply the changes to your stylesheet, and then select the Front Page link to see how the code you entered affects your weblog’s visual appearance:

    Apache Roller 4.0 – Beginner's Guide

  11. If you compare the previous screenshot with the one from step 7, you’ll see that the code you entered into the override stylesheet changed the way your weblog displays the day and entry titles. Now click on the Back button of your web browser to return to the stylesheet editing page, and add the following lines of code above the lines you entered in step 8:
    a {
    text-decoration: none;
    }
    a:link {
    color: blue;
    font-weight: medium;
    }
    a:visited {
    color: purple;
    font-weight: medium;
    }
    a:hover {
    text-decoration: underline overline;
    }
    body {
    font-family:"Lucida Grande", lucida, Geneva, Arial,
    sans-serif;
    background:#FFFFCC;
    }
  12. Your stylesheet should now look like this:

    Apache Roller 4.0 – Beginner's Guide

  13. Click on the Save button and then select the Front Page link to see your weblog’s front page:

    Apache Roller 4.0 – Beginner's Guide

  14. Click on the Back button to return to your stylesheet editing page.

LEAVE A REPLY

Please enter your comment!
Please enter your name here