Web Design:
Basic Mambo Templating

Richard H. Nilsson, April 24, 2005

The Mambo Page Template

<!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();
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>

<body>
  <div id="header">
  <div id="search">
    <form action="index.php" method="post">
     <input class="inputbox" type="text" name="searchword" size="15" 
         value="<?php echo _SEARCH_BOX; ?>"  
         onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" 
         onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" />
     <input type="hidden" name="option" value="search"/>
     </form>
  </div><!--end search-->
  <p class="title">My Mambo Website</p>
  </div><!--end header-->
  
  <!--begin pathway-->
  <div id="pathway">
    <div style="float:right;">
    <?php echo ( strftime( _DATE_FORMAT_LC, time() + ($mosConfig_offset*60*60) ) ); ?>
    </div>
    <?php include "pathway.php"; ?>
  </div><!--end pathway-->

  <div id="frame">
    <!--begin leftcontent-->
    <div id="leftcontent">
      <?php mosLoadModules ( 'left' ); ?>
    </div><!--end leftcontent-->
  
    <!--begin maincontent-->
    <div id="maincontent">
      <?php include_once ("mainbody.php"); ?>
    </div><!--end maincontent-->
  </div><!--end frame-->
  
  <!--begin footer-->
  <div id="footer">
    <p> </p>
    <p>© <a href="http://watersgulchdigital.com"    
          target="_blank"><strong>WatersGulchDigital</strong>
          <a> 2004 
<?php include_once($GLOBALS['mosConfig_absolute_path'].'/includes/footer.php'); ?>
<?php mosLoadModules('debug', -1);?>
    </p>
    <p> </p>
  </div><!--end footer-->
  
</body>
</html>

The Stylesheet

[+] The rendered template

body {
 margin: 0;
 font: .9em/1.0 Arial, Helvetica, sans-serif;
 color: #333;
 background: #fff;
 height: 100%;
 }
#header {
 position: relative;
 width: 790px;
 height: 60px;
 margin: 30px auto 0 auto;
 background: #363;
 text-align: left;
 }
#search {
 position: relative;
 float: right;
 margin: 20px 0 0 0;
 }
.title {
 display: block;
 font-size: 2em;
 font-style: bold;
 color: #fff;
 margin: 0 0 0 .5em;
 padding: 30px 0 0 0;
 }
#pathway {
 position: relative;
 width: 790px;
 margin: 0 auto;
 text-align: left;
 }
#frame {
 position: relative;
 width: 790px;
 margin: 0 auto;
 height: auto;
 border-top: 1px solid #000;
 text-align: left;
 }
#leftcontent {
 position: relative;
 float: left;
 width: 150px;
 height: auto;
 padding: 5px;
 text-align: left;
 }
#maincontent {
 position: relative;
 float: left;
 width: 600px;
 height: auto;
 border-left: 1px solid #000;
 padding: 5px;
 text-align: left;
 }
#footer{
 position: relative;
 clear: both;
 width: 790px;
 height: auto; 
 margin: 2em auto 0 auto;
 text-align: left;
}

.clr{clear:both;}

.content {
 text-align: left;
 padding: 5px;
 }

a {
 color:  #666; 
 text-decoration:  none; 
 }
a:hover {
 color:  #390; 
 text-decoration:  underline; 
 }
.pathway {
 margin-left: 1em;
 }
hr {
width:  90%; 
 }
hr.separator {
width:  40%; 
 }
.small {
	font-size:  10px; 
 }
.smalldark {
	font-size:  10px; 
	font-weight:  bold; 
 }
.sectiontableentry1 {
 background: #ccc; 
 }
.button {
 color: #390; 
 border: 1px solid #060; 
 }
.inputbox {
 border: 1px solid #000;
 }
.ontab {
	color: #fff; 
	background: #888; 
 }
.offtab {
	background: #ccc; 
	border-width: 1px; 
	border-style: solid; 
 }
.createdate {
 font-size: 10px; 
 }
.modifydate {
 font-size: 10px; 
 }
a.readon:hover {
	text-decoration: underline;
	color: #390;
}
.contentheading {
	color: #390;
	font-weight: bold;
 }
a.category:hover {
 text-decoration:  underline; 
 }
table.moduletable {
 width: 100%;
 font-size: .9em;
 }
table.moduletable th  {
 color: #fff;
 background: #aca;
 text-align: center;
 }
a.fase4rdf {
 text-decoration:  underline; 
 }
a.fase4rdf:hover {
 text-decoration:  underline; 
 }

Return to the tutorial, << go to Page 1 .

<<Page 1 Page 2

Web Design:Basic Mambo Templating

The Mambo Page Template

The Stylesheet

Web Design:
Basic Mambo Templating