Styling the Main Body of a Mambo Template

Continuing from the previous page, where we looked at the default waterandstone template's CSS in the article Styling the Default Mambo Template with CSS, let's look at the main body part of the template.

You will see this in the template's index.php as:

<!-- start main body -->
   <div id="content_main">
     <?php mosPathWay(); ?>
    <table width="519" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
            ?php mosMainBody(); ?>
            </td>
        </tr>
    </table>
   </div>
<!-- end main body -->

Note, there are two Mambo-specific pieces of code in this area of the template:

<?php mosPathWay(); ?>

This calls the pathway (sometimes also referred to as the "breadcrumb"), the navigation path you see at the top of the content area on each page. You can style this however you prefer.

The css selector for this is .pathway.

Example of pathway class css styling:

.pathway {
    color: #000;
    }
a.pathway, a.pathway:visited {
  color: #000;
}
a.pathway:hover {
    color: #f60;
    }

The second Mambo-specific code snippet is this:

<?php mosMainBody(); ?>

This calls the component that will input the data into the main body part of the page that is displayed to visitors.

These components, for example, frontpage, com_content, contact, etc, all have specific css selectors assigned to them. While you can style your header, footer, and navigation bars pretty much however you like, you do need to know what css selectors to use to style your body content.