logo wide 2000x350
Joomla offers us the ability to use CSS styles to change the style of groups of modules with module classes. In fact, module classes are the main way that professional template designers control the appearance of modules in their templates. They create very beautiful module classes and then have their customers type in these module class names to give their modules a distinctive appearance.

We have already seen how classes can be used to change the background colors of menu items. Recall that we placed classes such as .lightblue {background-color: #eeeeff;} in the Sparky Template Edit Custom tab. Then for any menu item we wanted to have a light blue background, we simply typed in lightblue (without the leading dot) in the menu item style box. We can use this style on as many menu items as we want and on as many menus as we want.

Creating and using module classes works almost the same way. In fact, we can use the .lightblue class we created for our menu items to set the background for our modules! Open our fifth Custom Module again. Click on the Code tab and delete the background-color property from the <p> tag area. Also change the background color for our Title to medium blue #aaaaff. Here is our new code.

<h3 style="text-align: center; font-size: 20pt; color: #ff0000; font-weight: bold; font-family: arial, helvetica, sans-serif; background-color: #aaaaff; margin: 0; padding: 15px;">My Fifth Custom Module</h3>

<p style="text-align: center; font-size: 14pt; color: #000000; margin: 0; padding: 15px;">This is the description for my fifth custom module.</p>

Then click Save and go back to our Editor tab. There is now only a background color for our h3 Title. Next click on the Advanced tab. The second box is called Module Class Suffix. Here we will type in first a blank space. Then type lightpurple (which is one of many preset styles in our Rainbow template):

01

Then click Save and Close and View Site.

02

Let’s create a new module class called simplemodule. We can style all h3 elements with the class of simplemodule by using simplemodule h3 {property:value;} in our Sparky CSS list and do the same for all p elements. This way, we can give different styles to our h3 versus our p elements. Here is the CSS for our new simplemodule class.

.simplemodule {

font-family: arial, helvetica, sans-serif;

margin: 0;

display: block;

text-align: center;

min-height: 250px;}

.springmodule h3 {

text-align: center;

font-size: 26px;

color: #ff0000;

font-weight: bold;

line-height: 1.4;

padding: 10px;

background-color: #eeeeff;}

.simplemodule p {

text-align: center;

color: #770077;

font-size: 18px;

font-weight: normal;

line-height: 1.2;

padding: 15px;}


Note that the above is very similar to the Inline CSS we used in our earlier examples. There is now some CSS Style for the entire module and some CSS for just the title (h3 tag) and some CSS for just the description (p tag).

In the backend, go to Extensions, Templates, Styles and click on the Rainbow template to edit it. Then click on the Custom tab to copy and paste the above module classes into the end of our Template custom file. Then click Save and Close.

Now that we have some module classes to work with, go to Extensions, Modules and make a duplicate of our Fifth Custom module. Open the duplicate and name it Our Sixth Module. Assign it to Row 9b. Hopefully, by now you have figured out that our module classes for the H3 and P tags will not work if we have Inline CSS for these tags in our HTML because Inline CSS has priority over any CSS we place in the template custom CSS file. So we will need to strip the Inline CSS style= stuff from our HTML. Click on the Code tab for Module 6 and replace this code:

<h3 style="text-align: center; font-size: 20pt; color: #ff0000; font-weight: bold; font-family: arial, helvetica, sans-serif; background-color: #aaaaff; margin: 0; padding: 15px;">My Sixth Custom Module</h3>

<p style="text-align: center; font-size: 14pt; color: #000000; margin: 0; padding: 15px;">This is the description for my sixth custom module.</p>


with this code:

<h3>My Sixth Custom Module</h3>

<p>This is the description for my sixth custom module.</p>


Then click Save and go back to the Editor view of our workspace:

03

Note that the h3 text in the above workspace is styled by our template (and we could change this in our template edit styles tab). To better understand how to create this h3 tag without using code view, let’s use the JCE editor to set the entire text for the P tag. Select the entire text. Then click on Paragraph in the Formatting drop down. Then click on Code View to see that both lines now have p tags. Go back to the Editor view. Select just the title line, then click on Heading 3 in the Formatting window drop down. Then click Save.

Now that the first line uses an h3 tag and the second line uses a paragraph tag, we are now ready to add our module classes. Click on the Advanced tab. There is currently a class called lightpurple already listed. Go to the front end of our website to see what this looks like without any styling:

04

Note that the title and text of our sixth custom module above do not display any style formating. To fix this, we could go back and add in all of that Inline CSS Styling that we just deleted. But typing Inline CSS for every one of our modules is a lot of work. It is much easier to just write the CSS one time, create a module class for it and paste the module class into our Sparky template Custom file. Then any time we want to style a module, all we have to do is click on the Module Advanced tab. To make it clear that we are now using a Module Class to control the appearance of our module instead of Inline CSS, let’s change the background color from light purple to light blue. Then type in a single space. Then type in simplemodule (without the dot). There is no need to type in the h3 or p elements. Here is what our Module Class Suffix screen now looks like for Module Six:

05

Combining Module Class Styles
Note that each module can have more than one class or style applied to it. To apply two or more classes, put a space before the first class. Then type the first class in without the dot. Then type in another space. Then put the second class in without a dot. We can therefore use background colors and background gradients separately from other classes. But note that you should not use the background color property or the background image property in your tag classes (h3 or p) as each module can have only one class for each property. If you want to have different colors for your Title and your Description, one option is to define a background color for your title (h3) and a background image for your description. Click Save and Close and view this module in the Module Demo page.

06

Our sixth custom module does not look that much different from our fifth custom module. But it is much easier to make dozens of modules with Module Classes than to make dozens of modules with Inline CSS. Plus we can control the appearance better. As just one example, we were able to add a minimum height property for our Module Class which will give our modules a more consistent appearance. Still, our Sixth Custom Module has a rather plain looking background. We will next explain how to quickly and easily change the background to a more attention getting background using a Gradient Background Module Class.

Create Gradient Background Module Classes
We could provide a background image for any module by loading the image to the images folder in our media manager and then linking to the image at the Options tab of our Custom Module.

07

Alternately, we could place background images in the images folder of our template and then link to them by creating a class. Either way, we would have to make the image and optimize it and scale it. Thankfully, there is a much easier way to create gradient background images with CSS module classes. Once we have our gradient module classes, we first copy and paste them into our Sparky template custom file. Then type this new class into the module style box on the Advanced tab of our custom module.

As an example of how this is done, let’s create a gradient module background style. A gradient is just a transition between two colors in the background. We will start with a medium blue at the bottom leading to a lighter blue at the top. But you can change these to any two colors you would like. It is best to use an online gradient generator to help you determine the right CSS for the background gradient you would like. Here is a link to one of the easiest gradient generators: http://www.cssportal.com/css-gradient-generator/

Go to this web page. Then Click on either the Linear or the Radial Style. Then enter the two colors you want. We used Radial with #DDDDFF to Start and #3366FF to End.

08

Then copy the CSS Markup needed for various web browsers into your class CSS. Be sure to put a dot before the class and use brackets to begin and end the CSS. Here is the CSS for the class called radialblue.

.radialblue {

/* IE10+ */

background-image: -ms-radial-gradient(center, ellipse farthest-corner, #DDDDFF 0%, #3366FF 100%);

/* Mozilla Firefox */

background-image: -moz-radial-gradient(center, ellipse farthest-corner, #DDDDFF 0%, #3366FF 100%);

/* Opera */

background-image: -o-radial-gradient(center, ellipse farthest-corner, #DDDDFF 0%, #3366FF 100%);

/* Webkit (Safari/Chrome 10) */

background-image: -webkit-gradient(radial, center center, 0, center center, 242, color-stop(0, #DDDDFF), color-stop(100, #3366FF));

/* Webkit (Chrome 11+) */

background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #DDDDFF 0%, #3366FF 100%);

/* W3C Markup */

background-image: radial-gradient(ellipse farthest-corner at center, #DDDDFF 0%, #3366FF 100%);}


Note that while single colors use the background-color property, gradient colors use the background-image property. We used the above gradient generator to create 10 radial gradient background colors and 10 linear gradient background colors to use as Preset styles in our Rainbow template. Once we have our Gradient Background color classes added to our Sparky template Custom file, go to Extensions, Modules and make a duplicate of our Sixth Custom Module. Open the duplicate and call it Our Seventh Custom Module. Publish it in Row 9c. Then click on the Advanced tab and replace the lightblue module class with our new radialblue module class. Here is what our Module Class Suffix box looks like for our seventh custom module:

09

Click Save and Close. Then refresh the front end browser. Here is what our seventh custom module looks like.

10

Our custom modules are gradually starting to look more professional! Our final example of the power of Module Classes will be to add a Module Class to provide a border around our custom module. We will add the following Module Border class to the end of our Sparky template Custom CSS file.

.borderroundblue {
border-style: solid;
border-width: 3px;
border-color: #333399;
border-radius: 20px;}

Copy and paste the above border class into your Rainbow template custom tab file. Once you have a file like this in your custom CSS file, it is very easy to change its value to whatever you want. Our main purpose is simply to create it so we have something to work with. Now go to Extensions, Modules and make a duplicate of our seventh module. Click on the duplicate to open it. Then name it Our Eighth Custom Module. Assign this module to the 9d position and publish it. Next, click on the Advanced tab and add our new Module Border class called borderroundblue to the box. Here is what the Module Class suffix box looks like for our eighth custom module.

11

We now have three Module Classes in this box with a space before the first module class and a space between each of the other two module classes. Now click Save and Close. Refresh the front end browser to see what our Eighth Custom module looks like:

12

Another benefit of using a module class is that if we wanted to change something, such as making the description font darker, all we need to do is change it in the template Custom file and it would automatically change in all three of the above modules that used the simplemodule class. The benefit of dividing the border class from the background color class and the module class is that you can apply any color of border and any color of background to any module or module class. But the drawback of this approach is that it is still a lot of work. In the next section, we will add an image and a link to our practice modules. We will then place the border styling and the background styling and the link styling inside of the module class. This way, we can completely and quickly style any module just by adding the module class to the Module Class Suffix box in the Module Advanced tab.