One of the biggest barriers in MOS template development is the missing CSS style guidelines for MOS templates. During the development process of MOS 4.5 many style sheet changes confused designers even more. To bring some light into the dark I compiled the following CSS guide.

Style Sheet basics
Surely you will understand, that I can not teach CSS from scratch with this workshop. I started with CSS some years ago and it is definitely the most impressive design tool. If you want to start with CSS I suggest visiting http://www.w3schools.com/ which has some good tutorials online.

Introduction
Mambo style sheets can be divided into three major categories. These are global, module and mainbody settings. Global settings contain styles that have effects on the design of the whole system. Module settings will change the design of all modules, especially for the main menu and the mainbody styles do the same for components and content sections. I will start with the Module style sheet's in this lesson and will continue with global and mainbody settings in further lessons.

During the CSS lessons I am using the following colors to make the code more readable: grey is used for comments, black for style classes, blue for CSS commands and finally green for data.

The Module Table
The global design of  all modules is controlled through a style called "moduletable". To understand how it works, you must know that a module is surrounded by a table. This table has only two fields, the header and the body. The header contains the module title and the body is filled with the modules output. The whole table is assigned to the class "moduletable".

This way the designer can easily controll the design of all modules. I use the "table.moduletable" class to set global designs like background, borders, margins, etc. With an added "th" (table header) I design the layout of the Modules header. Finally the "td" (table data) gives me the opportunity to change the design of the modules output. Here is a small example:

The Main Menu
One of the most needed Modules is the Main Menu. From the usability point of view this is maybe the most important module. This is why the Developers made two extra style sheets available for this module. The two classes are "mainlevel" for the main links and "sublevel" for all deeper menu link. These classes are always and only assigned to the link. All the rest is controlled by the "moduletable" class.

As always we take a look at an example. The following combines visited and unvisited links to a group. You should also know, that sublevel entries always have a small image first. These images are located in the "/images/M_images/" folder and are called ident1-5.png.

The Poll
There are currently 4 classes to control the layout of the polls. The main class is just "poll". In earlier versions you could use it to do the whole poll design. During the last updates this class was stripped down and now only can be used to control the polls question. The second one is the called "pollstableborder" and this one is assigned to the table, which contains the choices. But sadly it is hardcoded into the polls module right know and therefore can not be overwritten. The last two are sectiontableentry1 and 2. As these two have an essential influence on many components, they will be discussed later. So currently we format the poll this way: