Mambo CSS Tutorial

Lawrence Meckan

Absalom Media

Mambo CSS Tutorial

This tutorial covers:

• What CSS design is
• CSS design principles
• Changes between Mambo and Joomla CSS architecture
• Explanation of each element used in designing a Mambo template

CSS Design

CSS stands for Cascading Style Sheets, meaning:

• It is a language that is parsed, not executed, allowing small files and quick delivery from your server
• How you construct the order of your elements in the CSS matters
• There is the freedom to rapidly modify a design by changing a few lines of code inside the CSS
• It is always cached by a browser, meaning that the design only needs to be loaded once.

CSS design allows you to control the layout without resorting to:

• Nested tables
• Inappropriate markup

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
• Cascading

Inheritance means:

• It is a parent:child relationship built into CSS
• It allows nested elements to gain the styling of their relevant parent
• Every document containing markup is equivalent to a tree structure
• Nested elements are nodes that branch from the topmost element (Usually the HTML element is the top of this tree.)
• Elements nested within other elements represent branches, while empty elements and text represent leaves of the tree.
• That not every element in CSS includes inheritance

Cascading means:

• The various types of CSS are order in terms of priority
• Identifiers (# / id's) always have higher priority than classes or contextual rules
• Classes (.) have higher priority than contextual rules
• Classes can be stacked inside markup. Identifiers cannot.

Contextual rules are the markup elements.

CSS: Elements

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

• Each element is either block-level, inline or invisible
• a set of pseudo-classes can be used to define further behavior, e.g :hover, :first-line, :visited, :before

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:

• h1 through to h7, used in forming semantic headings
• p, the paragraph element

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:

• strong, for stronger text
• em, for emphasis

CSS: Invisible

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

• style, for creating CSS styling inline on the markup
• title, for stating the document title

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.

• Mambo places all CSS in one file - template_css.css
• Joomla has now two files - template_css.css and editor_content.css

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: /* CSS global reset for all browsers */ * { padding: 0; margin: 0; }
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:

• table
• tbody
• th - table headings
• tr - table rows
• td - table data

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:

• a:link
• a:hover
• a:visited

Within Mambo and Joomla, there are six different classes of links:

• mainlevel and sublevel - for managing the main and sub menus
• blogsection - for blog links
• category - for links inside category lists
• back_button - the back button
• pathway - for the breadcrumbs
• fase4rdf - for syndication

a.mainlevel:link, a.mainlevel:visited { color: #3366CC; font-family: "Lucida Grande","Lucida Sans Unicode",geneva,arial,verdana,sans-serif; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; }
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. .contentpane, .contentpaneopen { background: #ffffff; padding: 2px; } .contentheading { font-family: "Lucida Grande","Lucida Sans Unicode",geneva,arial,verdana,sans-serif; font-weight: bold; color:#3366CC; text-align:left; line-height: 1.3em; } .contentdescription { font-family: "Lucida Grande","Lucida Sans Unicode",geneva,arial,verdana,sans-serif;font-size: 10px; color: #ACB0B9; text-align: left; }

Element: More Content

There are unique classes for the creation and modification dates, as well as author name (.small). .small, .smalldark { font-family: "Lucida Grande","Lucida Sans Unicode",geneva,arial,verdana,sans-serif;font-size: 9px; color: #3366CC; text-decoration: none; font-weight: normal; } .createdate { font-family: "Lucida Grande","Lucida Sans Unicode",geneva,arial,verdana,sans-serif;font-size: 10px; color: #3366CC; text-decoration: none; font-weight: normal; } .modifydate { font-family: "Lucida Grande","Lucida Sans Unicode",geneva,arial,verdana,sans-serif;font-size: 10px; color: #3366CC; text-decoration: none; font-weight: normal; }

Element: Categories

Categories are still part of content, but with some unique classes. a.category { text-decoration: underline; } a.category:hover { text-decoration: underline;

Element: Sections

Each content section can hold multiple categories. .sectiontableentry1 { text-align: left; background: #EFEFEF; font-size: 10px; padding: 2px; } .sectiontableentry2 { background: #FFF; font-size: 10px; text-align: left; padding: 2px; }

Element: Categories

Categories are still part of content, but with some unique classes. .categorytitle { font-weight: bold; font-size: 16px; height: 25px; line-height: 25px; font-family: "Trebuchet MS", Verdana, sans serif; } .componentheading { font-weight: bold; font-size: 16px; height: 23px; line-height: 20px; font-family: "Trebuchet MS", Verdana, sans serif; border-bottom: 1px solid #002E61; color: #002E61; margin-bottom: 5px; } a.category { text-decoration: underline; } a.category:hover { text-decoration: underline;

Element: Images

Images are driven in Mambo and Joomla by the mosimage call.
Captions can be included. .mosimage { border: 1px solid #cccccc; margin: 5px } .mosimage_caption { margin-top: 2px; background: #efefef; padding: 1px 2px; color: #666; font-size: 10px; border-top: 1px solid #cccccc; }

Element: Modules

Modules retain a standard structure, but can be restyled using custom module field.
table.moduletable { width: 100%; font-size: 80%; } table.moduletable th { font-size: 80%; } div.module h3 { font-size: 14px; width: 130px; font-weight: bold; margin: 0px; padding: 0px; margin-bottom: 5px; }

Element: Polls

Polls remain a module, combining various classes and a specific design.
.poll { font-size: 10px; text-align: center; }

Element: Forms

Forms require just the basic HTML markup call.
Joomla may add more as it heads towards greater accessibility. form { margin: 0px; padding: 0px; }

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. ul#mainlevel-nav { list-style: none; padding: 0; margin: 0; float: right; white-space: nowrap; }

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.