Creating a clean CSS template for Joomla 1.5 - part 2.2

Previous articles:
Creating a Joomla Template by Standards - Part 1
Creating a Jooml template by standards - part 1 (continued)
Creating a clean CSS template for Joomla 1.5 - part 2.1

CSS for Joomla

Although Joomla 1.5 has the functionality to redefine what the kernel displays with templates, its default output still uses multiple tables to display content in the main body of the page. Along with these tables, some predefined CSS classes are available for changing the page style to the designer. According to the results of a small study conducted by members of the community, we have compiled a table that contains the current list of these classes. Note that the list does not contain basic page elements, such as H1, H2, p, ul, a, form, etc.

CSS styles inherited in version 1.5 from version 1.0

article_separator adminform author bannerfooter bannergroup bannerheader banneritem blog blog_more blogsection breadcrumbs button buttonheading clr componentheading content_email content_rating content_vote contentdescription contentheading contentpagetitlw

contentpane contentpaneopen contenttoc createdate created-date date input inputbox intro latestnews loclink mainlevel message metadata modifydate module moduletable mosimage mosimage_caption mostread newsfeed

outline pagenav pagenav_next pagenav_prev pagenavbar pagenavcounter pathway pollstableborder read search searchintro sections sectiontable_footer sectiontableentry sectiontablefooter sectiontableheader small smalldark sublevel title wrapper

')
Many of the classes that you see in this table have more specific CSS styles. Usually, a more specific rule takes precedence over a less specific rule.

For example:

 a {color: blue;} a: link {color: red;}
 .contentheading {color: blue;}
 div.contentheading {color: red;}

The link color and the .contentheading color will be red, as this rule is more specific (because .contentheading is inside a <div>)

In the case of Joomla templates, you will often see the use of more specific rules. This often happens when a class is applied to a table. Here are some more examples:

 .moduletable
 table.moduletable

.moduletable is the class for the <div> block that contains the module. table.moduletable only defines the style for a table with a given class class = "moduletable".
.moduletable determines the style regardless of which element this class belongs to.

 a.contentpagetitle: link
 .contentpagetitle a: link

a.contentpagetitle: link applies the style to any “a” tag, which is a link for which the .contentpagetitle class is specified.
.contentpagetitle a: link applies the style to all links within an element for which the class .contentpagetitle is set.

Specificity is not so easy to understand, so it’s much easier to start using simpler, basic styles, moving on to more specific ones later if you don’t achieve the desired result.

Here are some links to sites where specificity is discussed in detail:

• www.htmldog.com/guides/cssadvanced/specificity
• www.meyerweb.com/eric/css/link-specificity.html
• www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

At the moment our template uses several tables. As noted earlier, this slows down the display of pages and complicates their further modification. In order to reduce the number of tables obtained in the output of modules, we must use the style parameter when calling jdoc: include.

What you need to know

Joomla will display specific, predefined elements, id and classes directly in the page code. This can be avoided if we want to go to design using CSS.

Modules and Templates

When calling a module in index.php, you can use some options to set how it will be displayed. The syntax is as follows:

 <jdoc: include type = "modules" name = "LOCATION" style = "OPTION" />

The style parameter is optional, its options are specified in templates / system / html / modules.php. Currently, the default modules.php file contains the following options:

OPTION = “table” (default display) modules are displayed in a table column. Here is an example of such a display:

  <table cellpadding = "0" cellspacing = "0" class = "moduletable <? php echo $ params-> get ('moduleclass_sfx');?>">
  <? php if ($ module-> showtitle! = 0):?>
   <tr>
    <th valign = "top">
     <? php echo $ module-> title;  ?>
    </ th>
   </ tr>
  <? php endif;  ?>
   <tr>
    <td>
     <? php echo $ module-> content;  ?>
    </ td>
   </ tr>
   </ table>

OPTION = "horz" causes the modules to be displayed horizontally. Each module is displayed in a table cell. Display example:

  <table cellspacing = "1" cellpadding = "0" border = "0" width = "100%">
   <tr>
    <td valign = "top">
     <? php modChrome_table ($ module, $ params, $ attribs);  ?>
    </ td>
   </ tr>
  </ table>

OPTION = "xhtml" causes the modules to be displayed in divs. Display example:

   <div class = "moduletable <? php echo $ params-> get ('moduleclass_sfx');?>">
   <? php if ($ module-> showtitle! = 0):?>
    <h3> <? php echo $ module-> title;  ?> </ h3>
   <? php endif;  ?>
    <? php echo $ module-> content;  ?>
   </ div>

OPTION = "rounded" causes the modules to be displayed in a format that allows you to create stretchable rounded corners. If this style is specified, the div name is changed from “moduletable” to “module”. Display example:

   <div class = "module <? php echo $ params-> get ('moduleclass_sfx');?>">
    <div>
     <div>
      <div>
       <? php if ($ module-> showtitle! = 0):?>
        <h3> <? php echo $ module-> title;  ?> </ h3>
       <? php endif;  ?>
      <? php echo $ module-> content;  ?>
      </ div>
     </ div>
    </ div>
   </ div>

OPTION = "none" causes the modules to be displayed in a "raw" form, not containing elements or headers. Here is an example:

  echo $ module-> content;

As you can see, CSS-based options (xhtml and rounded) are more linear in the code, which makes it easier to apply styles to web pages. I do not recommend using the table (default) or horz options unless absolutely necessary.

And now a really good moment!

If you look at the modules.php file, you will see all the options that exist for the modules. But you can easily create your own version, it is part of the new powerful features of templating in version 1.5. We will look at this topic in our next chapter on template overrides.

To develop our template, we will give all our modules style = "xhtml":

 <body>
 <div id = "wrap">
   <div id = "header">
     <div class = "inside">
         <h1> <? php echo $ mainframe-> getCfg ('sitename');?> </ h1>
       <jdoc: include type = "modules" name = "top" style = "xhtml" />
     </ div>
   </ div>
   <div id = "sidebar">
     <div class = "inside">
       <jdoc: include type = "modules" name = "left" style = "xhtml" />
     </ div>
   </ div>
   <div id = "content">
     <div class = "inside">
       <jdoc: include type = "module" name = "breadcrumbs" style = "none" />
       <jdoc: include type = "component" /> </ div>
   </ div>
   <div id = "sidebar-2">
     <div class = "inside">
       <jdoc: include type = "modules" name = "right" style = "xhtml" />
     </ div>
   </ div>
   <div id = "footer">
     <div class = "inside">
       <jdoc: include type = "modules" name = "footer" style = "xhtml" />
     </ div>
   </ div>
 <! - end of wrap ->
 </ body>

Note that we cannot set these styles in <jdoc: include type = "component" />, since this is not a module.

What you need to know

In version 1.5, the output of the modules can be fully customized, or you can use the built-in output. All of these options are called module chrome.

We also put the site title in the <H1> tags. This is more semantically correct and will help with SEO. We will also remove the underlay from div markup blocks.

And also add a bit of CSS to define the styles of the frames and the background for the module headers.

Our CSS now looks like this:

 * {
 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: 700;
 }

 # footer, .small, .createdate, .modifydate, .mosimage_caption {
 font: 0.8em Arial, Helvetica, sans-serif;
 color: # 999;
 }

 .moduletable {
 margin-bottom: 1em;
 border: 1px #CCC solid;
 padding: 0 10px;
 }

 .moduletable h3 {
 background: # 666;
 color: #fff;
 text-align: center;
 font-size: 1.1em;
 margin: 0-10px 0.5em;
 padding: 0.25em 0;
 }

Note
Some menus have the default suffix _menu in the properties of the module. In order for everything to work correctly, I deleted this parameter.

CSS with text now produces the following result: Basic template using styles for module headers

Continuation here