Joomla Templates: Creating a Pure CSS Template | Part 3/Page 2

Joomla Templates: Creating a Pure CSS Template - Part 3

We add some CSS to style the modules with a border and a background for the module titles.

Our CSS now looks like this:

/*Compass Design typography CSS*/
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}
#wrap{
border:1px solid #999;
}
#header{
border-bottom: 1px solid #999;
}
#footer{
border-top: 1px solid #999;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
}
h2,.contentheading{
font-size:1.5em;
}
h3{
font-size:1.3em;
}
h4{
font-size:1.2em;
}
h5{
font-size:1.1em;
}
h6{
font-size:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable{
margin-bottom:1em;
padding:0 10px; /*padding for inside text*/ border:1px #CCC solid;
}
.moduletable h3{
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px;
/*negative padding to pull h3 back out from .moduletable padding*/ }

NOTE

Several of the menus in the default installation have a menu suffix in the module properties of _menu. To get everything behaving properly, I deleted that parameter.

This typography CSS now produces the result shown in Figure 9.6.

FIGURE 9.6 Basic template with module title styling

[previous] [next]

URL:

Joomla Templates: Creating a Pure CSS Template | Part 3/Page 2

Joomla Templates: Creating a Pure CSS Template - Part 3

NOTE

Find a programming school near you