Mambo CSS Tutorial

Lawrence Meckan

Mambo CSS Tutorial

This tutorial covers:

CSS Design

CSS stands for Cascading Style Sheets, meaning: CSS design allows you to control the layout without resorting to: The one limitation of CSS design at this time is that certain browsers do not support the CSS specification completely.
There are hacks to work around these issues, but they usually do not conform to W3C valid code.

CSS: Principles

There are two simple principles that apply in all CSS work. They are: Inheritance means: Cascading means: Contextual rules are the markup elements.

CSS: Elements

Elements are styled by selecting them with different selectors. Furthermore:

CSS: Block-level

A block-level element is an element that has a line break before and after the content it displays.
Examples of block-level elements are:

CSS: Inline

An inline element is an element that does not need to have a line break before or after the content it displays.
Examples of inline elements are:

CSS: Invisible

An invisible element is an element that isn't displayed on the actual layout or canvas
Examples of invisible elements are:

Mambo and Joomla CSS

As Mambo and Joomla progress, there are going to be more differences than similarities between each build.
Thus far, there is only a subtle CSS change between Mambo and Joomla. The latter file for editing the content in the frontend.

Element: *

The universal selector element (*) is useful in applying a global change to a CSS document.
In most cases the universal selector is used to perform a global white space reset:
This CSS reset means that you have to style each area of CSS specifically for margins and padding.

Element: Body

The body element is useful in applying background images and global text specification to a document.
Whilst it may be appropriate to style at the parapraph, table data and division level as recommended by the Mambo moderators,
I see no reason to create useless code re-declaring font specifications over and over again.
The body element remains a block-level element.

Element: Title

The title element is useful in applying the pagename to the document.

Element: Table

Mambo, by and large, still uses tables to render content inside the core.
This will affect layout considerations as tabling does slow down overall rendering time on browsers.
Tables are split into five calls: Tables are rendered according to the box model of the table itself.
There are numerous types of tables within Mambo, include contenttoc and contentpane.

Element: Links

Links are defined by the a element
The three pseudo classes for link are: Within Mambo and Joomla, there are six different classes of links:
There is also one identififer used in menu links: #active_menu.

Element: Lines

The hr element is a HTML specifier for a horizontal line.
The only class that uses this in Mambo is .seperator

Element: Content

Content within Mambo and Joomla is broken up into sections and categories.
There is a pane, a heading, the content itself and associated classes.

Element: More Content

There are unique classes for the creation and modification dates, as well as author name (.small).

Element: Categories

Categories are still part of content, but with some unique classes.

Element: Sections

Each content section can hold multiple categories.

Element: Categories

Categories are still part of content, but with some unique classes.

Element: Images

Images are driven in Mambo and Joomla by the mosimage call.
Captions can be included.

Element: Modules

Modules retain a standard structure, but can be restyled using custom module field.

Element: Polls

Polls remain a module, combining various classes and a specific design.

Element: Forms

Forms require just the basic HTML markup call.
Joomla may add more as it heads towards greater accessibility.

Element: Top Menu

The top menu function, usually user3, includes some specific CSS.
It is an unordered list, capable of being a block level element.

Element: Cite

Citations are an up and coming feature in Joomla (release still pending).
This is a result of the usability analysis to create well-formed semantic markup.
No examples exist in the wild at the moment.