Mambo CSS Guide

A handy, blank CSS guide for Mambo 4.6 versions. Feel free to download this file and use it as the base for your own Mambo template design.

/**
 * CSS Guide for Mambo 4.6 templates
 * @author Lynne Pope (Elpie)
 * @url lynnepope.net
 * @license http://creativecommons.org/licenses/by-nc-sa/3.0/
 * @copyright 2007 Lynne Pope
 */

/**
 * Mambo MAINMENU Styles
 * ---------------------
 * Styling specific to the mainmenu
 */
ul#mainlevel {}
.mainlevel {}  /* parent level */
.sublevel{}   /* child level in the mainmenu */

/**
 * Mambo Form Styles
 * ---------------------
 */
.button {}
.inputbox {}

/**
 * Mambo Miscellaneous Styles
 * ---------------------
 * styles in general usage
 */
.title {}       /* styling the site name */
.pathway {}     /* styling the pathway/breadcrumb */
.createdate {}  /* the date the content item was created */
.modifydate {}  /* the date the content item was last modified */
.small {}       /* text styling for small text */
.smalldark {}
.buttonheading {} /* styling for the pdf, email and print icons */

/*
 * Image Styles
 * ---------------------
 * styling the images that are inserted by use of mosimage within Mambo
*/
.mosimage {}
.mosimage_caption {}

/**
 * Mambo Content Styles
 * ---------------------
 * Mambo currently outputs a number of tables. Tables are rendered through five calls:
 * table
 * tbody
 * th - table headings
 * tr - table rows
 * td - table data
 * Content within Mambo is structured through the use of SECTIONS, CATEGORIES and CONTENT ITEMS
 * All content is wrapped within a pane, has a heading, followed by the content itself
 */

.contentpane {}        /* used to hold the SECTIONS title, description and image*/
.contentpaneopen {}    /* used to hold the individual content item */
.contentheading {}     /* content headings in SECTIONS and on the frontpage */
.contentpagetitle {}   /* title of the content item */
.contentdescription {} /* description used in SECTIONS */

/**
 * Mambo SECTIONS Styles
 * ---------------------
 * Styling of sections tables
 */

.sectiontableheader {} /* section table headers for a SECTION page */
.sectiontableentry1 {} /* SECTION or CATEGORY pages may list the content items within that section. Each content item can be displayed with alternating colours. This is the selector for styling the first row colour */
.sectiontableentry2 {} /* this selector is used for displaying the second alternating row colour*/

/**
 * Mambo CATEGORY Styles
 * ---------------------
 * Styling specific to a CATEGORY
 */
.categorytitle {}   /* styling the CATEGORY titles on a list of categories displayed on a SECTION page */
a.category {}      /* link styling within the category class */

/**
 * Mambo Content Item Styles
 * ---------------------
 * Styling specific to CONTENT ITEMS
 */
.content_rating {} /* rate this article styling */
.blog {}          /* styling the blog display */
.blog_more {}
.readon{}        /* for styling the "Read More..." */
.message        /*for text parsed from mosmsg */

/**
 * Table of Contents
 * -----------------
 * Styling of the Table of Contents in a multi-page content item
 */
.contenttoc {}     /* Tables of Contents in a multiple paged content item */
.contenttoc th {}  /*styling of the header of the Table of Contents */
.contenttoc td {}  /* styling the table data cells */

/**
 * Mambo Page Navigation Styles
 * ------------------------
 * Styling the page navigation
 */
.pagenav,.pagenav_prev, .pagenav_next, .pagenavbar {}
a.pagenav, .pagenav_prev a, .pagenav_next a, .pagenavbar a {}
a.pagenav:hover, a.pagenav:active, .pagenav_prev a:hover, .pagenav_prev a:active, .pagenav_next a:hover, .pagenav_next a:active, .pagenavbar a:hover, .pagenavbar a:active {}

/**
 * Mambo Modules Styles
 * ------------------------
 * Styling the way modules are displayed
 */

.moduletable {}          /* styling the module */
.moduletable th {}       /* module titles */
table.moduletable td {}    /* styling the moduletable table data */
/* NOTE: If you use module display options to display modules without tables you will not have the last two CSS selectors (these are for table output only) */

/* Mambo Poll Styles */
.poll {}
.pollstableborder {}

/*  Mambo Weblinks Styles */
.weblinks{}

/* Search page */
.searchintro {}

/* Syndication module showing your RSS feeds */
.syndicate {}

/* Latest news module */
.latestnews {}

/**
 * Mambo Component Styles
 * ------------------------
 * Styling the way components are displayed
 */
.componentheading {}

/**
 * Logged in frontend user styles
 * ------------------------
 */
.adminform {}
.adminForm input.inputbox {}
.adminForm textarea.inputbox {}

Yesterday, I published the blank template index.php for you to use when creating your own custom template for Mambo. You can download the blank template_css.css and blank template here. They are free to use.

UPDATE: June 1st To complete your custom Mambo template, I have added a blank templateDetails.xml file. This is also available for download from my downloads area.

If you enjoyed this post, make sure you subscribe to my RSS feed!