|
The header is a mysterious thing even for expirenced MOS template designers. Mamboportal gives you a brief overview about the elements of the templates header.
Ok, lets start in just taking a look at an actual header of a template I did for MOS 4.5 final 1.0.7. I colored the template's header, which should make it easier for you to read it. We have colors for PHP code, HTML code and Javascript code: <?php
echo "<?xml version="1.0"?>";
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
?>
<!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">
<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();
}
include ("includes/metadata.php");
?>
<script language="JavaScript" type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="<?php echo $mosConfig_live_site;?>/templates/templatename/css/template_css.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/templates/templatename/favicon.ico" />
</head> |
We start with some PHP code first to make sure no one can access the templates file directly and set XML version to 1.0. This must be included, but is not really of interest for a designer. Also the next few lines which set document type and open up the HTML file are uninteresting. So we start with the first real interesting line, which is the title tag. The title tag
To make your template show the websites name, which is entered by the admin of a websites global configuration (and the installation of course), you have to use some PHP code in the title tag. The MOS internal variable '$mosConfig_sitename' contains the data from the configuration. It is inserted into the title tag using php's echo command. The ISO settings
The next line contains the ISO charset settings, which is also inserted using php. The charset setting is included into Mambo's language files and may differ from language to language. To make sure your template runs with every language installed, you should not change this line. Starting up the HTML editor
The following lines will load the HTML editor and initialize the editor. As this makes only sense if a user is loged in, this will be checked, before the editor is loaded. By default this is HtmlArea2, but this can be changed in the global configuration. Take a look at Mambo's editor folder for more informations. Metadata inclusion
The next three lines are included into a php block. The first line uses the php inlcude command to run the file metadata.php from the includes folder. This small piece of code makes sure you always have the right metadata inlcuded into your websites header. It grabs the global metadata from the configurations for non content pages and the metadata enteres into your content items on content pages. The Style Sheet
To load your templates style sheet file, you must specify from where it should be loaded. Be sure to change the path to your templates name in this line. It is also wise to you another internal MOS variable, which is called '$mosConfig_live_site'. This is the path to your MOS root directory, which ensures your template also runs smooth, when MOS is not installed in the webserver's root directory. The FavIcon
Once invented by Microsoft's Internet Explorer the FavIcon has made it's way to most recent browsers. It's a small 16x16 icon which is shown in front of your page's bookmark entry. The actual link, which also uses the '$mosConfig_live_site' variable, leads to a MOS standard icon showing the orange flower. To build your own icon use a standard Iconeditor or use the wonderfull favicon.co.uk online editor. Conclusion
The MOS header should now be no unknown thing anymore to future template developers. Be sure to always take a look at the header of the included template, when a new version is released. Most templates also use things like a Navigator 4 resize script or other stuff, which isn't a must have. |
