7.4 Style Custom Modules using Rainbow Template Preset Styles

Now that we have a better understanding of the HTML and CSS used to create Joomla Custom Modules,we will use our module class presets to create three custom feature boxes for our Home page. To demonstrate how to use our Rainbow Style presets, we will make a row of three Feature boxes providing three options for ordering our book, Create Your Own Interactive Website. Here is what the finished product will look like:

First, gather all of the links to use with the link buttons. Each box will still need a page to link to. We will create a page to copy and paste the following: “The print version of our book, Create Your Own Interactive Website, is coming in the next month. If you need a copy right away, or simply do not want to deal with Amazon and Kindle, you can mail us a check for $10 with their email address and we will email you a PDF copy of the book. Our address is David Spring 49006 SE 115th Street North Bend WA 98045. You can also email us This email address is being protected from spambots. You need JavaScript enabled to view it. for more information.”

Second, decide where you want the Module Link Feature Boxes to go on your Home page.For only three module boxes, we will place them as “Featured Items” on the Home page of our website just below the slide show and just above the Joomla content area. The slideshow (which we will show you how to make in the next chapter) is in Sparky Row 3. So we will put these feature boxes in Sparky Row 4 – where our Rainbow template uses the Top 4, 5 and 6 module positions.

Third, create thumbnail icons from each of the original images. While a normal image is 300 pixels or more wide, a thumbnail icon is only about 150 pixels wide. This can be reduced from the original using a free Linux Image Editing tool called Fotoxx. Place these small images in a special thumbnail folder on your home computer. Here are the icon images we used to create the module boxes for our book.

Right click on each image. Then using Libre Writer, select Picture, Type and make each of them a about 150 pixels tall (alternately, we can resize them using Fotoxx). Then save your images with the size at the end of the name. All images should be lower case with no spaces in the file names. Your website images icon folder should now look like this:

Third, create a book icon folder with the media manager.Once all icon images have been created in a thumbnails folder on your home computer, transfer them to a folder with the same name to the server. Upload these three images to your Joomla website by logging into the Joomla Administrator screen and clicking on Content. Media Manager.

Click Create New Folder. Type the word book_icons in the white box.

Then click Create Folder. Then click on the icons folder to open it. Then click the Green Upload button to bring up the Choose Files screen. Click Choose Files, then navigate to your icons folder on your Home computer and select one of the book icon images. Then click Start Upload. Repeat to load all three icons.

Create a new custom module Now that we have our three images loaded, go to Extensions, Module Manager. Click New to create a new module. Then for Module Type, click Custom to create a new custom module. Call this first module Order Print Book and place it in the Rainbow template Top 4 Position.

Type “Order Print Book” in the first line. Then enter a new line and type “Click below to order a paperback copy of our book, Create Your Own Interactive Website!”. Then enter a new line and insert the Print Book Icon image with the JCE Editor image button. Set the Alignment for Center and the Dimensions. Then click INSERT to insert the icon image. Make another new line and type in “CLICK HERE TO ORDER”. Here is what the Module Edit workspace view of the module now looks like:

Then click Enter. This creates our “a” tag. Next, select the text “Order Print Book”. Then change the format tab from DIV to Heading 3. This creates our H3 tag. Next, select the Description and change the tag from DIV to Paragraph. This creates our “p” tag. Next, hide the Module Title and put it in the Rainbow template User 1 position and assign it to only our Home page. Finally, click on the Advanced tab and type in one blank space then the module style “fullroundpurple”. The click Save and Close and View the Home page. Here is what our first module now looks like:

Make two duplicate copies of the above module. Open the first duplicate module and change its name to Order Ebook. In the workspace, change the title to Order Ebook. Then select the image and click on the JCE Image button. Then replace the Print Book image with the Ebook image. Then publish the module in the Top 5 position and change the style to fullroundblue.

Then click Save and Close.

Open the second duplicate and call itOrder PDF Book in position Top 6. Here is what all three modules look like on the Home page of our website when we are done creating them:

Note that all three modules were created without any CSS or HTML – just assigning H3 and P tags to the title and description. Then typing in the Rainbow Preset style into the Advanced tab module box. Once we have our images and links, it takes less than 5 minutes to make all three modules.

How to Insure Feature Boxes Have Equal Heights Our three feature box modules now look pretty nice. But if you test their appearance with a variety of browser screen widths, you will see that the heights of the modules vary. This problem becomes more pronounced if some of our module titles or descriptions are much longer than the other titles and descriptions. Here is an example:

Download this tool and transfer it to your website extensions folder. Then install it using Extensions, Manage, Install. Then go to Extensions, Plugins and open this plugin. This plugin will calculate the maximum item height of all the modules sharing a css class (such as .equalize) and assign this height to all them. If you have modules on more than one row and want them to only match the height of the modules on the same row, then use a different class for each row and separate the class names with a coma (such as .equalize1,.equalize2). This tool is responsive and will recalculate item heights every time the browser window resizes.

In the modules you want to have be equal heights, you need to insert that same class name for each WITHOUT the period, but with a single space first in module suffix class box. The Equal Heights class name can go after our module styling class name by typing a space between the two classes.

Here is the result after adding the equalize class to all three modules:

Sparky not only gives us the ability to set different background colors for each row (in the template Row Settings window), but also the ability to set different background colors for each module position in any given row. For example, the Order Ebook module above is in the Top 5 module position. To change the background color of the Top 5 module position, we simply add the following to the end of our custom css:

.mp_top5 {background-color: yellow !important}

Combining our Rainbow template system preset styles with the Sparky Template Framework gives us the ability to control nearly every aspect in the appearance of our website. This concludes our chapter on making custom modules. In the next chapter, we will add a slideshow and videos to our Home page.