Styling the Default Mambo Template with CSS

This article looks at styling the default waterandstone template with CSS. Cascading Style Sheets (CSS) control the way your Mambo site is displayed in browsers.

This is not a guide on how to use CSS (there are loads of resources on the Net that can help you understand how to use Cascading Style Sheets) but if you wish to edit the default Mambo template these tips should help you.

The waterandstone template_css.css File

Basic Layout

General Body Styling. The elements here are just general styling elements. They include styles for the body, links, paragraphs, and lists. These apply right across all pages controlled by the template.

Template Layout

waterandstone use a css "wrapper" to center all page content with a container on the browser window.

Within this section of their css, you will also see the outer left and right elements, which are used to create the sidebars on the left and right of the site.

Now, 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;
  }
  

Now, let's have a quick look at some of the other non-essential waterandstone selectors.

waterandstone uses "containers" for the top, heading content and also for the left and right sidebars. div id="leftcol" contains the left sidebar modules and also the mainmenu (see "leftcolmenu" to see how this is styled).

The right sidebar is governed by the "outerright" container, which also holds the div container for right column.

I will leave you to look at the banner placement and the footer/copyright aspects of the waterandstone template for yourself.

Next Page: Styling the Main Body of a Mambo Template