Module Chrome in Two Easy Steps

While I read about Joomla module chrome early in my tour of the Joomla documentation, it wasn't until I put this log together that I actually wrote my first module chrome.

The Joomla documentation can lead down into what is just one technique for publishing with graphic borders.  There are many that I have seen, each with their won pros and cons.  But the actual, simple power of Joomla module chrome is, in my opinon, sort of lost in that example.  Here's the really quick run dowm in the chrome I'm using in right hand column of this site.

1) In my template directory, (say, /templates/awd) I created a directory called "html".  Inside I created a file called "modules.php".  Here's the whole file:

Notice the function name, it is important to call the function "modChrome_yourChromeName".  Here are the styles I used for the four div classes I introduced in that file (ok, maybe there's more than 2 steps here... but bear with me!):

div.rhsboxtop {
    background: #627A7A url('../images/rhsbox1.jpg');
    width: 300px;
    height: 25px;
    margin-top:30px;
}
div.rhsboxmid {
    background: #627A7A url('../images/rhsbox2.jpg') 
                repeat-y scroll center top;
    width: 300px;
}
div.rhsboxbot {
    background: #627A7A url('../images/rhsbox3.jpg');
    width: 300px;
    height: 25px;
}
div.rhsboxcontent {
    margin-left:20px;
    margin-right:20px;
    padding-bottom:5px;
}

2) Once I made my pretty litle jpg's, I can assign the chrome to any postition with the "style=" attribute in my template/index.php:

It's that easy to wrap a little markup around the contents of any module position in Joomla.  I'm still contemplating the myriad uses for this handy feature...