Creating Pure CSS Templates in Joomla!

This chapter is from the book 

Using CSS to Create a Tableless Layout: CSSTemplateTutorialStep2

In this section, you will use pure CSS to make a three-column layout for the Joomla template. You will also be making it a "jello" layout. There are three main types of web page layouts: fixed, fluid, and jello—and they all refer to how the width of the page is controlled. A fixed layout has the width set to some fixed value. A fluid layout can grow and shrink to the browser window, and a jello layout is fluid but between some minimum and maximum values.

The width of the page is an issue because of the many browser resolutions at which people surf the web. The majority, 79%, are using 1024x768 and higher (see www.upsdell.com/BrowserNews/stat_trends.htm#res). Only a couple years ago, fluid layout was preferable for maximum flexibility. Now, however, many users have big (2,000+-pixel) screens. A fluid layout becomes unreadable because the human eye cannot correctly scan lines over 960 pixels. Thus, I now prefer to use the jello layout.

A typical design might use tables to lay out the page. Tables are useful as a quick solution in that you just have to set the width of the columns as percentages. However, tables also have several drawbacks. For example, tables have lots of extra code compared to CSS layouts. This leads to longer load times (which surfers don't like) and poorer performance in search engines. The code can roughly double in size, not just with markup but also with "spacer GIFs," which are 1x1 transparent images placed in each cell of the table to keep the cells from collapsing. Even big companies sometimes fall into the table trap.

There are a couple major problems with a site using tables for layout:

• They are difficult to maintain. To change something, you have to figure out what all the table tags, such as <tr> and <td>, are doing. With CSS, there are just a few lines to inspect.
• The content cannot be source ordered. Many web surfers do not see web pages on a browser. Those viewing with a text browser or screen reader read the page from the top-left corner to the bottom right. This means that they first view everything in the header and left column (for a three-column layout) before they get to the middle column, where the important stuff is located. A CSS layout, on the other hand, allows for "source-ordered" content, which means the content can be rearranged in the code/source. Perhaps your most important site visitor is Google, and it uses a screen reader for all intents and purposes.

Let's look at our layout using CSS. You can position elements (stuff) in several ways by using CSS. For a quick introduction, a good source is Brainjar's "CSS Positioning" (see www.brainjar.com/css/positioning/).

If you are new to CSS, you might want to read at least one beginner's guide to CSS. Here are a few suggestions:

• Kevin Hale's An Overview of Current CSS Layout Techniques (see www.particletree.com/features/an-overview-of-current-css-layout-techniques/)
• htmldog's CSS Beginner's Guide (see www.htmldog.com/guides/cssbeginner/)
• yourhtmlsource.com (see www.yourhtmlsource.com/stylesheets/)

In this chapter, you will use floats to position your content. At its most basic, your template might look as shown in Figure 9.4. It's still not very exciting, but let's look at what the different parts are all about.

The CSS styles are defined in the head of the file to show what is going on, but normally they are contained in an external file that the page links to, such as the file template.css mentioned earlier in this chapter.

In Figure 9.4, each column—left, middle, and right—is given its own element. Each is floated left and given a percentage width that together add up to 100%. The clear:both style on the footer tells the browser to stop floating and makes the footer stretch across all three columns. (When you build your second template in this chapter, you will have to use a more advanced clearing technique.)

To improve the layout and to add some breathing room to the content, you need to add some column spacing, commonly called gutter. Unfortunately, there is a problem here. You might know that Internet Explorer generally does not interpret CSS correctly. One problem is that it calculates width in a unique way. You can cope with this problem by not using any padding or borders on something that has width. To get the gutter, you instead add another, narrower, <div> element that fits inside the columns.

To the CSS you add this:

.inside {padding:10px;}

The resulting <body> code for index.php is as follows:

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
        <?php echo $mainframe->getCfg('sitename');?>
      <jdoc:include type="modules" name="top" />
    </div>
  </div><!--end of header-->
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" />
    </div>
  </div><!--end of sidebar-->
  <div id="content">
    <div class="inside">
      <jdoc:include type="component" />
    </div>
  </div><!--end of mainbody content-->
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" />
    </div>
  </div><!--end of sidebar-2-->
  <div id="footer">
    <div class="inside">
Powered by <a href="http://joomla.org">Joomla!</a>. Valid <a href="http://validator.w3.org/check/referer">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
    </div>
  </div><!--end of footer-->
</div><!--end of wrap-->
</body>

The template.css file looks like this:

/*Compass Design template.css CSS file*/
body {}

#wrap {
   min-width:760px;
   max-width:960px;
   }

#header {}

#sidebar {float:left;width:20%; overflow:hidden }

#content {float:left;width:60%; overflow:hidden }

#sidebar-2 {float:left;width:20%; overflow:hidden }

#footer {clear:both;}

.inside {padding:10px;}

This simple layout is a good one to use for learning about how to use CSS with Joomla because it shows two of the advantages of CSS over table-based layouts: It is less code, and it is easier to maintain. In essence, it says to fit the page into a space that's 760 to 960 pixels wide; display the header full width and then divide the space into a column that's 20% of this total width followed by a column that's 60% of the width, followed by a final one that's 20% of the width. After that, it is to display the footer at full with. For the content that fits inside each of these spaces, give it 10 pixels of padding.

However, this simple layout is viewer ordered in the sequence in which you see content on the screen and not source ordered to place the most important content at the beginning of the generated HTML source yet still have the same viewer-ordered appearance onscreen, with the left column displayed before (that is, to the left of) the center column. For that, you must use a more advanced layout known as a nested float.

Source-ordered layouts perform better for SEO than do layouts where the important content occurs late in the code. From a Joomla site perspective, the important content is that which comes from the mainbody component. For now, to keep the CSS simple, we'll stick with this viewer-ordered layout, and we'll change to source-ordered layout later in the chapter.

Default CSS

So far, all the CSS has been only about layout, which will make a plain page. So let's add some formatting:

/* template.css CSS file*/
body {
   text-align:center; /*center hack*/
   }
#wrap {
   min-width:760px;
   max-width:960px;
   width: auto !important; /*IE6 hack*/
   width:960px; /*IE6 hack*/
   margin:0 auto; /*center hack*/
   text-align:left; /*center hack*/
   }
#header {}
#sidebar {float:left;width:20%; overflow:hidden }
#content {float:left;width:60%; overflow:hidden }
#sidebar-2 {float:left;width:20%; overflow:hidden }
#footer {clear:both;}
.inside {padding:10px;}

Here, you center the page by using a small hack. You have to do this because Internet Explorer does not interpret CSS accurately. With a standards-compliant browser, you could just use margin:0 10%; to center the page or margin:auto; but Internet Explorer does not recognize that, so you center the "text" of the whole page as a way of centering the "wrap" <div>, and then align the text back to the left when you are inside the wrap <div>.

In celebration of Internet Explorer 7's support of min/max width, you can add minimum and maximum widths. Note that you have to add a tiny hack for Internet Explorer 6, which does not understand these settings—it will just ignore the whole !important statement line and have a plain fixed 960-pixel width.

You add a new style to the columns, overflow:hidden, that makes the page "break" more consistently as you reduce its width.

As you begin working on typography with CSS, you should set some overall styles and include a global reset:

/*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;
   }

The purpose of a global reset is to override the default settings that are different in every browser and get to a clean, consistent starting point, regardless of which browser the page is being displayed on. Everything is given a zero margin and padding, and then all block-level elements are given a bottom and a bottom margin. This helps achieve browser consistency. (The first CSS selector above is called the star selector, and it acts as a universal selector even in Internet Explorer 6.) You can read more about the global reset at www.clagnut.com/blog/1287/ and www.leftjustified.net/journal/2004/10/19/global-ws-reset/. You set the font size to 76% to try to get more consistent font sizes across browsers. All font sizes are then set in ems. Setting line-height:1.3 helps readability. When you set fonts and line heights in ems, the pages are more accessible because the viewers will be able to resize the fonts to their own preferences, and the pages will reflow and remain readable. This is discussed further at www.thenoodleincident.com/tutorials/typography/template.html.

If you were to add some background colors to the header, sidebars, and content containers, you would see something like what is shown in Figure 9.5.

Notice that the side columns do not reach the footer. This is because they extend only as far as their content; where the space is white on the left and on the right, the side columns don't exist. If you have a template that has a white background for all three columns, this is no problem. You will use this approach and will have boxes around the modules. If you want equal-height columns that are colored or have boxes, you have to use a background image that tiles vertically. This technique, called faux columns, is described at www.stopdesign.com/log/2004/09/03/liquid-bleach.html and www.meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/.

Joomla-Specific CSS

Although Joomla 1.5 has the functionality to override the core output in a template, its default rendering still uses a significant number of tables to output content in the mainbody. Along with these tables, CSS class assignments are available for styling pages. Based on some research by various community members, Table 9.2 shows the current list of CSS style classes. Note that it does not include generic web page styles, such as H1, H2, p, ul, a, form, and so on.

Table 9.2. Default CSS Style Classes in Joomla 1.5

article_separator	contentpane	outline
adminform	contentpaneopen	pagenav
article_separator	contenttoc	pagenav_next
author	createdate	pagenav_prev
bannerfooter	created-date	pagenavbar
bannergroup	date	pagenavcounter
bannerheader	input	pathway
banneritem	inputbox	pollstableborder
blog	intro	read
blog_more	latestnews	search
blogsection	loclink	searchintro
breadcrumbs	mainlevel	sections
button	message	sectiontable_footer
buttonheading	metadata	sectiontableentry
clr	modifydate	sectiontablefooter
componentheading	module	sectiontableheader
content_email	moduletable	small
content_rating	mosimage	smalldark
content_vote	mosimage_caption	sublevel
contentdescription	mostread	title
contentheading	newsfeed	wrapper
contentpagetitlw

Many style classes in Table 9.2 actually have comparable CSS styles that are more specific in their definitions. Basically, a more specific rule overrides a less specific rule. Here's an example:

a {color:blue;}
a:link {color:red;}

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

The color of a link and the color of .contentheading will be red, as that rule is more specific (because .contentheading is contained within a <div>).

In the case of Joomla templates, you will often see more specific rules used. This often occurs when the class is on a table. Here are more examples:

.moduletable
table.moduletable

.moduletable is the name of the <div> that wraps the module. table.moduletable will apply the style only to a table with class="moduletable" on it. .moduletable will apply the style regardless of what element the class is on.

Consider these examples:

a.contentpagetitle:link
.contentpagetitle a:link

a.contentpagetitle:link will apply the style to any a tags with a .contentpagetitle class on them that is a link. .contentpagetitle a:link will apply the style to any elements inside .contentpagetitle that are links.

Specificity is not easy to understand; the following websites discuss specificity 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, although your template's index.php file has no table tags within it, the generated page includes several tables. This is because Joomla 1.5 has a new feature called template overrides (more about them later) that eliminate tables from layout; however, to remain backward compatible with template designers, Joomla will output them as the default. As mentioned earlier, this slows down the pages and makes them more difficult to update. To reduce the number of tables, when you call the modules, you need to use style parameters in the jdoc:include statements.

Modules in Templates

When a module is called in the index.php file, there are several options for how it is displayed. The syntax is as follows:

<jdoc:include type="modules" name="location" style="option" />

The style, which is optional, is defined in templates/system/html/modules.php. Currently, the default modules.php file contains the following layout options: table, horz, xhtml, rounded, and none. Let's take a brief glimpse at the lines of code needed for each of these options:

OPTION="table" (default display) modules are displayed in a column. The following shows the output from Joomla when we use the "table" option. Note the PHP statements would be replaced by actual content:

<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" makes the modules appear horizontally. Each module is output in the cell of a wrapper table. The following shows the output from Joomla when we use the "horz" option:

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

OPTION="xhtml" makes modules appear as simple div elements, with the title in an H3 tag. The following shows the output from Joomla when we use the "xhtml" option:

<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" makes modules appear in a format that allows, for example, stretchable rounded corners. If $style is used, the name of the <div> changes from moduletable to module. The following shows the output from Joomla when we use the "rounded" option:

<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" makes modules appear as raw output containing no element and no title. Here is an example:

echo $module->content;

As you can see, the CSS options (xhtml and rounded) are much leaner in code, which makes it easier to style the web pages. I don't recommend using the options (suffixes) table (default) or horz unless absolutely needed.

If you examine the modules.php file shown earlier, you will see all these options that exist for modules. It's easy to add your own; this is part of the new templating power of Joomla 1.5. (We will look at this in more detail in the section "Template Overrides," later in this chapter.)

To develop a template, you can put the module style xhtml on all your modules in index.php:

<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><!--end of header-->
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div><!--end of sidebar-->
  <div id="content">
    <div class="inside">
      <jdoc:include type="component" />
    </div>
  </div><!--end of mainbody content-->
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
  </div><!--end of sidebar-2-->
  <div id="footer">
    <div class="inside">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div><!--end of footer-->
  </div><!--end of wrap-->
</body>

Let's remove the background from the layout divs and add some CSS to style the modules with a border and a background for the module titles.

The typography portion of your CSS file should now look 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*/ }

Here you have added specific style rules for the modules generated with style="xhtml" and therefore generated each with a <div> of class .moduletable and having the module's heading displayed in an <h3> tag within that <div>.

The typography CSS you've created now produces the result shown in Figure 9.6.

Menus in Templates

You saw in Chapter 5, "Creating Menus and Navigation," that there are a number of settings for how a menu can be rendered.

Again, using CSS lists rather than tables results in reduced code and easier markup. After setting the Module Manager parameters so that all your menus render as lists, you have only 12 tables (you'll see how to remove the rest using the Joomla 1.5 override feature). Remember, the list setting is used in Joomla 1.5; flat list is from Joomla 1.0 and will be deprecated. Lists are also better than tables because text-based browsers, screen readers, non-CSS-supporting browsers, browsers with CSS turned off, and search bots will be able to access your content more easily.

One of the other advantages of using CSS for menus is that there is a lot of sample code on various CSS developer sites. Let's look at one of them and see how it can be used.

A web page at maxdesign.com has a selection of more than 30 menus, all using the same underlying code (see www.css.maxdesign.com.au/listamatic/index.htm). It's called the Listamatic. There is a slight difference in the code that you have to change in order to adapt these menus to Joomla.

These list-based menus use the following general code structure:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=" #" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

This means that there is an enclosing <div> called navcontainer, and the <ul> has an id of navlist. To duplicate this effect in Joomla, you need to have some sort of enclosing <div>. You can achieve this by using module suffixes. Recall that the output of a module with style="xhtml" is as follows:

<div class="moduletable">
  <h3>...Module_Title...</h3>
  ...Module_Content...
</div>

If you add a module suffix called menu, it will get added to the moduletable class, like this:

<div class="moduletablemenu">
  <h3>...Module_Title...</h3>
  ...Module_Content...
</div>

So when choosing a menu from the Listamatic, you would need to replace the navcontainer class style in the CSS with moduletablemenu.

This use of a module class suffix is useful. It allows different-colored boxes with just a simple change of the module class suffix.

For your site, say that you want to use List 10 by Mark Newhouse (see www.css.maxdesign.com.au/listamatic/vertical10.htm). Your CSS will look like this:

.moduletablemenu{
   padding:0;
   color: #333;
   margin-bottom:1em;
   }
.moduletablemenu h3 {
   background:#666;
   color:#fff;
   padding:0.25em 0;
   text-align:center;
   font-size:1.1em;
   margin:0;
   border-bottom:1px solid #fff;
   }
.moduletablemenu ul{
   list-style: none;
   margin: 0;
   padding: 0;
   }
.moduletablemenu li{
   border-bottom: 1px solid #ccc;
   margin: 0;
   }
.moduletablemenu li a{
   display: block;
   padding: 3px 5px 3px 0.5em;
   border-left: 10px solid #333;
   border-right: 10px solid #9D9D9D;
   background-color:#666;
   color: #fff;
   text-decoration: none;
   }
html>body .moduletablemenu li a {
   width: auto;
   }
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited{
   border-left: 10px solid #1c64d1;
   border-right: 10px solid #5ba3e0;
   background-color: #2586d7;
   color: #fff;
   }

You then need to add the module suffix menu (no underscore in this case) to any modules for menus you want styled using this set of CSS rules. This will produce a menu like what's shown in Figure 9.7.

Hiding Columns

So far, you have a layout such that you always have three columns, regardless of whether there is any content positioned in those columns. From the perspective of a CMS template, this is not very useful. In a static site, the content would never change, but you want to give your site administrators the ability to put it, without having to worry about editing CSS layouts. You want to be able to turn off a column automatically or collapse it if there is no content to display there.

Joomla 1.5 provides an easy way to count the number of modules generating content for a particular position so that you can add some PHP testing of these counts and hide any empty columns or similar unused <div> containers and adjust the layout accordingly. This PHP if test syntax for modules is as follows:

<?php if($this->countModules('condition')) : ?>
   do something
<?php else : ?>
   do something else
<?php endif; ?>

There are four possible conditions. For example, let's count the number of modules in Figure 9.7. You could insert this code somewhere in index.php:

left=<?php echo $this->countModules('left');?><br />
left and right=<?php echo $this->countModules('left and right');?><br />
left or right=<?php echo $this->countModules('left or right');?><br />
left + right=<?php echo $this->countModules('left + right');?>

So if we inserted this code into our template, we might get the following results with the sample Joomla content:

• countModules('left')—This returns 4 because there are four modules on the left.
• countModules('left and right')—This returns 1 because there is a module in the left and right positions. (Both tests are true (> 0), so the and test true and true is a logical true.)
• countModules('left or right')—This returns 1 because there is a module in the left or right position. (Both tests are true (> 0), so the or test true or true is a logical true.)
• countModules('left + right')—This returns 7 because it adds together the modules in the left and right positions.

In this situation, you need to use the function that allows you to count the modules present in a specific location (for example, the right column). If there is no content published in the right column, you can adjust the column sizes to fill that space.

There are several ways to do this. You could put the conditional statement in the body to not show the content and then have a different style for the content, based on what columns are there. To make it as easy as possible, you can use a series of conditional statements in the head tag that (re)define some CSS styles:

<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

The result is to set a PHP variable called contentwidth with a number you can use later:

• If there is nothing in left or right, display the center column at 100%.
• If there is something in left or right, display the center column at 80%.
• If there is something in left and something in right, display the center column at 60%.

In all three cases, the side column(s) can be styled the same, at 20% width.

You then need to change the index.php file in the content div to this:

<div id="content<?php echo $contentwidth; ?>">

Then you change template.css to this:

#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}

The PHP conditional statements in the head must appear after the line that links to the template.css file. This is because if there are two identical CSS style rules, the one that is last will overwrite all the others.

You can also accomplish this by having the if statement import a sub-CSS file.

You are halfway there, but now you have expanded the width of the center column to accommodate any empty (soon to be hidden) side columns.

Hiding Module Code

When creating collapsible columns, it is good practice to set up the modules not to be generated if there is no content there. If you don't do this, the pages will have empty <div>s in them, which can lead to cross-browser issues.

To not generate an empty <div>, you use the following if statement:

<?php if($this->countModules('left')) : ?>
<div id="sidebar">
  <div class="inside">
    <jdoc:include type="modules" name="left" style="xhtml" />
  </div>
</div>
<?php endif; ?>

When you use this code, if there is nothing published in position left, then <div id="sidebar">; also, everything within it will not be included in the generated page.

Using these techniques for the left and right columns, your index.php file now looks as follows:

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />

<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>

</head>

<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><!--end of header-->

  <?php if($this->countModules('left')) : ?>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div><!--end of sidebar-->
  <?php endif; ?>

  <div id="content<?php echo $contentwidth; ?>">
    <div class="inside">
      <jdoc:include type="modules" name="breadcrumbs" style="none" />
      <jdoc:include type="component" />
    </div>
  </div><!--end of content-->

<?php if($this->countModules('right')) : ?>
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
  </div><!--end of sidebar-2-->
  <?php endif; ?>
  <?php if($this->countModules('footer')) : ?>
  <div id="footer">
    <div class="inside">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div>
  </div><!--end of footer-->
  <?php endif; ?>
</div><!--end of wrap-->
</body>
</html>

I recommend a slightly different way of producing the footer. In the example shown here, it is hard-coded into the index.php file, which makes it difficult to change. Right now, the "footer" module in the administrative backend shows the Joomla copyright and can't be edited easily. It would make much more sense to have a custom HTML or XHTML module placed in a position called bottom so the site administrator could more easily change it. If you wanted to create your own footer, you would simply unpublish that module and create a custom HTML module with whatever language you wanted.

In this case, you replace this:

<jdoc:include type="modules" name="footer" style="xhtml" />

with this:

<jdoc:include type="modules" name="bottom" style="xhtml" />

You must also remember to add this position to the templateDetails.xml file.

The basic template created in this section shows some of the fundamental principles of creating a Joomla template.

Now that you have the basics done, you can create a slightly more attractive template, using the techniques you have learned.