Designing Mambo Templates

From ThemesWiki

Source Book ISBN 978-1-904811-51-0 Publisher Packt Publishing Author(s) Christian Wenz, Tobias Hause

One of the first requisites for your website is surely its own and unique look. Left or right-justified navigation, the colors that are used, and the placement of the pictures such as logo define the layout of the website. In a CMS, the layout is separated from content, in order to make inserting content as flexible as possible. The difference from static pages becomes loud and clear: Imagine a website with ten static pages; if the position of navigation changes, you have to customize this position on each of the ten pages. On the other hand, with a CMS the layout is defined centrally and content from the data base is loaded into the layout centrally.

In Mambo, the template is responsible for defining the HTML layout. Placeholders are put in places where Mambo functions are to be added. Since Mambo is a PHP-based system, these placeholders consist of PHP code. Template and content from the database are assembled in a single index.php file in the main PHP directory. This file, however, requires a number of auxiliary files and scripts.

Every Mambo template possesses a CSS (Cascading Style Sheets) file. CSS is the W3C standard for the formatting of websites. It contains the formats for basic HTML elements and the CSS classes and IDs defined in the template. In addition, this is where you can format the classes that are used by Mambo for your own modules, menus, and elements.

Beside the template and the associated CSS file, the modules and content display also play a major role in the appearance of a Mambo site. You surely already know the basic settings for the content area and the different representational forms (tables, blogs, content elements, and so on). If you want a lot of individuality, you may have to reprogram the content components (Mambo/components/com_content) or the modules for menus and the like (modules directory).

[edit] Template Manager

The Template Manager (Site | Template Manager) is the place where templates are administered. You will find a manager for the Site Templates, which determine the appearance of the front end and thus are clearly the more important templates. Whenever we just call them "templates", in this context, we always mean site templates. Administrator Templates are designed for the administration interface and are explained in the Administrator Templates section. We will be discussing administrator templates only in that section in this book. We will stick to the standard administrator template that comes with Mambo for the rest of the book.

You can install as well as administer both kinds of templates. And last but not least, you can determine the module positions, which are the placeholders inside the templates; more about that in the Edit Template section.

[edit] Switching Between Templates

In order to replace the template in the Template Manager (Site | Template Manager | Site Templates), mark it with the radio button and then click the Default button. This template

now becomes the standard template that is shown on all the pages that do not have their own template.

You can assign your own templates and menu entries to pages with the Assign icon. To do this, you have to select a template by means of the radio button. As soon as you have assigned a template to a menu entry, this assignment remains active, even if you replace the standard template.

[edit] Installing Templates

Use the I'nstaller' to install templates. You can access it by going to Installers | Templates Site or Site | Site Templates | Install or via the New button in the Template Manager. A package with all the relevant files is uploaded. You will learn how to create your own template in the Your Own Template section. For testing, simply use an existing one from http://www.mamboforge.net/.

A template can be installed from an uploaded ZIP archive using the Upload Package File option. If this does not work because of the server rights, install the template from a directory using the Install from directory option. Enter the path to the absolute directory that contains the unpacked data there. This makes sense with a web host, for instance, with which the upload option doesn't work.

It can, however, be even less complicated. Unpack the template and use FTP to load the directory into the templates directory. Each template has its own subdirectory there; the Template Manager will automatically recognize the template when you reboot.

After you have installed a template, a success or error message is displayed. Errors are usually based on the fact that the template pack is not complete or that the installation failed because of server rights.

To uninstall templates, simply use the Delete icon in the Template Manager. The directory holding the template will be deleted at the same time.

[edit] Edit Templates

All the important details for editing templates are covered in the Your Own Template section. At this point, use an existing template from the Template Manager. Of course, it's a bit risky to tinker with the standard templates, so be sure to make copies of them before you make changes. To do this, for example, copy the standard template to the rhuk_solarflare_ii directory and play with it there.

You can make changes afterwards with Edit HTML and Edit CSS. In either case, a page is opened with the code in a text field. You can now save the file as long as it is writeable. This does not work if the safe_mode on your server is switched on .

This process is, of course, only suitable for minor changes. Larger operations should be done in a good text editor or in a web editor. When you have finished all of your changes, you can protect the script against further modification attempts by checking the Make unwriteable after saving control box.

[edit] Positions

Mambo puts placeholders into the template. Some of these placeholders apply to the content; many others are meant for modules. Modules are PHP scripts that are designed for important functions in the Mambo interface. One module, for example, is responsible for the main menu, another for the login of registered users. Modules are located at specific positions within the templates. Examples of positions, among others things, are left, right, or top. Despite these position-dependent statements, you can distribute these positions freely by using placeholders in the template. In addition, there are positions that don't have exact specifications.

You can, however, change these available positions yourself. This can be done from Site | Template Manager | Module Position. Up to fifty positions can be inserted. If you put a position right at the end, with empty spaces in front of it, it will automatically be assigned the last open position. In practice, it is great to have this capability; it is, however, hardly ever needed, since the 27 predetermined positions are almost always sufficient. Besides that, you have the option of renaming existing positions.

[edit] Your Own Template

There are two ways to get started with your own layout: You can either copy an existing layout and modify it or you can create a completely new one. The latter is naturally substantially more complicated, but it is the only way to achieve independent results. In this section we will first see the components of a template, and then generate a very simple template step by step. In doing this, we do not attach great importance to HTML and CSS programming, only to the basic principles. You can find all the possible placeholders and the important CSS classes for Mambo in the following paragraphs.

In general, a template consists of the following files:

• index.htm: This is a placeholder with a white background and nothing else.
• index.php: This is the actual template file. Since the placeholder consists of PHP commands, the file has the .php ending and, with a normal web server configuration, is handled by the PHP interpreter.
• template_thumbnail.png: This is a preview picture of the template. You can create this from your layout file, for example, in Photoshop, or you can produce the screenshot once the template is online.
• templateDetails.xml: This is an XML file with the description of the template configuration. The file contains the names of the other files that make up the template and a description of the template, among other things.
• images: The images subdirectory contains all the pictures necessary for the template. In addition, this directory contains an empty index.htm file as a placeholder.
• css: The css directory contains the CSS file for the layout. The file is generally called template_css.css. The directory contains an empty index.htm file as a placeholder.

[edit] The Example

We have borrowed the example template provided here from of one of the author's hobbies. It is the foundation of the badminton website of the TSV Starnberg club. We chose this hobby project, because that template is not too extensive and doesn't have complicated access requirements that would unduly complicate the design and development.

For our example, we begin with the XML description file. The usual XML tag is at the beginning; the <mosinstall> root element comes next. This tag is shared between the description files for templates and other Mambo extensions, such as components, modules and the like. Only the type attribute defines what it is all about:

 <?xml version="1.0" encoding="iso-8859-1"?>

 <mosinstalltype="template"version="4.5.2">

version refers to the Mambo version for which the template is designed. The templates, however, are not overly sensitive to the version number, since Mambo's handling of placeholders hasn't changed in quite some time.

Now comes an informative part with basic data about the template. It contains the name, the creation date, the author and his information, as well as a description and a copyright notice:

 <name>Badminton</name>
 <creationDate>20.7.2005</creationDate>
 <author>Tobias Hauser</author>
 <copyright>Hauser & Wenz, Arrabiata Solutions</copyright>
 <authorEmail>th@hauser-wenz.de</authorEmail>
 <authorUrl>http://www.hauser-wenz.de/</authorUrl>
 <version>1.0</version>
 <description>Template for Badminton Starnberg (www.badminton-starnberg.de/)</description>

Subsequently, the files used for the template and the appropriate preview pictures are added:

 <filename>index.php</filename>
 <filename>template_thumbnail.png</filename>

And finally comes the CSS:

 <css>
  <filename>css/template_css.css</filename>
 </css>

The directory and file name can, of course, be chosen by you; the CSS file, however, cannot be changed.

Once again, for clarity, the complete listing is shown below:

 <?xml version="1.0" encoding="iso-8859-1"?>
 <mosinstall type="template" version="4.5.2">
  <name>Badminton</name>
  <creationDate>20.7.2005</creationDate>
  <author>Tobias Hauser</author> <copyright>Hauser & Wenz, Arrabiata Solutions</copyright>
  <authorEmail>th@hauser-wenz.de</authorEmail>
  <authorUrl>http://www.hauser-wenz.de/</authorUrl>
  <version>1.0</version>
  <description>Template for Badminton Starnberg (www.badminton-starnberg.de/)</description>
  <files>
  <filename>index.php</filename>
  <filename>template_thumbnail.png</filename>
  </files>
  <css>
  <filename>css/tempalte_css.css</filename>
  </css>
 </mosinstall>

After this comes the actual template file that we will be constructing step by step:

1. First test Mambo to see whether the template page is being accessed directly. If so, then this is disabled by aborting the script:

     <?php
   defined( '_VALID_MOS' ) or ( 'Direct Access to this location is not allowed.' );
   

   ( Note : The templates provided with Mambo use the <?xml ?> tags in the PHP script at the very top of the template file (processing instruction). In practice, this is not necessarily recommended, since Internet Explorer 6 abandons its strict mode CSS rendering with this and switches to quirks mode, which is resident in Internet Explorer 5.x. For this reason we will forego the processing instruction )

2. In the same PHP script you also define any variables that you will need in the course of the process. For instance, we define the path, in order to be able to refer to the template with an actual absolute path.

   $path = '/templates/badminton/';
     ?>
   

3. The <head> of the HTML page comes next. From Mambo's viewpoint, several things are now relevant. First you issue the Mambo-defined header with the mosShowHead () routine. This contains the Mambo-generated <meta> tags:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "DTD/xhtml1-transitional.dtd">
     <html>
     <head>
     <?php mosShowHead(); ?>
   

4. Subsequently, you specify the character set; the associated _ISO constant gets the value from Mambo:

     <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
   

5. The next step would be to link the stylesheet.

     <link rel="stylesheet" href="<?php echo $mosConfig_live_site .
     $path;?>css/template_css.css" />
     </head>
   

   You could, of course, also import it with @import. The main difference is that @import excludes Netscape Navigator 4.x. Since a badminton website is regarded as having a target group with a large variety of computer equipment and as, at the same time, blind people, for practical reasons, don't have a lot to do with badminton, we have opted for a simple table layout.

6. The next step deals with the content. For the following example we use a fixed layout, which, for the sake of simplicity, has only one layout table. Fixed layout means that a given width (here 800 pixels) is defined for the page and the page does not adapt to the browser window. With a half flexible layout, a part of the page, usually the content area, does adapt. With flexible layout, all parts have variable sizes. A fixed layout is to be preferred here, since the badminton court is to be used as background picture and thus a given size is predetermined. The first lines serve to position the logo correctly. The logo comes from the images folder of the template. $mosConfig_live_site is the Mambo variable that contains the absolute link to the Mambo site. The background picture is not defined in the table, but in CSS for the entire page.

     <body>
     <table border="0" cellpadding="0" cellspacing="0">
     <tr>
     <td height="30" colspan="3"></td>
     </tr>
     <tr>
     <td width="90"></td>
     <td colspan="2"><img src="<?php echo
     $mosConfig_live_site. $path;?>images/logo.gif" width="200" height="80" alt="Logo TSV Starnberg Badminton" title="Logo TSV Starnberg Badminton" /></td>
     </tr>
     <tr>
     <td height="20" colspan="3"></td>
     </tr>
   

7. Next, the positions are assigned. For this example, the top position contains Mambo's main menu module in horizontal adjustment. A position is merged with Mambo's default mosLoadModules ('position name') PHP function. The first parameter is the position name. You can also assign an optional second parameter that determines whether the modules are displayed with titles and other paraphernalia. This is explained in detail in the Template Functions section.

     <tr>
     <td width="90"></td>
     <td width="30"></td>
   
   <td><?php mosLoadModules('top'); ?></td>
     </tr>
     <tr>
     <td height="20" colspan="3"></td>
     </tr>
   

8. You can insert the content with Mambo's own mosMainBody()function :

     <tr>
     <td width="90"></td>
     <td width="30"></td>
   
   <td><?php mosMainBody(); ?>
   

9. In our example, this is followed by a footer with the print option linked by means of a menu module. Therefore we merge the position footer, as can be seen in the following:

     <br /><br />
     <span class="footer">© TSV Starnberg Division
      Badminton <?php mosLoadModules('footer'); ?></span>
     </td>
     </tr>
     </table>
     </body>
     </html>
   

   Your new template is ready. Here again is the overview of the code:

   <?php
   defined( '_VALID_MOS' ) or ( 'Direct Access to this location is not allowed.' );
   $path = '/templates/badminton/';
   ?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
     <html>
     <head>
    <?php mosShowHead(); ?>
     <meta http-equiv="Content-Type" content="text/html;
    <?php echo _ISO; ?>" />
    <link rel="stylesheet" href="<?php echo $mosConfig_live_site . $path;?>css/template_css.css" />
    </head>
    <body>
     <table border="0" cellpadding="0" cellspacing="0">
     <tr>
     <td height="30" colspan="3"></td>
     </tr>
     <tr>
     <td width="90"></td>
    <td colspan="2"><img src="<?php echo $mosConfig_live_site .
    $path;?>images/logo.gif" width="200" height="80"
     alt="Logo TSV Starnberg Badminton"
     title="Logo TSV Starnberg Badminton" /></td>
     </tr>
     <tr>
     <td height="20" colspan="3"></td>
     </tr>
     <tr>
     <td width="90"></td>
     <td width="30"></td>
    <td><?php mosLoadModules('top'); ?></td>
     </tr>
     <tr>
     <td height="20" colspan="3"></td>
     </tr>
     <tr>
     <td width="90"></td>
     <td width="30"></td>
    <td><?php mosMainBody(); ?>
     <br /><br />
     <span class="footer">© TSV Starnberg - Division
      Badminton <?php mosLoadModules('footer'); ?></span>
     </td>
     </tr>
     </table>
    </body>
    </html>
   

   This is how the website looks once the template is applied:

   

   

   We now take care of the CSS part. You have seen that in the source code we have planned to create our own CSS class for only one place, namely, the footer. The rest of the stylesheet functions by means of the Mambo-defined tag formatting and standard CSS classes. You can find an overview of the classes in the CSS Formats section. The complete code is as follows:

    /* basic formats */
    body {
     background-image: url(http://www.badminton-
     starnberg.de/templates/badminton/images/hg.png);
     background-repeat: no-repeat;
     background-position: 4px 4px;
     background-color: #999999;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 9pt;
     margin: 0px;
     padding: 0px;
    }
    table, td {
     margin: 0px;
     padding: 0px;
    }
    
    /* heading and Mambo CSS class for headings*/
    h1, .contentheading {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16pt;
     color: #05C5EB;
     text-transform: uppercase;
     margin-top: 0px;
     margin-bottom: 8px;
     margin-left: 0px;
     margin-right: 0px;
     padding: 0px;
     text-align: left;
    }
    
    /* format for content tables */
    table.tabelle1 {
     background-color: #05C5EB;
     border: #05C5EB 1px solid;
    }
    td.header {
     background-color: #587B7B;
     color: white;
     font-weight: bold;
     font-size: 20px;
     text-align: center;
    }
    
    /* tag oriented link design */
    a {
     text-decoration: none;
     color: #05C5EB;
    }
    a:hover {
     color: white;
    }
    
    /* main menu design */
    a.mainlevel {
     color: white;
     font-size: 12pt;
     padding-right: 32px;
     font-weight: bold;
     text-decoration: none;
    }
    a.mainlevel:hover {
     color: #05C5EB;
    }
    a#active_menu {
     color: #05C5EB;
    }
    
    /*my own CSS class for the footer */
    .footer {
     font-size: 7pt;
    }
    
    /* footer module with suffix */
    a.mainlevel_footer:hover {
     color: #587B7B;
    }
   

   The code shows Mambo's capabilities for CSS formatting; in overview:

   Tag formats: These form the foundation of most sites' CSS. For example, they format the entire text of the site with the body selector, and all the links with the a selector. A selector is the tag name, the class, or ID, with which CSS determines to which HTML elements a style is applied. Due to CSS's cascading sequence, these general selectors can be overwritten by more specific specifications for subordinated tags, classes, or IDs.

   Self-defined classes and IDs: These can be used to format your own areas. In our example, we define the footer class for the copyright message. Owing to CSS inheritance, its format also applies to the content of the HTML source code for the footer position that Mambo inserted subsequently.

   ( Note : The standard Mambo online editor, TinyMCE, automatically scans the CSS file in the template and offers the CSS classes that you have defined for formatting in the Styles selection list. The HTMLArea 3, which is included with the eCommerce edition of Mambo (and is actually more extensive), cannot do that; with it, you have to modify the styles by hand in the mambots/editors/ htmlarea3_xtd.php file. Look for the following list and insert your styles:

    options: { "[None selected]": "",
    "Highlighted": "high",
    "Contentheading": "contentheading",
     "Componentheading": "componentheading",
     "Moscode": "moscode",
     "Message": "message"
    }
   
   )
   

   Mambo defines its own CSS classes (see the CSS Formats section) for the most important elements. Check the source code and find out which one is used for your respective page. In this example, contentheading is used as the class for headings. In addition, Mambo uses a mainlevel CSS class which we have used here to format the main menu.

   Mambo defines an ID for the active element of a main menu (active_menu). You should insert it in order to emphasize the respective active menu element. This will help visitors to your site see which section of the site they are currently viewing.

   Mambo allows you to add a suffix as a parameter for the standard CSS class having the menu modules and many other modules. For menus there is a special Menu Class Suffix; for modules there is generally a Module Class Suffix. This appendage shows up at the end of the name of the normal CSS class and is necessary to differentiate between the different menus and modules; for example, with menus you will have Module Main Menu, Other Menu, Top Menu, User Menu, and so on. The Top Menu is the only one with a suffix with a basic installation, namely -nav. For menus, the suffix is also attached to the ID that marks the active menu element. In our example, our active_menu got the ID active_menu_footer.

   Now you can use the CSS. The best thing to do is to take a screenshot (Alt + Print Screen for a window) and save this as a PNG file named template_thumbnail.png in the main directory of the template.

   

   

[edit] Template Functions

This section lays out a clear summary of the relevant Mambo placeholders and template functions. The frontpage.php file is responsible for the assembly. Most of the template functions are defined here accordingly. In Mambo, a template function is directly responsible for the way a screen is displayed. Unlike the variables (which we will discuss later), you do not need any PHP commands to get the output. It is sufficient to execute the function in a PHP block within the template:

<?php mosMainBody(); ?>

The following table provides an overview of the functions available in Mambo.

Table 2.1: Mambo's Template Functions

The following Figure gives an overview of the various module variants:

Instead of using the functions, some content can be merged directly by means of a script file. Simply insert <?php include 'pathway.php'; ?> or <?php include 'mainbody.php'; ?> in the designated place. Unfortunately, both variants are not recommended. For that reason you should revert to mosPathWay() and mosMainBody().

In some example templates, the footer is often integrated with the copyright notice and the reference to the Mambo website. Here is an example from the rhuk_solarflare_ii standard template:

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

This could also be done a bit more elegantly by means of the global variable for the absolute path:

<?php include_once $mosConfig_absolute_path . '/includes/footer.php'; ?>

Apart from the global variable, all the configuration settings from Mambo's main configuration.php configuration file are at your disposal by default. Note that since these variables are generally used before the templates are loaded, a modification in the template doesn't make any sense.

Besides the variables from the configuration file, there are a few variables or constants that you could possibly use you in the template. The following table gives you an overview of these.

! Table 2.2: Important Variables and Constants

 if ( $my->id ) {
  itEditor();
 }

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

For a search, you can integrate a search form directly with the template:

 <form action="index.php" method="post">
  <div align="center">
  <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" />
  </div>
 </form>

The trick is to transfer a hidden form field with the name option and the value search with the form. Mambo checks this in the central index.php and then displays the search result.

In addition, you can, of course, access the URL directly by means of $_GET from the template and react to it. However, it is usually better to pack such function into a Mambo extension .

Direct links within the templates are also possible. You build them up just like every Mambo URL. You can find the URL of an element in Edit mode or you can, in each case, follow the normal link within a menu.

When it comes to the main page, you can always reach it by means of index.php?option=com_frontpage. Here, however, the special settings that you may possibly have specified in a link to a menu are not followed. In order to preserve these, you must add the Itemid of the menu, something like this: index.php?option=com_frontpage&Itemid=10. References to other components vary depending on component.

[edit] CSS Formats

Beside the CSS classes that you define in the template, Mambo installs a number of its own classes. The following Figure shows the CSS classes for the home page of the example Mambo application. However, even additional CSS classes could be active, depending on subpage and the modules that are displayed.

We will now briefly introduce the various types of CSS classes:

• Classes for content: Content elements possess some standard classes such as .contentpaneopen and .contentheading. Depending on other specified functions, special classes such as .createdate for the creation date or .mosimage for a picture merged by MOS image are added.
  

  
• Class for a blog: The blog display has its own class. The entire content area receives the .blog class. The content itself, however, is in the usual classes.
• Class for an overview of a list or table: There are separate styles for displaying a table.
  

  
• Classes for menus: The .mainlevel class is used for menu entries. As already mentioned in our example, sometimes suffixes are attached for different menus (in the Edit mode of the menu modules). The active menu element has the ID #active_menu. ( Note - 'If you are creating a menu rollover (hover) effect with CSS instead of with JavaScript, and would like to control the emphasis of the active menu element with CSS as well, you can do it with a simple modification of the color and script formats. If, in addition, this is to be a graphic button, then you can do this by modifying a background picture with CSS. The rhuk_solareflare_ii Mambo template makes use of this trick. )'
• Classes for modules: If a module is displayed with title bar, it automatically has the .moduletable and .contentpaneopen classes for the content. The title is formatted by means of the <th> tag and .moduletable:

   table.moduletable th
   {
    /* format commands */
   }
  

• Special classes for a module: Many modules for example Syndicate, Login Form or even Search define their own CSS classes.
• Classes for form elements: Buttons normally have the .button class; input fields and other form elements like option lists have the .inputbox class. For special buttons like the back button, there is a separate .back_button class.
• Classes for components: Components recognize general classes such as .componentheading (heading, component title), .contentpane (content area) and .contentheading (heading within the content area). There are also special classes for some components.
• Classes for links: Links refer to sections, categories, and the like. These classes are usually inserted in link tags; an example is .category.

[edit] Administrator Templates

As we mentioned initially, the management of administrator templates works exactly the same as that of site templates. The only thing missing is the Assign function, since there are no classic menu entries for the administration interface. But we have to be honest nobody can stand an administrator template that changes on every page anyway.

When you check out the files of one of the administrator templates in the administrator/templates directory, you will notice other differences:

• The administrator template has more template files. Beside index.php, login.php supplies a model for the login page and cpanel.php a template for the Mambo control panel.
• The XML description file, in addition, contains the attribute client="administrator" for the <mosinstall> tag. This is the only explicit clue that this is an administrator template.
• Separate merge functions exist for administrator templates. The most important new function is mosLoadAdminModules (position, representation) for the merging of positions like toolbar, pathway, and fullmenu. The content items themselves are not loaded by means of a function, but merged.
• Many commands for instance, the merging of the essential JavaScript libraries or the check whether the main menu is to be displayed or not is done with hard code, and is thus firmly integrated into the template. To create a new template, you have to take care of all the relevant details yourself.

Separate CSS classes are available for the administration area. You can find these in the supplied CSS files of the available administrator templates.

[edit] Useful Stuff

The creation of a template is not necessarily one of the easiest tasks. Therefore it is correct and cost effective to ask for help.

[edit] Prefabricated?

It doesn't matter whether it's on the official download server (http://www.mamboforge.net/), at the Mambo link directory (http://www.mamble.com/index.php?t=sub_pages&cat=7), or at specialized Mambo pages templates are like grains of sand by the sea. Some of them are outstanding. In the rarest of cases, they are unique enough to stand apart from the numerous other pages. The same applies to the manifold commercial offers.

There was a template generator for older Mambo versions. This project is currently being reworked, but no files have been released as of yet.

[edit] Dreamweaver Template Builder

Since Macromedia Dreamweaver (http://www.macromedia.com/software/dreamweaver/) is among the market leaders when it comes to professional web editors, there was a Mambo template builder for quite a long time. We are talking about a normal Dreamweaver extension that you can install by means of the Macromedia Extension Manager. The Extension Manager is in the same program group as Dreamweaver itself.

Why are we talking in past tense? The version shown is unfortunately not suitable for Mambo 4.5.2. A new project for this developed just as the book was being published and can be found at http://mamboforge.net/projects/dwsnippets/. However, as of now there are no files published. Fortunately, a second current project also exists at MamboForge at http://mamboforge.net/projects/mambosolutions/ and also offers an extension. In addition there is also a plug-in available for the HTML editor at that site, called HTML kit.

Download the package (mambosolutions453.mxp also works for Mambo 4.5.2) from there for the installation. Double‑click on it and to open the Extension Manager. After you have accepted the license conditions, the installation starts.

Now you have to restart Dreamweaver. You will subsequently find the template builder in the insertion menu and in the tool bar, in each case under Mambosolutions453. In principle, you can see the most important placeholders concentrated in one place and you can simply build your template. It's no quantum jump, but quite practical for hard‑working Dreamweaver users.

[edit] Template Chooser

The template chooser module is not directly connected with template creation, but extends the horizon of display possibilities. By means of a selection list, it gives the user the choice of using one of the existing templates.

You can switch the module on via Modules | Site Modules. There you will also find a few options, which, however, are only of visual nature. You can select the cut-off character of the template name. In addition, you can determine whether the preview picture of the template is to be shown and the dimensions.

Unfortunately you cannot select which templates will be displayed with the Template Chooser. In order to achieve that, you would have to rewrite the module under modules/mod_templatechooser.php. The simplest way would be to introduce an additional parameter, which would display the templates to be shown in a list; all you need to do then is to select these templates.

That means that you would have to delete templates that should not be selectable. In principle, it is advisable to save the templates from the standard installation somewhere or to have another standard installation ready, in order to be able to revert back to it again at any time.

[edit] Summary

This tutorial has shown you how to put your own personal stamp on Mambo. You have created your own layout and now also know how to create your own Mambo templates. All Mambo sites look similar after installation. This means that your creativity is a necessary ingredient if you want to stand out against the crowd.

[edit] Additional References

• For instructions on Customizing Mambo Templates, click here
• For instructions on Installing Mambo, click here

[edit] Additional Resources

For more information, visit netshinesoftware.com

[edit] Source

The source of this content is Chapter 2: Designing Your Own Templates of Mastering Mambo : E-Commerce, Templates, Module Development, SEO, Security, and Performance by Christian Wenz, Tobias Hauser (Packt Publishing, 2005). logo design by Kevin Josh 2010 criar sites