Basic Joomla! 1.5 Module Styling, Rounded Modules

Creating a round module is a fairly common need with creators of a Joomla! 1.5 template, and it’s actually quite easy.  The creators of Joomla! put in a pre-set module type just to deal with this need, and made it easy to access.  By simply making changes to two files for the template, you can create your own rounded Joomla module.  The two files ‘template.css‘ and ‘index.php‘ can even be edited from the Administrator console directly if you are scared to access your site via FTP.

The purpose of Index.php and Template.css in Joomla!

These two files are vital in the creation of a Joomla! template, and here is why.  Index.php basically is the skeleton of the template, it declares all of the layout DIVs and external script inserts, and also declares where modules show up on the template. So, your first step when trying to create a new rounded module is to find the area where you want to put it in your template index.php file.  Then insert the following code:

<jdoc:include type="modules" name="yourmodule" style="rounded" />

This simply tells Joomla! to insert all the modules in the ‘yourmodule’ position to this area, surrounded by a ’rounded’ styling.  In case you are wondering, there are several different values you can enter for ’style’ that will product different effects.  We want to use rounded for our case, because it gives you the ability to create a flexible rounded module via CSS. Specifically, because of the way it outputs the final code.  This is the module output of a rounded style:

<div class="module">
<div>
<div>
<div>
<h3>Module Title</h3>
Module content goes here.
</div>
</div>
</div>
</div>

The basic theory here is that they are giving you FOUR overlapping boxes to work with. So, what we want to do is use CSS to declare rules that form a TOP image, BOTTOM image, MIDDLE image, and then use the last box for declaring padding.

There is one more thing to note, if you are using this exact example.  We have used the module name ‘yourmodule’, but you will not be able to select this module position in the module manager unless you declare it in the ‘templateDetails.xml’ file. This file is in the directory with ‘index.php’, and will have a line further down the file where you can enter <position>yourmodule</position>.

Creating the CSS for your Rounded Joomla Module

The next step once you have declared your module in ‘index.php’, is to create the CSS rules that will actually form the shape and load up background images.

You need three images for this example, a top rounded image, a bottom rounded image, and a middle image that repeats vertically.

Here are are the example images we will use for the time being:

module_top

module_middle

module_bottom

We will also assume that your module is located within a div called #left, but of course this can be changed.  I always declare this as part of the CSS or else every module on the page will try to use this same styling by default, which isn’t always what you are going for.

Here is the CSS:

#left .module {
background-image:url(../images/module_middle.jpg);
background-repeat:repeat-y;
width:200px;
}
#left .module div {
background-image:url(../images/module_top.jpg);
background-repeat:no-repeat;
background-position:top left;
}
#left .module div div {
background-image:url(../images/module_bottom.jpg);
background-repeat:no-repeat;
background-position:bottom left;
}
#left .module div div div {
background-image:url(blank.gif);
padding:20px;
}
#left .module h3 {
/* Put whatever heading styles you want for your module here */
}

There are a few small tricks and things you will notice in the code, and differences if you are copying this directly into a template.

What the CSS is Doing…

The first thing is that I am assuming this file is in the /css/ directory of your template.  The images that are referenced for background are assume to be in the /images/ directory of your template.  These images are also assumed to have a width of 200px, but you can easily adjust that on the first CSS declaration.

One last major trick, which is more of an internet explorer bug fix, is the last div div div CSS declaration that references an image ‘blank.gif’. This image does not exist on purpose, but something is needed there or else by design the CSS file will try to load the previous background image for every DIV inside of the module, which in this case happens to be module_bottom.jpg.  I realize that you could simply use background-image:none; instead, but unfortunately this causes display problems in IE where it will wipe out all three background images intermittently. Annoying to say the least.

The Importance of the CSS Order

Ordering of the CSS rules in this example is somewhat important, as the divs are treated like layers.  So, the repeating middle image needs to be at the bottom.  The second and third layers which are the top and bottom image, can be interchanged as far as order since they are not repeating images, as long as your module is long enough they won’t overlap.  The last layer should always be used to declare some padding if you need, and to declare a blank background image.

The way CSS works with these DIV structures is that it will basically apply the rules of the parent to the rules of the child, unless you say otherwise.  So, the last ‘child’ DIV we declare is just used for clearing out all the unnecessary rules and creating some seperation from the borders of the module.

Hopefully this can help you create your own very basic Joomla! 1.5 rounded module.

Using the Module Class Suffix to Customize Individual Joomla 1.5 Modules

The ‘module class suffix’ field in the Module Manager is used to customize a module based upon some preset CSS rules. For example, go into the module manager for the ‘Test Module’ that we created in the above example. Simply add ‘-red’ to the module class suffix and hit ‘Save’. If you now check the source code your for page, you can see that the module code has changed. The main module class is now .module-red rather than .module. Now you have the opportunity to define all new CSS rules for this module based upon the .module-red class.

Copy all of the CSS rules used above, but simply rename ‘.module’ to ‘.module-red’ in all of the class definitions. Your CSS code should now look like this:

.module-red {
background-image: url('/images/module_middle_red.jpg');
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
width: 200px;
}
.module-red div {
background-image: url('/images/module_top_red.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
background-position: top;
}
.module-red div div {
background-image: url('/images/module_bottom_red.jpg');
background-repeat: no-repeat;
background-position: bottom;
margin: 0px;
padding: 0px;
}
.module-red div div div {
background-image: url(blank.gif);
padding: 20px;
margin: 0px;
}

Notice how the background images have changed, these are the new images with the new color. You can create these images as you see fit, as long as they fit the format of having a fixed top image, fixed bottom image, and vertically scrolling middle image. There is a limitless opportunity to create different module classes by simply adding more ‘module class suffix’ rules to your CSS file.

Location Based Module Styling

The last factor, which I glazed over earlier, is controlling module positions via the physical location in your template.  If you use the CSS hierarchy you can create different default styles for various modules depending upon where they show up on the template, without using the module class suffix.  In our example above, we assume the module was located in the #left DIV.  You could also create a slightly different style module for the right side div by using the CSS rules #right .module {}  etc.

This becomes especially important in public template design as many users will expect to see the module automatically styled depending upon where they place it.  It makes it much easier on your template users if they don’t have to memorize or dig through your code to check which module class suffix to use.

Good luck! Shoot me an email if you have any questions and I’ll post/answer them here.

Security & SSL

We take data security very seriously. Thus, your information is encrypted by a bank-grade, 256-bit SSL certificate during all secure transactions performed on our website.

Find Us

OS Ignite, Inc.
3420 Bristol St, Fl 6
Costa Mesa, CA 92626