Designing for XOOPS

Chapter 3. Converting an Existing XHTML Template

OK, now you know the mechanisms of XOOPS themes. So let’s get something done! In this section, you will convert an existing XHTML template into a XOOPS theme. Your focus should be the XOOPS theme syntax, not CSS.

There are lots of websites that provide free and quality CSS templates; I happened to choose FreeCSSTemplates.org for illustration purposes.

Get the CSS Template

Please go to http://www.freecsstemplates.org/preview/paperslips and get the Paperslips template. It is a three-column, grungy-looking template in a light color (see Figure 3-1).

Figure 3-1. The Paperslips template

Extract the archive file to XOOPS/themes/. After this, you should see a paperslip folder in XOOPS/themes/. If you don’t like this name, you can change it. But for simplicity’s sake, I will keep the original name here.

The files in the folder are shown in Figure 3-2.

Figure 3-2. The files in the paperslip folder

Now please recall what we talked about in the last chapter regarding the XOOPS theme engine: the main theme file should be named theme.html. Simply change index.html to theme.html. Go to the backend of your XOOPS installation and make paperslips selectable, as shown in Figure 3-3.

Figure 3-3. Making the Paperslips theme selectable

You should see something similar ...