When people first learn to design for a CMS, the difficult part is to understand the architecture. Each CMS has a different templating system, making it quite confusing to design for several CMSes. In this article I will briefly introduce the XOOPS templating system. I will introduce it in an architecture level rather than use detailed code example. The details will be too long for this article and they can be found in my design book for XOOPS.
General Styles
The theme files are located in XOOPS/themes/theme_name, with each folder regarded as a new theme. The single most important file is theme.html, XOOPS will use this as main layout file. XOOPS has some pre-defined block definitions and should be included in this file. Of course you will need a stylesheet file. The convention is to name it as style.css but it is really up to you. You have to link this file to theme.html.
Related Chapter: Elements of a XOOPS Theme
Javascripts
Using Javascripts in XOOPS is basically the same as in normal HTML file. XOOPS uses JQuery as default Library. And you can add your own scripts in theme.html. But there is a problem: script conflicts. Different modules might load scripts that might cause conflicts. There is no perfect way to avoid this, but there is a technique to avoid repeatedly loading same scripts. Details can be found in the related chapter.
Related Chapter: jQuery and UI Libraries for XOOPS Themes
Control the Template of Individual Module
The functions of XOOPS rely on modules. And the layout & styles of the module is provided by the module itself. Directly hacking the module template (usually located in modules/module_name/templates/xxx.html) is usually not a good choice. XOOPS provides a more elegant way to achieve this: Module template override. You can put your layout file to /themes/modules/module_name/xxx.html and XOOPS will use this to override the default template provided by module itself.
Related Chapter: Module Template Override
A More Flexible Block System
XOOPS has a pre-defined block layout, providing 8 different positions. In most cases, this is more than enough. However, if you are building a super-complex website, you might find it quite annoying. Luckily, you can use “Block Anywhere” technique to avoid this limitation. There are lots of approaches to achieve this but the simplest one is use “XOOPS Tool” module, which is introduced in the related chapter.
Related Chapter: Block Anywhere Techniques
Finally
In this pretty short article, we briefly go through the template architecture of XOOPS. I leave the technical details to the related chapter readings as they are too long for this simple article. After reading it, I hope that you can solve this type of question: If I want to modify the layout or style of …, which file is relevant? Happy XOOPSing.