logo wide 2000x350

7 Custom Modules

Welcome to Chapter Seven of our course on creating your own interactive website!

Chapter 7 Custom Modules includes the following four sections:

7.1 Style Custom Modules with Basic CSS
7.2 Use Preset Classes to Style Custom Modules
7.3 Create Complete Module Classes
7.4 Use our Rainbow Presets to Style Feature Boxes

In contrast to articles, which take up the entire web page, modules are small boxes of content which take up a small portion of a page defined by a module position to display a title, text, image and or video with a READ MORE link that typically leads the reader to a full article page with more information about the topic or product.

In Section 7.1, we will explain how to make a simple module with only some text and a title. We will then review how to style this simple module to improve its appearance using basic inline commands.

In Section 7.2, we will learn how to use modules classes to more rapidly and consistently control the appearance of a series of modules rather than styling them just one at a time.

In Section 7.3, we will review how to combine border, background and link classes together to create complete module class presets.

In Section 7.4, we will use our module class presets to create three custom feature boxes for our Home page.

In every section, we will learn by actually creating several custom modules.


00
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:

01

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.”


Here is the link to this page which we will use as links for all three feature boxes and then replace later with better links as they become available:

https://createyourowninteractivewebsite.com/order-our-course-book


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.


02

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:

03

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.


04

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

05

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:

06

Click on the Code View tab and you will see that we have just created four DIV rows. There are no tags yet. Next, select the text CLICK HERE TO ORDER. Then click on the Link icon in the JCE Editor. Copy and paste the link URL.
https://createyourowninteractivewebsite.com/order-our-course-book

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:

07

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 it Order 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:

08

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:

09

To fix the height of the modules so they are the same regardless of the browser screen or text in the modules, we will install and use a free Joomla tool called Equal Heights. Here is the link to this tool in the Joomla Extension Directory.
https://extensions.joomla.org/extensions/extension/style-a-design/design/equalheights

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.

10

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.


11


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

12

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}

13
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.
Recall at the beginning of this chapter, we said that there were 4 parts to Module Styling. These are the Module Class (including background and border styling), title “h3” styling, description “p” styling and link a styling.

01

How to Add a READ MORE button to our Joomla Modules
Thus far, we have simply styled the h3 and p tags. Before we put all of the styles together, we will quickly review how to create CSS for our link tags. Links are styled using the “a” and “a hover” tags. The technical name for links is called buttons. Joomla has a one click tool for adding a READ MORE link to any Joomla article. But it does not offer this tool to add a READ MORE link to a Joomla module. The reason there is not a READ MORE button function in a Joomla Module Edit screen is because the module would not know what to link the Module to.

Thankfully, we can use the link function in the JCE editor to not only define where the reader is to be directed when they click on the READ MORE button but also to define what the READ MORE button looks like and have it related to the style of the rest of our module. First, let’s open our Eighth practice module and manually type the words READ MORE below the description. Select this READ MORE text. Then click on the LINK button in the JCE editor to open it. Then select any existing menu item or article as a link. Then click INSERT. The text for this new link will now turn blue. Here is what the workspace screen looks like:

02

Then click on the Code tab and note that the JCE editor has created an “a” tag for our READ MORE Text:

03

We can style this “a” tag just like we styled the h3 tag and the p tag. For example, we could add the following to our Rainbow template Custom CSS file:

.simplemodule a {

background-color: #333399;

border-radius: 20px;

color: #ddddff;

text-align: center;

font-size: 14px;

font-weight: bold;

line-height: 1.3;

padding: 10px;

display: inline-block;

vertical-align: middle;}


Because we have already added our simplemodule class to our eighth module, there is no need to add anything more to the module. Just refresh your front end browser and this is what our eighth module now looks like:

04

The border radius property is what creates the rounded border on our button. The Rainbow template includes 10 different colors with round buttons and 10 colors with square buttons. The easiest way to create your own buttons is to go online to a button CSS generator. Here is a link to a very easy one:
http://www.cssportal.com/css3-button-generator/


Here is the default screen for this button generator

05

The above Demo button uses a gradient background that changes color when we hover over it. To keep things simple, we will use a plain dark background that does not change color when we hover over it. Designing a button is like designing a miniature version of an entire module. We need to specify several properties. We will create 10 different buttons to match our 10 Rainbow module classes. We will also reverse the colors to make our button more distinctive. In other words, we will use light colored text on a dark background. Below is a table of values for our 10 Rainbow button color settings. The only difference between the 10 round and 10 square buttons is that the round buttons have a border radius of 20 pixels and the square buttons have a border radius of 0 pixels.




Button Color

Button Text Color Very Light

Background Start Color Medium

Background End Color Dark

Border Color Very Dark

purple

#eeccff

8855bb

552288

441177

blue

ddddff

8888ff

1144aa

114477

sky

#bbeeff

5588bb

1122aa

113366

cyan

#66ffff

00bbff

2255dd

223366

green

#ccffcc

00bb00

007700

005500

forest

#aaffaa

00aa66

006622

116633

gray

#eeeeee

999999

555555

444444

yellow

#ffffdd

ffdd00

ddaa00

666600

orange

#990000

ffdd00

bb8800

aa7700

pink

#ffddff

bb66bb

993399

881188




We will use CLICK HERE TO LEARN MORE! for our text. We will make each button bold Arial and a light color from the table above. Make the Shadow color the same as the text color make it more readable.

06


Then click on the Button tab. The Shadow color sets the border shadow. We will set all Shadows to black with a thickness of 1 pixel. Leave the padding set for 10 top and bottom and reduce it from 25 to 20 left and right.

07



Then click on the Border tab. We will set this at Solid and increase the radius from 10 to 20.

Next click on the Background tab. Use a lighter color for the background and the same light color at the start and a darker color to finish. This is the blue button.

08

Click on the Hover tab. Change the hover text color to #ddddee to match the normal text color. Then reverse the gradient colors on hover. Type in the colors. Then copy the code to a button code document on your home computer.


Button color CSS
When copying be sure to replace the “test button hover” with our “buttonroundblue hover.” Here is the button code for our round blue button:


.buttonroundblue a {

display: inline-block;

line-height: 1.3;

text-align: center;

vertical-align: middle;

margin-bottom: 20px;

font-family: arial;

font-weight: bold;

color: #DDDDEE !important;

font-size: 14px;

box-shadow: 1px 1px 1px #000000;

padding: 10px 20px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

border: 2px solid #114477;

background: #8888ff;

background: linear-gradient(top, #8888FF, #1144AA);

background: -ms-linear-gradient(top, #8888FF, #1144AA);

background: -webkit-gradient(linear, left top, left bottom, from(#8888FF), to(#1144AA));

background: -moz-linear-gradient(top, #8888FF, #1144AA);}




.buttonroundblue a:hover {

display: inline-block;

line-height: 1.3;

text-align: center;

vertical-align: middle;

margin-bottom: 20px;

color: #DDDDEE !important;

background: #1144AA;

background: linear-gradient(top, #1144AA, #8888FF);

background: -ms-linear-gradient(top, #1144AA, #8888FF);

background: -webkit-gradient(linear, left top, left bottom, from(#1144AA), to(#8888FF));

background: -moz-linear-gradient(top, #1144AA, #8888FF);}


Now that we have all of our individual CSS classes, it is time to put them altogether. We will start with a simple module that does not use a gradient color either for the module background or the button background. Here is the code for our simpleroundbluemodule:


.simpleroundblue {

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

margin: 0;

display: block;

min-height: 250px;

background-color:#ccccff !important;

/* MODULE BORDER ROUND STYLE */

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border: 3px solid #1144AA;}




.simpleroundblue h3 {

/* MODULE HEADER STYLE */

text-align: center;

font-size: 22px;

color: #114499;

font-weight: bold;

line-height: 1.4;

padding: 10px;

background-color: #eeeeff;}




.simpleroundblue p {

/* MODULE DESCRIPTION STYLE */

text-align: center;

color: #113355;

font-size: 18px;

font-weight: normal;

line-height: 1.2;

padding: 15px;}




.simpleroundblue a {

/* BUTTON ROUND STYLE */

display: inline-block;

line-height: 1.3;

text-align: center;

vertical-align: middle;

margin-bottom: 20px;

font-family: arial;

font-weight: bold;

color: #DDDDEE !important;

font-size: 14px;

box-shadow: 1px 1px 1px #000000;

padding: 10px 20px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

border: 2px solid #114477;

background-color: #8888ff;




.simpleroundblue a:hover {

/* BUTTON ROUND HOVER STYLE */

display: inline-block;

line-height: 1.3;

text-align: center;

vertical-align: middle;

margin-bottom: 20px;

color: #DDDDEE !important;

background-color: #1144AA;}

Note that we have only one class above that needs to be added to our module Advanced tab. It is called simpleroundblue. The first section styles the entire module. The second section styles the h3 header box. The third section styles the “p” text box. Then the final two sections style the button.

Here is a more complex version of the above module with a radial gradient color for the module background and a different gradient color for the button and button hover.

.fullroundblue {

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

margin: 0;

display: block;

min-height: 250px;

/* RADIAL BACKGROUND STYLE */

/* 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%);

/* MODULE BORDER ROUND STYLE */

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border: 3px solid #1144AA;}


.fullroundblue h3 {

/* MODULE HEADER STYLE */

text-align: center;

font-size: 22px;

color: #114499;

font-weight: bold;

line-height: 1.4;

padding: 10px;

background-color: #eeeeff;}




.fullroundblue p {

/* MODULE DESCRIPTION STYLE */

text-align: center;

color: #113355;

font-size: 18px;

font-weight: normal;

line-height: 1.2;

padding: 15px;}




.fullroundblue a {

/* BUTTON ROUND STYLE */

display: inline-block;

line-height: 1.3;

text-align: center;

vertical-align: middle;

margin-bottom: 20px;

font-family: arial;

font-weight: bold;

color: #DDDDEE !important;

font-size: 14px;

box-shadow: 1px 1px 1px #000000;

padding: 10px 20px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

border: 2px solid #114477;

background: #8888ff;

background: linear-gradient(top, #8888FF, #1144AA);

background: -ms-linear-gradient(top, #8888FF, #1144AA);

background: -webkit-gradient(linear, left top, left bottom, from(#8888FF), to(#1144AA));

background: -moz-linear-gradient(top, #8888FF, #1144AA);}




.fullroundblue a:hover {

/* BUTTON ROUND HOVER STYLE */

display: inline-block;

line-height: 1.3;

text-align: center;

vertical-align: middle;

margin-bottom: 20px;

color: #DDDDEE !important;

background: #1144AA;

background: linear-gradient(top, #1144AA, #8888FF);

background: -ms-linear-gradient(top, #1144AA, #8888FF);

background: -webkit-gradient(linear, left top, left bottom, from(#1144AA), to(#8888FF));

background: -moz-linear-gradient(top, #1144AA, #8888FF);}



Assuming you have downloaded and are using our Rainbow Template, all you need to do to apply this style to a module is type “fullroundblue” into the Module Advanced Tab Module Class box. After finishing all 10 full round and all 10 full square module styles, then creating one module to show each style, here is what our finished modules look like:

09

Creating preset Module classes gives us the most complete control over the appearance of our modules. However, the drawback of module classes is that it requires some knowledge of CSS if you want to create your own module classes rather than simply using the 20 preset module classes that come with our Rainbow template. There are a lot of people that simply do not have the time or interest to learn CSS and HTML. Nor should they have to. In the next section, we will review how to use our Rainbow template presets to style feature boxes for our Home page!
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.
All websites consist of two separate parts. The first part is the content of a website – such as text, images and videos. The second less visible part is the style applied to this content – such as whether you use a large black font or a small red font. The same is true of modules or feature boxes. The module has content and styling to determine its appearance. The content of a module or feature box typically has four main parts. These are a Title, a Description, an Image (or video) and a READ MORE link leading to a more complete page describing the topic or product.

01

The style of appearance of a module also has four parts:

02

Controlling the style of our module means controlling the appearance of the Title Box, the Description area, the READ MORE link and the background color and border of the module. The biggest benefit of our Sparky Template Framework is that it gives us the ability to quickly and easily create as many module positions as we want. To take full advantage of this system, we need to learn how to create the content for and style the appearance of these magic module boxes of featured content. In this article, we will explain how to create a simple custom module and then review how to control the appearance of this module using basic Inline CSS.

Both of these topics require learning a little bit about HTML and CSS – two very basic computer coding languages. While you do not need to know either HTML or CSS to create modules, it is helpful to understand these concepts to better understand how any given module is structured and styled. If you really do not want to learn about HTML and CSS, you can skip this section and move directly to Section 7.4 where we explain how to control the content and appearance of modules just by using our Rainbow Template System presets.

I want to make it clear that this will not be a real course on either HTML or CSS. We will simply be using a couple of very basic commands in order to better understand how to make and style Joomla Custom Modules. To learn more about HTML, visit the following website: http://www.w3schools.com/html/default.asp

To learn more about CSS basics, visit the following website:
http://www.w3schools.com/css/default.asp

How to Make a Joomla Custom Module
Making a new Joomla custom module is not much different from making a Joomla article. In order to see how our custom modules will appear on our website, let’s begin by creating a new Joomla article called Module Demo Page. Go to Content, Articles New. For Title, type in Module Demo Page. For description, type: “This is our page to view new modules we will be creating.” Leave the article unassigned to any category and not on the Home Page. Then create a single article menu item for our Module Demo Page in our Main Menu. Use the Link Style tab to give it the light green background color. Click Save and Close. Here is this new Module Demo Page menu item in our website:

03

Now that we have a page to assign our new practice modules to, go to Extensions, Modules, then click New.

04

This will bring up a page called Select a Module Type. This page has a list of many module types. Scroll down the page and click on Custom.

This takes us to the Joomla Modules: Custom screen which looks a lot like the Joomla Article Edit screen. For title, type My First Custom Module.

05

Type a brief description and leave the Title at Show Title. We will not add an image or READ MORE link to our first few modules as we want to focus in on various ways to style or change the appearance of just the title and the description.

We next need to assign our new module to a module position. We want a position that is below the Joomla content. Recall that Sparky Row 7 has the Joomla Content and that Rows 8 through 18 all have four module positions. We will assign this module to the Rainbow template Row 8a module position.

06

Then click on the Menu Assignment tab and assign the module to “Only the Selected Pages.” Select None. Then check the Module Demo Page:

07


We will assign every module we make to this Module Demo page. Click Save and Close and View the Site. Then click on the Module Demo page to view our new module.

08

The gray area at the top of the page is our Joomla article content Title and Text. Because it is Joomla Content, it is in Sparky Row 7. The light blue area above is our first module. It is in Sparky Row 8. Recall that when we set up our Sparky template, we used the Sparky Row Settings to set the Joomla Content Row 7 background color as light gray and the Sparky Row 8 background as light blue. We can change the background color of any Sparky Row at any time in the Sparky template Edit Layout screen.

Let’s first look at the title of our module. There are two options for the title. We can either display the title or not display the title. Above we have displayed the title. There is a problem with displaying the title in that we cannot change the appearance of the title in the Module Edit screen. Instead, we have to change its appearance in the Template Edit screen. Go to Extensions, Templates, Styles and click on the Rainbow template to edit it. Click on the Style tab. Then click on the H3 (Module Heading) tab. H3 (Module Heading) is set by default for Font Color #333333. We will make it dark blue #333399, 20px and change the System font to Bold.

09

Then click Save and Close and View Site.

10

Thus, the Sparky template does allow us to change the size of the Title text, the color of the Title text and whether it is aligned to the left or centered in the box. But it does not allow us to control the background color of the title box. It also does not allow us to use different title colors for different modules. Every module on every page is required to have the same title appearance that is set by this template edit screen. This may be good for consistency, but it is not good for creativity. An easier way to give us more control over the appearance of our module title is to turn off the Module Title in the Module Edit screen by setting Show Title to Hide. We can then include the title in the workspace. To see how this is done, go to Extensions, Modules and make a duplicate of our first module. Then click on the Duplicate Module to open it and change its title to My Second Custom Module. Publish it, Hide the title and assign it to Spring Row 8b. Then add the Title My Second Custom Module to the Work Space just above the description.

11

Select the title and use the JCE editor to make it 20 pt, bold and dark blue #333399).

12


Then click Save and Close and View Site.

13


Our second module looks almost like our first module. But we can now control the appearance of our title and the appearance of our description in the Module Edit screen rather than the template edit screen. Let’s assume we wanted to make the title Red and also get more space above the title. Go back to the Module Manager. Select the Second Custom Module and make a duplicate of it. Then open the duplicate and change the title to My Third Custom Module. Publish it and put it in Row 8c. Now in the workspace, place your cursor just before the title and hit enter to lower the title one line. Then select the title and change the font color to red.

14


Click Save and Close. Then view our Module Demo Page.

15


Note that by using the Module Edit screen rather than the Template Edit screen to change the appearance of the title, our other module titles remained blue. Only our new title changed to red. We are able to do this because we used something called Inline CSS to over-ride the template CSS. This is an important principle. Inline CSS has priority over Style CSS and Style CSS has priority over Template CSS (which in the case of Sparky is controlled by a dynamically created CSS Style sheet using the settings we create in the Template Edit screen).


Use Inline CSS to Improve the Appearance of our Custom Module
To see what Inline CSS looks like, go back our Module Manager, select our Third Custom Module and make a duplicate of it. Then open the duplicate module and rename it My Fourth Custom Module. Assign it to Sparky Row 8d.

16

While we can make all kind of changes to our module with the JCE Editor without ever knowing the code it is creating, it helps to look at the actual code sometimes. Click on the Code tab in the upper right corner of our workspace. You can also change to Code View by clicking on the wheel in the upper left corner of the workspace.

17


Do not worry if the above code looks like gibberish. We will break it down into its various parts. First, the JCE editor creates two “<DIV” tags to divide the module into two parts. There is one part for the title for the title (see the bold below) and another <DIV for the Description.

<div style="text-align: center;"><span style="font-size: 20pt; color: #ff0000;"><strong><span style="font-family: arial, helvetica, sans-serif;"><br />My Fourth Custom Module</span></strong></span></div>

<div style="text-align: center;"><span style="font-size: 14pt;"><br />This is the description for my fourth custom module.</span></div>


Understanding HTML and Inline CSS
<div> tags are called HTML elements. Nearly every HTML element has an opening tag and a closing tag. For example <div> This is some text in a box.</div>. Note that the opening and closing DIV tags look the same except that the closing tag has an extra forward slash. Heading tags are also HTML elements. For example <h3> This is a Module Heading or Module Title. </h3>.


Each of these two DIV tags in Module 4 is followed by style=”property: value;”>. This is the Inline CSS command. Inline CSS uses the style= attribute to apply one or more styles to a single HTML element. For example, check out the following element:

<div style="text-align: center;font-size: 20pt; color: #ff0000; font-weight: bold; font-family: arial, helvetica, sans-serif;">My Fourth Custom Module</div>


Inline CSS applies the following styles to the text “My Fourth Custom Module:”

First, it aligns the text to the middle of the box. It then increases the text size to 20pt (for comparison normal text is 14pt). It then turns the color to red (normal text is black). It then makes the text bold and assigns the text to a font family called Arial.

The JCE editor also put in a couple of <span tags which were really not needed because all of the style could have been included in the <div style=”property: value;”> tag. Delete the code in the code view box and replace it with the following code which has eliminated the extra span tags:

<div style="text-align: center;font-size: 20pt; color: #ff0000; font-weight: bold; font-family: arial, helvetica, sans-serif;">My Fourth Custom Module</div>

<div style="text-align: center; font-size: 14pt; color: #000000’ font-weight: normal;"><br/>This is the description for my fourth custom module.</div>


Then click Save and click the Editor tab to return to the normal workspace view. Having two separate <DIV> boxes for our custom module allows us to use different styles for each box. We now have a title box and a Description box. Click on the Code tab again and add the following to the Title style background-color: #aaffaa; By now you should recognize that this is medium green. Then apply a background color to the description: background-color: #ffaaff; This is a purple pink. Here is our new HTML code:

<div style="text-align: center; font-size: 20pt; color: #ff0000; font-weight: bold; font-family: arial, helvetica, sans-serif; background-color: #aaffaa;">My Fourh Custom Module</div><div style="text-align: center; font-size: 14pt; color: #000000; background-color: #ffaaff; font-weight: normal;"><br />This is the description for my fourth custom module.<br /><br /></div>


Then click Save. Then click on the Editor tab to bring back the normal view:

18

Then click Save and Close and view our fourth module on the Module Demo page:


19

While DIV tags allow us to divide our module into two separate blocks, each with its own styling, the problem with using DIV tags to define our module styles is that it is not very precise. There is no real difference between the Title box and the Description box. Both are simply DIV boxes. It would be better to give them different tags. So let’s go back to our Module Manager. Select our Fourth Module and make a duplicate of it. Then open the duplicate module and change the title to My Fifth Custom Module. Publish it in Row 9a. Then click on the Code tab and change the first <div> to <h3>. Change the second <div> tag to a paragraph <p> tag. Then click Save and click on the Editor tab to see the result.

20

Changing to the h3 tag has introduced some hidden margin from someplace. We can fix this by adding “margin: 0;”. While we are at it, we will place 15 pixels of padding in both the Title box and the Description box. Here is the new code you can copy and paste in the Code box:

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

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

Click Save. Then click on the Editor tab to return to the normal view and confirm that we have eliminated the white space. Click Save and view our fifth module on the Module Demo page. You will see that it looks just like the fourth module. But the benefit of using the <h3> tag and <p> tag instead of two DIV tags is that we can now create a module classes for our h3 tag and p tag. We can then assign text to each of these tags in the Module Edit screen using the JCE editor and we can apply these classes to our modules using the Joomla Module Edit Advanced tab.

In summary, we have created a module or feature box with a title and description for the content. We then styled both the content and the description using several Inline CSS properties. There are several problems with this method of making modules. First, it requires knowing at least some HTML and CSS. Even one small mistake may prevent the module content or styling from displaying properly. Second, each module will need to be styled one at a time – a very time consuming task if you have a lot of modules to make. But the biggest problem is trying to remember what hexadecimal color combinations go with what modules. To solve this problem, Joomla allows us to create Preset classes or styles to control the appearance of our modules.