Changing the Mambo Default Template to Use Your Own Images

A lot of people want to change the Mambo default waterandstone templates to use their own logo and header images. Doing this is easy once you know what you are working with.

Let's look at how they styled the logo area:

#logo {
 position:relative;
 width:100%;
 height:74px;
 float:left;
 background:#FFFFFF url(../images/bg_header.jpg) no-repeat left top; }

In the template's index.php, you will find the relevant code:

<!-- start logo -->
<div id="logo">
<a href="index.php">
<img src="<?php echo $mosConfig_live_site; ?>/templates/waterandstone/images/logo.gif" alt="logo image" border="0" align="top" /></a>
</div> <!-- end logo -->

To change the logo image (the one with the waterandstone text on the image), just replace the logo.gif with your own image. If you use an image of the same dimensions (width + height) you will not need to change the css selectors for the logo div.

The css tells us that the logo area has a background image (it's in templates/waterandstone/images/bg_header.jpg). The logo div takes up 100% of the container, which is 900px (pixels) wide. It has a height of 74px, and uses a white background.

waterandstone also use a large header image. In the template's index.php, you will see this code:

<!-- start image header -->
<div id="imgheader">
<img src="<?php echo $mosConfig_live_site; ?>/templates/waterandstone/images/img_header.jpg" alt="header image" />
</div> <!-- end image header -->

Again, you can change the image to one of your own, and can change the css to accommodate the way you want your header image to be presented.
You will find the code for this in your css file:

/** div container for image header **/
#imgheader {
     position:relative;
     float:left;
     clear:left;
     width:100%;
     height:99px;
     background-color: #000000;
 }

If you want to use images that are a different size to the waterandstone images you will need to adjust the sizes set in the template_css.css file. Because all the page content is delivered inside a container div, changes to widths will impact on the rest of the template. You will need to adjust your other css selectors to suit.