Customizing Mambo Templates
From ThemesWiki
| Official Page |
| Project Documentation |
| Download |
|
In this tutorial we'll walk through making some basic customizations to one of the existing Mambo templates to produce a very different looking template for Zak Springs(Sample website). We'll change the header graphic and the page background, customize the main content area, change the way modules and the menus are displayed, and so on.
We'll finish off with the steps required to turn your template into a unit that can be installed onto another Mambo site.
First, let's talk about what you will need to work with templates.
Contents |
[edit] What You Need
We'll be working with three main things in our template activities; PHP code files, the CSS stylesheet, and graphics.
You don't need to know very much about PHP to work with the PHP code file in the template, partly because there isn't much PHP code in the file, it is mostly HTML markup. To edit the PHP code file you can use a standard text editor, like Notepad or one of the other free text editors like the excellent PSPad (available from www.pspad.com). The code file in question isn't that large or complex, and there isn't much to gain from editing this file in a more complex HTML editing application like Adobe's Dreamweaver or FrontPage.
The Cascading Style Sheet (CSS) is another plain text file, and can also be edited in a text editor. When doing further work on the stylesheet, you may find the extended features of a Dreamweaver-like application helpful, but for our work here, the text editor will suffice.
Editing the CSS file isn't particularly the problem here. The problem could be how comfortable you are working with CSS. As you'll see, most of the formatting for the template is governed by the CSS file. We'll take you through most of what you need to perform the tasks here, but to get serious with Mambo templates, growing your knowledge of CSS is a good idea.
We'll be doing some work with graphics in the course of making our template as well. For this, you'll need some kind of image editing application, such as PhotoShop, PhotoShop Elements, or something like the open-source GIMP application. Any of these will be able to help you perform the kind of tasks we do in this tutorial, and much more.
There is another set of tools that will be very helpful when working with templates, browser tools. There are a number of tools that you can plug into your browser that can help you work out what style is being applied to what part of the page, and also the overall structure of the page.
If you're using the Firefox browser, there are two particularly useful extensions that can be downloaded, installed, and used from within the browser. The first is the Web Developer extension, available from https://addons.mozilla.org/firefox/60/. The Web Developer toolbar allows you to outline various elements on the page, such as table or block-level elements, see what CSS classes are applied to particular elements, and also see the definition of those classes. The Firebug extension, available from https://addons.mozilla.org/firefox/1843/, offers even more power, including an inspector to reveal the structure of the page and a JavaScript debugger. Installing Firefox extensions is a straightforward operation.
For Internet Explorer 7, there is also a "Web Developer Toolbar", similar to both the Firefox Web Developer Toolbar and the Firebug extension. It can be downloaded from:http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
There is also a similar toolbar for the Opera web browser, available from:http://operawiki.info/WebDevToolbar
For the Safari web browser, you can try the Web Inspector available from:http://webkit.org/blog/?p=41
One other thing to note: we'll be making changes to the files in our template, and then refreshing our browser pages to see the changes. If you find that refreshing the page in your browser isn't changing anything, you might want to perform a "hard" refresh (Ctrl + F5 in many browsers), which will ignore any items your browser might have cached. Internet Explorer in particular often needs a hard refresh to take notice of a change in the stylesheet of your template.
[edit] Template File Structure
A "template" is a folder that contains a couple of files and two folders. First of all, the folders:
-
css: This folder contains the CSS stylesheet for the template. The stylesheet file is calledtemplate_css.css. -
images: This folder contains the images that are used by the template. This can be background images, images for the site banner, and so on.
The files in the template folder are as follows:
-
templateDetails.xml: This is an XML file that contains the metadata about the template; the name of the template, the author, date it was created, and also a full list of the files in thecssandimagesfolders. -
template_thumbnail.png: This image is a "thumbnail" of the final template as it would be seen on the screen. This is the image that pops up when you hover the cursor over a template in the Template Manager. Typically, this image is around 200 pixels wide. -
index.php: This is a PHP code file, and is actually the "template" itself. This file contains the HTML markup for the page, along with some inserts of PHP code that call Mambo functions to display modules and so on.
That doesn't seem so bad, just three files and some images in a template!
[edit] Creating a New Template
To get started, create a copy of the waterandstone_green folder and call it zaksprings. We're going to work with the green Water and Stone template, and gradually change it as we go.
[edit] Changing the Template Details
The first step is to change the name of the template, so open up the file templateDetails.xml in a text editor, and change the name element as highlighted below:
<?xml version="1.0" encoding="iso-8859-1"?> <mosinstall type="template" version="4.5.3">
<name>zaksprings</name>
After you've done this, save the file, and let's move on.
The templateDetails.xml file contains metadata for the template, which is used to identify it to the Template Manager in the Mambo administrator area, and also provide information that can be used by the Universal Installer when the template is installed. We'll talk more about this metadata at the end of the tutorial when we've completed our new template.
Now if you browse to the Template Manager, you will see the zaksprings template in the list; select it, and set it is as the default template so that we'll be able to see how our changes look.
[edit] The Template File Itself
Although we are talking about "templates", the index.php file in our template folder can really by called the "template". You can open this file in your text editor to look at as we go further.
The file starts by preventing direct access to the template, and then declaring the document type of the page. The document type is XHTML, which is a "stricter and cleaner" flavor of HTML, intended to add a proper XML structure to HTML pages. You can read more about XHTML at: http://www.w3schools.com/xhtml/xhtml_intro.asp.
<?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] .'"?' .'>'; ?> <!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>
The next part of the template sets up the <head> element of the page, which includes such things as the meta tags that Mambo will generate (these are included by the mosShowHead() PHP function), and some references to include the JavaScript required for the HTML editor and also the CSS stylesheet for the template from the css folder of the template. If you wanted to add in references to other stylesheets or JavaScript libraries, you would do that in this part of the template:
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
initEditor();
}
?>
<meta http-equiv="Content-Type"
content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>
/templates/waterandstone_green/css/template_css.css"
rel="stylesheet" type="text/css"/>
</head>
As you continue to look through the file, you'll notice the presence of the word waterandstone_green in links to images and also the stylesheet. For example:
<link href="<?php echo $mosConfig_live_site;?> /templates/waterandstone_green/css/template_css.css" rel="stylesheet" type="text/css"/> ... <a href="index.php"> <img src="<?php echo $mosConfig_live_site; ?> /templates/waterandstone_green/images/logo.gif" alt="logo image" border="0" align="top" /> </a>
These are references to our source template, so you will need to change this to point to your new template. If you don't, then you might wonder why nothing is happening when you start adding new graphics it's because the wrong folder is being looked in for that new image!
Using the search and replace feature of your text editor replace all occurrences of waterandstone_green with zaksprings, and then save the file.
Quite a lot goes on in the index.php file, and display of the page only really starts with these lines:
<body class="waterbody"> <div align="center"> <div id="container"> <div id="containerbg">
From then on, the file consists mostly of HTML container elements, and some PHP statements (as highlighted below):
<!-- start left column. -->
<div id="leftcol">
<?php mosLoadModules('left'); ?>
</div>
<div id="leftcolmenu">
<?php mosLoadModules('user1'); ?>
</div>
<!-- end left column. -->
The file also has a number of HTML comments (enclosed by ), which help to give you an idea of what's going on. The snippet above displays the left‑hand column. An HTML div element is created, with an id attribute of leftcol. This id attribute will be used to identify that particular page element by the CSS stylesheet. What goes into this div element? The output of the mosLoadModules('left') function will be the value of div element.
You can almost guess what mosLoadModules('left') does. It displays all the Mambo modules that have a position of left.
Further down the file, you can see some other functions:
<?php
if (mosCountModules('user2') >= 1 OR mosCountModules('user3') >= 1 ) {
?>
...
<?php mosPathWay(); ?>
...
<?php mosMainBody(); ?>
The name, of these functions gives a big clue to what they are expected to do. The mosCountModules() function returns the number of modules in a particular position. This function is used in case you wanted to enclose the modules in some kind of container element, but you only wanted the container element displayed if there were actually some modules to go in it.
The mospathWay() function displays the breadcrumbs:
The main part of the page is displayed by mosMainBody().
[edit] No Logic Here
One thing you will notice is that once the display of the page starts after the <body> tag in index.php, there is very little "logic" in the index.php file. There are only two if statements in the entire file and both of these only check if a particular module position has some modules.
There is little point in putting logic into the template file. Through the module and menu management systems of Mambo's administration, you have already encoded a lot of logic on how your site will look and operate; displaying modules in certain positions on certain pages, restricting certain menu items to some types of user, and so on. Also, the ability to select a different template for different sets of pages adds another layer of logic, so there isn't that much left to put into the template. Also, you would need to have a very good knowledge of the inner workings of Mambo to introduce more complex logic into the page output.
[edit] Links to Images
Another thing to note is the links to images in the file. They look like this:
<img src="<?php echo $mosConfig_live_site; ?> /templates/zaksprings/images/img_header.jpg" alt="header image" />
The $mosConfig_live_site variable holds the path to your site (http://www.zaksprings.com for example), which is added to the path to an image. The images for a template are found in its images folder, so you might be wondering why you would need a long path to get to that image, why not simply images/img_header.jpg? That's because the browser is not requesting the file index.php in the templates folder. The page requests to Mambo always come through a few files in the root of the Mambo installation, index.php, index2.php, and so on. The index.php file of the template is "included" by Mambo for processing, so although the image looks like it's only one folder away from that index.php file, you need to write the full path to the image, which is templates/<name of template>/images for a visitor's web browser to get at an image.
[edit] No Layout Here
You may also be wondering where all the layout information in the template is. There doesn't really seem to be very much in the template in terms of HTML markup, just some <div> elements. That's because all the formatting is passed on to the CSS stylesheet. The tasks such as where these <div> elements go on the page, how big they are, what color they are, and what their text looks like are controlled by the CSS stylesheet.
To get a better picture of the importance of the stylesheet, this image shows the basic Water and Stone template without the stylesheet applied. As you can see, it's not particularly good!
The stylesheet transforms this basic list of items into a web page.
[edit] XHTML Compliance
Before we go any further, it's worth reflecting on the idea that the page created by the template is XHTML rather than standard HTML, or put another way, the page is XHTML compliant. One of the obvious differences between XHTML and HTML is that tags need to be closed, in order to be valid XML. In HTML, you can get away with using tags like:
Time for a line break<br> and now a picture: <img src="images/myimage.gif">
However, to be valid XHTML, the <br> tag would need to be closed. This is not done with a </br> tag, but with /> characters at the end of the tag instead of the > character. The same is true for the <img> tag. Thus, to produce valid XHTML, we would want:
Time for a line break<br/> and now a picture: <img src="images/myimage.gif"/>
This might seem like a lot of work to produce XHTML. Every time you used tags like these, you would want to make sure the tags are closed. However, if you think about it for a moment, you really won't have to do this that often.
There are three main ways that text finds it way onto your pages in Mambo
- From the HTML editor
- From code in Mambo components, modules, and so on
- From the markup in the
index.phpfile of the template
Whenever you add marked-up content in Mambo, you would generally find yourself using the HTML editor. When entering content through the HTML editor, if you've had a look at the HTML source as you're editing, you'll see that HTML editor itself ensures that the tags are XHTML compliant, <img> tags become <img/> and so on. If you work directly with the HTML source in the HTML editor, then you can try to introduce non-XHTML compliant markup, but even then, the HTML editor will do its best to make it XHTML compliant!
Mambo components produce their own output. It is up to the programmer of these components to make sure that the output is XHTML compliant, and generally, they do a good job of this.
The markup in the index.php file of the template looks like the only place you can really mess things up! This is one reason why the markup in the template looks simple; it basically consists of a number of <div> elements, and as we'll see, the formatting and layout of these elements is controlled by the CSS stylesheet. In addition to decoupling the layout of the page from the markup, this approach gives less opportunity for creating non XHTML-compliant markup as well.
So, keep an eye on the markup you add to the template, keep it XHTML compliant, and the rest of Mambo will keep things XHTML compliant as well. This is something to watch out for if you are editing the index.php file in some HTML editing application, such as FrontPage, which often has its own ideas about what kind of HTML it thinks you want to enter.
[edit] Customizing the Page Layout
We've seen the basics of what templateDetails.xml and index.php do. Now we're actually going to get started.
In this section we'll go through some basic changes to the page layout:
- Replacing the Header Graphic
- Moving the Top Menu
- Changing the Page Background
- Changing the Fonts
- Changing the Main Content Area
- Customizing the Read More Link
- Changing the Background Color of the Columns
- Adding the Bottom Menu
The first two will involve changes to index.php, after that, we're into the stylesheet!
[edit] Replacing the Header Graphic
We've got a rather nifty site banner for Zak Springs, and we want it to replace the existing two top images in the current template:
You'll find the new header graphic, img_header.jpg, in the code download(Chapter 11). Copy it to the images folder of zaksprings template, and it will replace an existing file there.
You'll have noticed that there are two graphics in the current "header", the logo at the top (logo.gif) and the image header below (img_header.jpg), with the top menu in between them. If we look in index.php, this is what we see. The top menu is highlighted in the code below:
<!-- start logo -->
<div id="logo">
<a href="index.php">
<img src="<?php echo $mosConfig_live_site; ?>
/templates/zaksprings/images/logo.gif"
alt="logo image" border="0" align="top" />
</a>
</div>
<!-- end logo -->
<!-- start top menu -->
<div id="topmenu">
<?php mosLoadModules('top',-1); ?>
</div>
<!-- end top menu. -->
<!-- start image header -->
<div id="imgheader">
<img src="templates/zaksprings/images/img_header.jpg"
alt="header image" />
</div>
<!-- end image header -->
We're going to do away with the logo part of the header, so we'll delete everything from to .
We don't need to change the link to the header image, since we replaced the existing graphic with one of the same name.
Save the file, and have a look at the front end of your site. You should see the new header graphic:
However, that doesn't look right; the main menu seems to have started too "high" on the page. There is no evidence for why this should have happened in the index.php file, so the culprit must be in the stylesheet, that's the only other thing involved in the template.
In your text editor, open the file template_css.css in the css folder. What are we looking for? Well, you may have noticed the <div> element containing the header graphic with an id of imgheader. In a CSS stylesheet, you can define a CSS class to apply to an HTML element with a particular id attribute by using the syntax # followed by the value of the id attribute. That means we're looking for something called #imgheader in our file, so using the find feature of your text editor, hunt down #imgheader. This is what you'll find:
/** div container for image header **/
#imgheader {
position:relative;
float:left;
clear:left;
width:100%;
height:99px;
background-color: #000000;
}
This is the style information known as properties in CSS parlance that we're after. If you're not familiar with properties in CSS, they consist of the property name followed by a colon, followed by the property definition, with a semi-colon denoting the end of the definition.
Without being a master of CSS, you should suspect the height property could be the problem. It's definition says 99px, which sets the height of the imgheader element to 99 pixels. If you check out the img_header.jpg graphic, you'll find its 173 pixels high. It's pretty clear what we've to do set the height to 173 pixels like this:
/** div container for image header **/
#imgheader {
position:relative;
float:left;
clear:left;
width:100%;
height:173px;
background-color: #000000;
}
Save the file, and refresh the page of your site, and the main menu should now start underneath the header graphic, rather than part way through it.
OK, we're off! Before we go any further, delete the file logo.gif from the images folder of the template as we don't need it anymore.
[edit] Changing the Page Background and Fonts
The page background is our next stop. The Water and Stone template uses an odd gray, stripey background. We're going to replace that will a pure black background. In the index.php file, the body element looks like this:
<body class="waterbody">
There is no sign of a background setting there, so the answer lies again in the stylesheet. The definition for the CSS class waterbody looks like this. It is right at the top of the file:
.waterbody {
background:#FFFFFF url(../images/bg_body.jpg) repeat-x left top;
margin:0;
color:#333333;
}
We don't want any background image, so delete everything on the background property line after #FFFFF, and then change #FFFFFF (which specifies white) to #000000 (black) to get this:
.waterbody {
background:#000000 ;
margin:0;
color:#333333;
}
Make sure you've still got the semi-colon at the end of the line. The semi-colons denote the end of a CSS property definition.
Once you've done that, save the file and refresh your browser, and your page background will be black in color.
While we're here, let's change the body fonts. The definition at the top of the stylesheet handles the body fonts:
* {
font-family: Arial, Helvetica, sans-serif;
}
This specifies a default font of Arial, followed by Helvetica if Arial isn't available, or some general sans-serif font if that one isn't available. We're going to change this to make Verdana the default font. If that isn't available, then this visitor will have to make do with Arial.
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
[edit] Changing the Main Content Area
We're going well now, so let's look at the main content area.
In index.php, you can find the main content area of the page, and see it is wrapped in a div element with an id of content_main:
<!-- start main body --> <div id="content_main"> ... <?php mosMainBody(); ?> ... </div> <!-- end main body -->
This suggests our next target is the content_main class in the stylesheet. Search for it, and you'll find this:
/** div container for mainbody **/
#content_main {
position:relative;
float:left;
width:520px;
margin:15px 0 20px 20px;
background-color:#FFFFFF;
}
The interesting things to note here are the width property, which specifies a width of 520 pixels. Also, the margin is set by the margin property. The margin is the spacing "outside" of an element, which means between an element and its parent. We're going to bring the main content area much closer to the header graphic, and put a gray border around it. We will also add some internal spacing with the padding property. We'll add eight pixels of padding on all sides. Change the definition for content_main to the following:
/** div container for mainbody **/
#content_main {
position:relative;
float:left;
width:520px;
margin: 0px 0px 8px 8px;
background-color:#FFFFFF;
padding:8px;
border:2px #CCCCCC solid;
}
Note how we have set the margin. There are 4 numbers, and these correspond to the top, right, bottom, and left margins respectively. Thus we have moved the main content area closer up to the header graphic, and closer to the left-hand side.
[edit] Changing the Background Color of the Columns
Let's look at the background color of the left and right-hand columns of the page. We want to change the left-hand column to black, and the right-hand column to a gray color.
Looking in index.php gives us a clue where to start looking for the left-hand column:
We need to look for the leftcol class in the stylesheet. Here we'll find something surprising. First of all, we'll find lots of definitions for leftcol. In fact, you will find lots of definitions for styles used "inside" leftcol.
If you keep looking, you'll not find a background for leftcol. The background actually belongs to a parent element, containerbg.
It is quite instructive to have a look at the page structure using the Inspector feature of the Firefox extension Firebug ). If you don't have Firebug installed, you can still follow along the text. Open Firebug, click the Inspector tab and expand the body element, then expand the container element you find inside it. This is how the page structure looks in Firebug:
In the container element there are two other elements, containerbg and copyright. If you expand the copyright element you will find it doesn't really have much in it, only the copyright message. Everything goes on in the containerbg element.
When you expand the containerbg element, you see this:
The outerleft element looks like it contains much of the page the top menu, the image header, and the container_inner element, which has the left column and the content_main element.
Thus containerbg is our first stop to look for a background, after all, that could be what the bg stands for? This element does indeed have a background in the stylesheet:
#containerbg {
position:relative;
width: 900px;
background:transparent url(../images/bg_inside.jpg) repeat-y left
top;
float:left;
top:0;
left:0;
The path to the background image is defined by this part of the background property:
url(../images/bg_inside.jpg)
This path is relative to the stylesheet, unlike the path to images used from index.php we saw earlier, which are relative to the root of our Mambo installation (like /templates/zaksprings/images/logo.gif for example).
To get away from the stylesheet (in zaksprings/css/template_css.css) you have to go up a folder (../) bringing you to the zaksprings folder, and then into the images folder. Specifying background images using CSS in this way means that you bypass the need for including the name of the template.
The bg_inside.jpg image itself is interesting. It has three parts, a green bit on the left, a white bit in the middle, and a darker green bit on the right-hand end.
Here is a representation of it:
This graphic defines the entire background for the containerbg element, including the right-hand column. The white bit in the middle defines a white background for the main content area, and the dark green on the right-hand side is for the right-hand column. One of the reasons to define the background for the columns in this way is that then the background will reach all the way to the bottom of the entire container element.
If you set a background for the right-hand column, it would only extend as far as the right-hand column reached. Sometimes the right-hand column may have less content in it than the left-hand column, and you would find that the background of your right-hand column just stopped part of the way down the page, because the element it was the background for had stopped.
We could change the background color of the left-hand column by simply changing the color of the left-hand part of the bg_inside.jpg in a graphics editor, using a flood fill or some careful brush work. What we'll do is to make the left-hand part of the image completely black, and then fill in the white middle part black as well. The right-hand side will be made a gray color (HTML code #363636).
You can find the changed version of bg_inside.jpg in the code download. Copy it to the images folder and when you refresh your page, you'll see how things have changed:
[edit] Customizing the Read More Link
The R'ead More...' link displayed under the introduction of a content item is our next target. If you use the Information | Display ID and Class Details option of the Firefox developer toolbar, or just have a careful look at the HTML source of the page (search for Read more) you'll see the name of the CSS class we want is readon:
<a href="http://localhost/mambo/index.php?option=com_content& task=view&id=15&Itemid=9" class="readon"> Read more... </a>
The current format of this link is pretty basic. We're going to produce something a bit more impressive:
The Read more... link will "float" on the right, resemble a button with a nice gradient background, and when the user hovers their mouse cursor over the link, the background will change. This will not need any JavaScript.
Let's have a look at the readon class in the stylesheet:
/*** read more link ***/
.readon,
a.readon:link,
a.readon:active,
a.readon:visited {
color:#666666;
font-weight:bold;
text-align:left;
margin-top:10px;
letter-spacing: 2px;
font-size:10px;
text-decoration:none;
}
We will add properties for the background image, some padding to keep some space between the text of the link and the border, and a gray border. Note that we use the background-image property to specify the background image rather than the background property as we have seen earlier. Using background allows you to specify a background color as well.
/*** read more link ***/
.readon,
a.readon:link,
a.readon:active,
a.readon:visited {
color:#666666;
font-weight:bold;
text-align:left;
margin-top:10px;
letter-spacing: 2px;
font-size:10px;
text-decoration:none;
float:right;
background-image: url(../images/readon.png);
padding:4px;
border:2px #CCCCCC solid;
}
The float property allows the element to be shifted to either the left or right on its current line. Our element will float to the right of the current line. (Again you will find the readon.png image in the code download. Copy it to the images folder of zaksprings.)
The standard readon link is defined by a.readon:link, and a.readon:visited can be used to define the formatting for a link that has been visited. The behavior of a link as you click on it is determined by a.readon:active. There is another behavior whose formatting can be defined, the behavior when you hover your mouse cursor over an element. This is defined by <classname>:hover.
Looking through the rest of the file you find the extra a.readon:hover definition.
/** underline on hover **/
a.toclink:hover,
...
a.readon:hover,
...
a.latestnews:hover {
text-decoration:underline;
color:#0C362D;
background-color:inherit;
}
This definition sets what happens when a user hovers their mouse cursor over these links. The color changes and the link is underlined. This is fine, but we want more, so let's add to the a.readon:hover definition:
/** underline on hover **/
a.toclink:hover,
...
a.readon:hover,
...
a.latestnews:hover {
text-decoration:underline;
color:#0C362D;
background-color:inherit;
}
a.readon:hover { background-image: url(../images/readon_hover.png) }
We've left the first a.readon:hover defintion for the underlining. The second definition will add the background-image in addition to the properties from the first definition. This means that when the visitor hovers the cursor over the link, a new background image will be displayed.
[edit] Formatting the Content Items
Our customization of the Read More... link was our first encounter with CSS classes that do not come from the template itself. Things such as waterbody, content_main, and so on are mentioned in the index.php file of the template, they do not come from the Mambo "core" or the output of any component. The readon CSS class is produced from a Mambo component. We'll have a look at some more CSS classes that come straight from the Content component. For any template you want to create, you would have to define these styles.
This image shows a content item from the front page, and the classes that style various parts of it:
Whenever Mambo displays a content item, the Content component will spit out the same kind of output, with the different parts of the content item marked with various CSS classes. Whatever the content of the item, the classes will always be the same, and there is no real way to control this from the template, since these are "hardcoded" into the Content component.
First of all, this display is made up of two tables, both of class contentpaneopen. The title of the content item is in one table, and everything below Written by Administrator is in another table. The title of the content item is styled by the contentheading class.
The Written By Administrator text is in the small class, and the date is marked by the createdate class. The text of the item is in the default style of the page, and the Write Comment and Read more... links are both in the same style, readon.
For now, we're quite happy with the way the content items are formatted. In the following sections, we will point out which CSS classes come from the base template, and which are from the Mambo core or a component.
[edit] Adding the Bottom Menu
We'll now add some code to the index.php file to display the modules in that position.
We set the position of the bottom menu to bottom, which conveniently existed. If we wanted to create a new module position, we can do that from Site | Template Manager | Module Positions of the administrator menu. All we would need to do is give our new module position a name and save it.
Adding the code to load the modules from the bottom position is easy. We add it near the end of the index.php file:
</div>
</div>
<div align="center">
<div id="bottommenu" >
<?php mosLoadModules('bottom'); ?>
</div>
</div>
<?php mosLoadModules('debug', -1);?>
</body>
</html>
We wrap the div containing the bottom menu in another div, and align it to the center of the page. However, if you view the menu now it will look odd. That's because it will be styled like one of the side menus. To get a properly styled menu, we need to use the Menu Class Suffix property of the bottom menu's module parameters. This will add something onto the name of the class used by the bottom menu to produce a unique classname for the menu.
First of all, before we make any changes to the stylesheet, edit the Bottom Menu module from Modules | Site Modules on the administrator menu. In the module Parameters, set its Menu Class Suffix to -navbot and its Menu Style as Horizontal, and then click Save.
Now we add the definition for the bottommenu element to the stylesheet:
#bottommenu {
width:350px;
text-align:center;
margin-bottom:32px;
}
Next we define the style for links in the bottom menu. The Menu Class Suffix of navbot means that instead of a.mainlevel being the class for the link, the classname will be a.mainlevel-navbot.
#bottommenu a.mainlevel-navbot { margin:24px; color:#ffffff;}
You can get a little illustration of the difficulty of producing cross-browser templates here. If you omit the #bottommenu part of the definition for the link, Internet Explorer won't set the color of the link to white, while it looks OK in Firefox for example. One of the reasons for working with the Water and Stone templates from the start is that they display pretty well across different browsers, so we'll try to keep this up.
That completes the bottom menu.
[edit] Customizing the Modules
Now we turn our attention to the module output. We'll start by spacing out the modules; you'll have noticed that as soon as one finishes, the next module starts almost immediately. We'd like a bit of breathing room between them.
[edit] Spacing Out the Modules
Let's use Firebug's Inspector again to have a look at the leftcol element, which contains our left-hand modules:
Expanding the leftcol element shows a number of table elements, with CSS class moduletable. That sounds like what we're after. If we expand one of the moduletable elements:
You can see that the th element of the table holds the module title.
One thing to note is that there is no mention of moduletable in the index.php file of the template. This is another CSS class that comes from the Mambo core, and does not depend on the template.
A search through the stylesheet reveals no definition for moduletable. There are definitions for the td and th moduletable elements, but these only define part of the table. We'll modify the th definition in a moment.
We'll add a moduletable defintion into the stylesheet that will apply to modules in the left-hand column:
#leftcol table.moduletable {
margin-bottom:8px;
border-top:1px #CCCCCC solid;
border-bottom:1px #CCCCCC solid;
background:url(../images/bg_lhm_inside.jpg)
repeat-y left top;
}
The #leftcol indicates that this definition will apply to the element with id leftcol, which is the container for the left-hand modules. (This is specified in the index.php file).
The margin-bottom property sets the spacing after the table. One reason to set the spacing after (rather than before using margin-top), is so that the top module can still be right under the header graphic. If we had margin-top, there would be a gap before the first module is displayed.
We set a border for the top and bottom (we will handle the side margin in a moment), and define a background image. (The image is again in the code download and needs to be copied to the images folder of zaksprings.)
The background image is 170px wide, which is the exact width of the left-hand column. The role of the background image is to provide the side border. The background-image looks like this:
The gray lines are the borders of the module. The repeat-y part of the property definition ensures that the image will repeat vertically rather than horizontally, since the image is really only a couple of pixels high.
This image is actually constructed from cropping the original bg_inside.jpg background image, and changing the colors, in the same way the current version of bg_inside.jpg was prepared.
Once you've made these changes, save the stylesheet and refresh your browser page. This is what the Other Menu looks like:
We're still not finished here, there is something not quite right with the module title.
[edit] Changing the Module Headers
To change the way the module titles look, we need to investigate the moduletable th definition.
In the stylesheet, you'll find the definition for the table headings:
#leftcol table.moduletable th {
background-color: #8F8A2C;
color: #000000;
border: solid 1px #000000;
}
#rightcol table.moduletable th {
background-color:#6EB28A;
border: solid 1px #000000;
}
These define the table headings for left-hand and right-hand modules. The #leftcol refers to the left-hand column element and #rightcol refers to the right-hand column element.
Let's take a closer look at the current module title bar:
We would like to change the background color to a nice silvery gray, but it looks like we will also want to add a border above and below to match the gray of the side borders. This is our new definition:
#leftcol table.moduletable th {
color: #000000;
background: url(../images/moduletableth.jpg) repeat-y left top;
border-top:1px #808080 solid;
border-bottom:1px #808080 solid;
}
The top and bottom borders are easy enough. The color of the borders (#808080) matches up with the gray borders. It's our background image that's the interesting bit.
This image is similar to the background for the module table. Its 170 pixels wide, but it has a silvery gray background, with darker gray side borders to match the border with the rest of the module table:
However, if you look at your Mambo page now, there is still something not right about the module titles. Even with the new background image, it still doesn't look quite aligned properly. Something is interfering. The culprit is the general moduletable th definition:
/** general module title **/
table.moduletable th {
border: solid 1px #000000;
color:#FFFFFF;
It's that one pixel border that's throwing everything out. Let's comment out that line with the /* and */.characters:
/** general module title **/
table.moduletable th {
/* border: solid 1px #000000; */
color:#FFFFFF;
Now save the file. When you view your page, the module titles look pretty good.
[edit] Customizing the Menus
We'll complete our customization by changing some of the properties of the menu entries. We'll first of all change the color of the menu entry when the mouse cursor is hovered over it, then we'll change the border of an menu entry to fit it in with our gray color scheme for the side borders, then we'll add a new definition to highlight the currently selected menu item.
All the CSS classes we encounter in this section come from the Mambo core. Their names do not depend on the choice of template, and for any new template you were creating, the class names you meet in this section will be ones you want to define in the template.
[edit] Changing the Menu Hover Color
Currently, when you hover the cursor over an entry in the main menu, the background color changes to green. We want to make this into a gray color, and also do something about the border between two menu entries. All we have to do is work out the name of the classes for the menu entries!
You can use the Firefox Web Developer Toolbar to display the ID and class information for a page (from Information | Display Id and Class Details). You would see something like this on your page:
This shows the class for a menu entry is called mainlevel. We're interested in setting what happens when a visitor hovers their mouse cursor over one of the menu entries, so we're looking for mainlevel:hover in the CSS file. If you search for this, you'll come upon its definition:
/** generic menu item link on mouseover **/
a.mainlevel:hover,
#leftcol a.mainlevel:hover,
#leftcolmenu a.mainlevel:hover {
background-color:#B8B35C;
color:#000000!important;
text-decoration:none!important;
}
We'll change the background-color property to our new color, #6e6e6e, a gray color:
/** generic menu item link on mouseover **/
a.mainlevel:hover,
#leftcol a.mainlevel:hover,
#leftcolmenu a.mainlevel:hover {
background-color:#6e6e6e;
color:#000000!important;
text-decoration:none!important;
}
[edit] Changing the Menu Item Borders
Let's look at the definition in the stylesheet for a typical menu entry, which is called mainlevel:
/** generic menu item **/
.mainlevel {
display:block;
font: bold 11px/25px Arial, Helvetica, sans-serif !important;
padding-left:15px;
background:transparent url(../images/bg_mainlevel.gif)
repeat-x center top;
font-weight:bold;
text-decoration:none;
}
From this, we see no mention of a border, so the border must be provided by the background image. The background image is only 10 pixels wide, and 2 pixels high, with the top row of pixels in the image a dark green color, the bottom a lighter green. We will replace this background image with a simple dotted, gray border (#808080):
/** generic menu item **/
.mainlevel {
display:block;
font: bold 11px/25px Arial, Helvetica, sans-serif !important;
padding-left:15px;
border-top:2px #808080 dotted;
font-weight:bold;
text-decoration:none;
}
[edit] Highlighting the Current Menu Item
When you view a page in Mambo, the Itemid in the query string of the URL indicates the menu item corresponding to this page. That means you should be able to highlight the currently chosen menu entry. The currently selected menu entry is marked with an id of active_menu in the page. If you click the Home link on the main menu for example, and have a look in the HTML source of the page, you will see this markup:
<a href="http://.../index.php?option=com_frontpage&Itemid=1" class="mainlevel" id="active_menu"> Home</a>
However, the CSS class for this is missing from the base Water and Stone templates, so we will need to add it ourselves.
We'll set the background for the currently selected menu item to a dark greeny color. We will also add some margin on the left and right, so that this background color does not overwrite the side border of the menu item, which is provided by the background image for containerbg if you recall. This is our definition for active_menu that we add into the CSS file:
#active_menu {
background: #527428;
margin-left:2px;
margin-right:2px;
}
The use of the # character is because the class is applied to the element with id attribute of active_menu.
A good place to add this definition is just before this part of the file, to keep it with the other menu definitions:
/* --------------------- mambo module layout --------------------- */
[edit] Finishing Off
There are two more steps before we have a "packageable" template. We need to create the template thumbnail, and then complete the metadata in templateDetails.xml.
The template thumbnail is easy enough. View the page in your browser, take a screenshot (Ctrl + Alt + Print Screen on Windows copies the current screen to your clipboard), and you can paste it into your graphics editor. Crop the image to make sure that it's only got the output of the web page, and not the entire browser window, then resize the image to 200 pixels wide. In most graphics editors, when you resize an image by specifying the width, the height is automatically calculated based on the original ratio of the width to the height. Once the image is resized, save it as a PNG file called template_thumbnail.png in the zaksprings folder. The next time you hover your mouse cursor over the template in the Template Manager, this new thumbnail should pop up.
We also need to complete the rest of the metadata in the templateDetails.xml file. First of all, there is the general information about the template, its description, and its authoring:
<?xml version="1.0" encoding="iso-8859-1"?> <mosinstall type="template" version="4.5.3"> <name>zaksprings</name> <creationDate>20/11/06</creationDate> <author>packtpublishing</author> <copyright>GNU/GPL</copyright> <authorEmail>doug@packtpub.com</authorEmail> <authorUrl>http://www.packtpub.com</authorUrl> <version>1.0</version> <description>The Template for Zak Springs Golf Club</description>
Underneath this is part of the metadata where you need to list all the files that would be included in the template, all the CSS files (we've used only one), and all the images, or any other files that go in the images folder:
<files> <filename>index.php</filename> <filename>template_thumbnail.png</filename> </files> <images> <filename>images/bg_body.jpg</filename> <filename>images/bg_header.jpg</filename> <filename>images/bg_inside.jpg</filename> <filename>images/bg_leftcol.jpg</filename> <filename>images/bg_leftcol_module_th.gif</filename> <filename>images/bg_lhm_inside.jpg</filename> <filename>images/bg_mainlevel.gif</filename> <filename>images/bg_mainlevel_checked.gif</filename> <filename>images/bg_mainlevel_right.gif</filename> <filename>images/bg_module.jpg</filename> <filename>images/bg_module_contenttop.jpg</filename> <filename>images/bg_pagenav.jpg</filename> <filename>images/bg_spacer.gif</filename> <filename>images/bg_topright.jpg</filename> <filename>images/file.html</filename> <filename>images/img_header.jpg</filename> <filename>images/img_header_old.jpg</filename> <filename>images/indent1.png</filename> <filename>images/indent2.png</filename> <filename>images/indent3.png</filename> <filename>images/indent4.png</filename> <filename>images/indent5.png</filename> <filename>images/indent6.png</filename> <filename>images/moduletableth.jpg</filename> <filename>images/readon.png</filename> <filename>images/readon_hover.png</filename> </images> <css> <filename>css/template_css.css</filename> </css>
It is important that you list of all the files in the folders; the reason for doing so is explained in the following part.
[edit] Creating a Template Package
We've currently got two Mambo installations on our local development machines (the one with the sample data and the Zak Springs site), so let's test out the template on the other installation. Rather than simply copying the zaksprings folder from one installation to the other, let's create an installable template, which can then be installed on the other site from its Universal Installer.
To create the installable template, simply ZIP up the zaksprings folder in to a ZIP archive. Make sure you ZIP up the folder, not just the contents of the folder. (For example, on Windows, right-click on the folder, select Send To from the pop-up context menu, then choose Compressed (zipped) folder.)
Now you can log in to the administration area of your other installation, go to the Universal Installer, and install the new template.
[edit] Additional References
- For instructions on Designing Mambo Templates, click here
- For instructions on Installing Mambo, click here
