Web Design:
Basic Mambo Templating

Page 1 Page 2 >>

 

Richard H. Nilsson, April 24, 2005

Abstract

Mambo [http://MamboServer.com] is a content management system (CMS) with a growing following on the Web. It can be adapted to almost any style of web design, from compact hand-edited XHTML/CSS structures to more elaborate Dreamweaver constructs. This article discusses the basics which will allow you to create templates and install the "hooks" to engage the Mambo back-end.

 

Document Head

The head of a complex Mambo web document can be mysterious even to experienced web designers, particularly for those who use fourth generation tools like FrontPage or Dreamweaver exclusively.

I'll start with a basic header and show where the Mambo elements come in. Mambo is a PHP-based engine, therefore our template document will be named "index.php" to invoke the server-side PHP interpreter. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
echo "\n";
?>
<head>
<title><?php echo $mosConfig_sitename;?></title>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

<?php
if ($my->id) {
  include "editor/editor.php";
  initEditor();
}
mosShowHead();
?>
<?php include "includes/metadata.php"; ?>

<link rel="stylesheet" type="text/css" 
 href="<?php echo $mosConfig_live_site;?>/templates/your_template_folder/css/template_css.css"  />
</head>

The document starts with a standard XHTML Transitional document-type declaration and corresponding HTML tag. It is important that the DTD appear on the first line of the document so that IE will properly invoke the correct rendering routines for this document. It looks wrapped here, but should be all on one line. In line with recent standards directives, all HTML is in lowercase type. Notice also the " />" tag-ends in compliance with W3C standards for XHTML tags without explicit closing tag components.

If you use a different document type than transitional, plug in the PHP phrases as described below, in the appropriate places in your document head.

Direct Access Block
We don't want anyone directly accessing this page -- we want them to go through the Mambo engine so it will invoke the correct site configuration. This next block of code does that, as well as setting up the content of the XML and ISO character encoding settings. If you alter this line or omit it, Mambo may not work with other languages.

Title Tag
A PHP code block using "echo" is used to bring in the appropriate page title from the Mambo configuration variable, "$mosConfig_sitename". This variable usually contains the name of the Mambo installation folder.

ISO Settings
Here is another ISO language character specification required by some browsers to correctly display characters other than English alphabet. Doesn't hurt to leave it in for English sites.

HTML Editor Startup
More php to invoke the Mambo default HTML editor, IF the person viewing the page is a registered user on the site. Mambo comes with TinyMCE installed, which requires MSIE to operate. I don't know the exact workings of the call to the "mosShowHead()" function, but the editor pages will not work correctly without it.

Metadata Display
This is a little PHP include statement to bring in the metadata (keywords, description) appropriate for the page. It grabs the global metadata from the configuration file for non-content pages, and the metadata entries in your content items on content pages.

Stylesheet
This line with the embeded PHP echo command loads your template's stylesheet. Be sure to edit the contents of the path to your stylesheet in this line. Also check the configuration file to see that the "$mosConfig_live_site" variable correctly points to your Mambo site folder.

After you install a new Mambo site, always take a look at the head of the furnished default template to see if the described PHP functions were modified, deleted or new ones added.

Body Content

Mambo was originally designed, I believe, to provide a web log ("blog") or portal. As such, many of the templates, including the current (as of 4.5.2) defaults resemble this style of site. Blogs and portals usually have a lot of navigation menu items that are superfluous to other types of sites, such as user login and administration links. Portals will have RSS aggregators and lots of "news" display blocks.

Mambo content is inserted in your template by placing calls to functions or include commands in the appropriate containing elements of your template. These elements can be table cells or divs or just paragraphs, any block-level element that can be controlled by CSS as described under "Styling", below. The contents or configuration of the modules and components controlled by placement functions is determined by settings you can alter in the admin area.

Navigators take several forms: pathways (or breadcrumbs), main and secondary navigator links either horizontal or vertical, and embedded links within published content items.

Pathways
To insert "breadcrumbs", or a horizontal string of the path to the current document being viewed, place this code in your desired page element. Allow for several page-names worth of horizontal space for all the linked "crumbs": 

<?php include "pathway.php"; ?>

Modules
MOS comes with (as of ver. 4.5.2) seven module positions as listed below. Each module can be set to one position where it will appear.You can choose which modules you want and place them in appropriate structure containers in your pages: 

<?php mosLoadModules( "left" ); ?>
<?php mosLoadModules( "right" ); ?>
<?php mosLoadModules( "top" ); ?>
<?php mosLoadModules( "bottom" ); ?>
<?php mosLoadModules( "user1" ); ?>
<?php mosLoadModules( "user2" ); ?>
<?php mosLoadModules( "inset" ); ?>

Main Content
Use the following PHP command to tell Mambo where you want the main page content to display: 

<?php include_once "mainbody.php"; ?>

Today's Date
Here's a PHP command to place a formatted date with an offset from the date set your Mambo server (handy if you live in Oregon and your hosting service is in New Jersey): 

<?php echo (strftime(_DATE_FORMAT_LC, time()+($mosConfig_offset*60*60))); ?>

Footer
MOS does not have an interactive way to edit the footer, for some strange reason, so you have to make changes in a "footer.php" file in the "includes/" directory and then use PHP to pull in the file: 

<?php include_once($GLOBALS['mosConfig_absolute_path'].'/includes/footer.php' ); ?>

Styling with CSS

This will not be a tutorial on designing with CSS, but enough to let you read and alter some styles for the elements in your design. If you want a CSS tutorial, visit http://www.w3schools.com/.

Assuming you have designed a template in XHTML/CSS or using a tool like Dreamweaver, you will probably already have a stylesheet. DO NOT use in-page styling with the <FONT> tag. Your stylesheet must be named "template_css.css", so make the appropriate changes to your stylesheet filename and the page link that imports it.

Here are some styles to add and modify that apply to MOS modules: 

/* ########## MODULE SETTINGS ########## */

table.moduletable {
  margin           : 0 0 0 0; /* t r b l */
  width            : 100%;
  background-color : #eee;
}

table.moduletable th {
  font-size        : 11px;
  font-weight      : bold;
  color            : #633;
  text-align       : center;
  background-color : #ccc;
}

table.moduletable td {
  font-size        : 11px;
  font-weight      : normal;
}

Notice that I used the 3-digit color shortcut. If you want more subtle shades of color than the 216 so-called "web-safe" palette, you can use the normal 6-digit "#6b3fa0" notation. Also notice I trimmed the margin "0" values; some people use "0px" but CSS doesn't care what the units are if the value is "0", so I leave the units out. In the rule above, the margin values are for the "top", "right", "bottom" and "left" sides of the element in order from left to right as shown in the CSS comment "/* t r b l */". It is good practice to always end the rules with a semi-colon (";").

Main Menu
You will probably always use a main menu module. Sometimes there will be more than one level of menu (submenus) so there are two sets of style selectors provided in MOS, one for mainlevel menu links and one for sublevel links: 

/* ########## MAIN MENU SETTINGS ########## */

a.mainlevel:link, a.mainlevel:visited {
  text-decoration  : none;
  color            : #000;
}

a.mainlevel:hover {
  text-decoration  : underline;
  color            : #f99;
}

a.sublevel:link, a.sublevel:visited {
  font-size        : 9px;
  text-decoration  : none;
  color            : #000;
}

a.sublevel:hover {
  font-size        : 9px;
  text-decoration  : none;
  color            : #900;
}

Polls
Four classes are reserved to style the look of on-line poll module, however three of them are presently hard-coded into the module. The only one you can modify from the stylesheet is the main "poll" selector class: 

/* ########## POLL SETTINGS ########## */

.poll {
  font-size        : 10px;
  font-weight      : bold;
  color            : #693;
}

Miscellaneous Styles
If, when you get your page up, there are portions of the content you wish to restyle, "view source" in your browser and find out what style class(es) apply and add a style rule to your sheet to change the color, text size, or whatever. The class appears in the page source as an attribute of the element the class applies to. For example, 

"<p class="modifydate">July 4th, 2005</p>"
colors the text in this paragraph according to the rules below with the selector ".modifydate". Here are a few you may see embedded by MOS in building your page: 

.createdate {
  font-size       : 10px; 
}
.modifydate {
  font-size       : 10px; 
}
a.readon {
  color          : #390;
}
a.readon:hover {
	text-decoration: underline;
	color          : #390;
}
.contentheading {
  color          : #390;
  font-weight    : bold;
}

To see a complete XHTML/CSS design using most of what was discussed in the article, go to Page 2 >>.

Page 1 Page 2 >>

Copyright 2005 Richard Nilsson. Verbatim copying and redistribution of this entire article are permitted without royalty in any medium provided this notice is preserved.