Home > Articles > Web Development > Content Management Systems

  • Print
  • + Share This
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:

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.

Figure 9.4

Figure 9.4 Basic template layout.

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.

Figure 9.5

Figure 9.5 A basic template with typography.

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:

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.

Figure 9.6

Figure 9.6 A basic template with module and title styling.

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.

Figure 9.7

Figure 9.7 A basic template with menu styling.

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.

  • + Share This
  • 🔖 Save To Your Account

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020