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