logo wide 2000x350
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.