Home > Articles > Web Development > HTML/CSS

  • 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 "fixed" 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.

A few years ago, fluid width templates were all the rage. Accessibility guys loved them, and it was cool to grab the corner of your browser window and see all that content slide around.

But now, I don't make fluid templates, but focus on fixed width templates. I firmly believe they are the best fit on today's Web. Four years ago, many people were still using 800px width screens. The main point of a fluid width was that you could have a web page that looked okay in a 1024px screen, but still could shrink down to the smaller screens still used.

Now, the trend in screens is the opposite. People are getting huge screens; 32% of people browsing Joomlashack.com are doing so with resolutions over 1440px!

With these big screens and a fluid width layout, you get a new problem—readability. Studies have shown that readability onscreen drops off as you go over 960px. So a fluid width will fill that big screen and a) look daft and b) slow down your reading.

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 a lot 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.

When it comes to CSS layouts, there has been a trend toward what have been coined frameworks. The idea is that a consistent set of CSS is used to create the layout, and then that set is maintained for various issues like browser compatibility. For this template we are going to adopt the 960 grid system developed by Nathan Smith (http://960.gs/). 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.

In Figure 9.4, each column—left, middle, and right—is given its own element and grid size. With the 960 grid system, you merely have to specify with a class how big you want the grid to be. In this example, I am using a 12-column grid, so for the header to run across the full width of 960px, in the index.php use:

<div id="header" class="container_12">.

For our three columns, we add grids inside a container like this:

<div id="content" class="container_12">
  <div id="" class="grid_3 ">
    <jdoc:include type="modules" name="left" />
  </div>
  <div id="" class="grid_6">
    <jdoc:include type="modules" name="breadcrumbs" />
    <jdoc:include type="component" />
  </div>
  <div id="" class="grid_3">
    <jdoc:include type="modules" name="right" />
  </div>
</div>

Notice that there is already some breathing room to the content with a 10px column spacing, commonly called gutter. This is all automatically done by the clever 960 CSS grid framework, and all browser issues (yes, we mean you, Internet Explorer) are dealt with.

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

<body>
<div id="header" class="container_12">
  <?php echo $app->getCfg('sitename');?><br />
  <jdoc:include type="modules" name="top" />
</div>
<div id="content" class="container_12">
  <div id="sidebar" class="grid_3 ">
    <jdoc:include type="modules" name="left" />
  </div>
  <div id="maincolumn" class="grid_6">
    <jdoc:include type="modules" name="breadcrumbs" />
    <jdoc:include type="component" />
  </div>
  <div id="sidebar-2" class="grid_3">
    <jdoc:include type="modules" name="right" />
  </div>
</div>
<div id="footer" class="container_12">
  <jdoc:include type="modules" name="footer" />
</div>
<jdoc:include type="modules" name="debug" />
</body>

In this example, I renamed the CSS file to layout.css. With the 960 grid framework, we will rarely need to touch this file and can compress it as much as possible. The critical parts of the layout.css file look like this:

.container_12 {
margin-left:auto;
margin-right:auto;
width:960px;
}
.alpha {
margin-left:0 !important;
}
.omega {
margin-right:0 !important;
}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9, .grid_10,.grid_11,.grid_12,.grid_12 {
display:inline;
float:left;
position:relative;
margin-left:10px;
margin-right:10px;
}
.container_12 .grid_1 {
width:60px;
}
.container_12 .grid_2 {
width:140px;
}
.container_12 .grid_3 {
width:220px;
}
.container_12 .grid_4 {
width:300px;
}
.container_12 .grid_5 {
width:380px;
}
.container_12 .grid_6 {
width:460px;
}
.container_12 .grid_7 {
width:540px;
}
.container_12 .grid_8 {
width:620px;
}
.container_12 .grid_9 {
width:700px;
}
.container_12 .grid_10 {
width:780px;
}
.container_12 .grid_11 {
width:860px;
}
.container_12 .grid_12 {
width:940px;
}

Quite simply, everything is floated left, and the various grid sizes are set based on their desired width. It's a 12-column grid, so, for example grid_6 means six columns, which would be 460px—the full width minus the padding. 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.

However, this simple layout is ordered in the code in the sequence in which you see content on the screen. It is 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.

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. Many commercial templates, for example, Joomlashack's, develop this source-ordered concept further.

Default CSS

So far, all the CSS has been only about layout, which makes a plain page. So let's add some formatting, placing the CSS in a new file called typography.css. Remember to add it to the index.php file!

As you begin working on typography with CSS, you should set some overall styles and include a simple 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 some technique to give the columns an equal height. One common solution is to use a JavaScript script to calculate and set the heights on the fly.

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 if 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 if 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 if we use the "xhtml" option:

<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
        <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 if 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.6.

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

<body>
<div id="header" class="container_12">
  <?php echo $app->getCfg('sitename');?><br />
  <jdoc:include type="modules" name="top" style="xhtml" />
</div>
<div class="clear"></div>
<div id="content" class="container_12">
  <div id="sidebar" class="grid_3 ">
    <jdoc:include type="modules" name="left"style="xhtml"  />
  </div>
  <div id="maincolumn" class="grid_6">
    <jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
    <jdoc:include type="component" />
  </div>
  <div id="sidebar-2" class="grid_3">
    <jdoc:include type="modules" name="right" style="xhtml" />
  </div>
</div>
<div class="clear"></div>
<div id="footer" class="container_12">
  <jdoc:include type="modules" name="footer" style="xhtml" />
</div>
<jdoc:include type="modules" name="debug" />
</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.

We add the following to the typography. Your CSS file should now look like this:

#header{
   font-size:2em;
   }
#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*/
ul.actions li{
float:right;
list-style:none;
border:0;}
ul.actions li a img{
border:0;}

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.

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 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 looks 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 produces 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 content in any column, 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.6 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 3 because there are three 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).
  • countModules('left or right')This returns 1 because there is a module in the left or right position. Both tests are true (> 0).
  • countModules('left + right')This returns 4 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. We are going to take advantage of the grid system and simply pass the sizes of the grid based on some calculations.

In the header, let's define a couple of variables to make sure they have some default value.

$leftcolgrid    = "3";
$rightcolgrid    = "3";

In the HTML of the template, we can then use these variables to set the grid class:

<div id="content" class="container_12">
  <div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
    <jdoc:include type="modules" name="left"style="xhtml"  />
  </div>
  <div id="maincolumn" class="grid_<?php echo (12-$leftcolgrid-$rightcolgrid);?>">
    <jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
    <jdoc:include type="component" />
  </div>
  <div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>">
    <jdoc:include type="modules" name="right" style="xhtml" />
  </div>
</div>

You'll notice we are echoing out the colgrid values and then doing a simple calculation to find the main column, as we know they must total 12.

We then can use the countModules function to find some value. In our head we insert:

<?php
if ($this->countModules('left') == 0):?>
<?php $leftcolgrid = "0";?>
<?php endif; ?>
<?php
if ($this->countModules('right') == 0):?>
<?php $rightcolgrid = "0";?>
<?php endif; ?>

Note that we are checking to see whether the left and right positions have zero modules as we have already set the default grid size to 3. We could have also have done this check with a true/false check rather than a numerical value (zero).

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" class="grid_<?php echo $leftcolgrid;?>">
    <jdoc:include type="modules" name="left"style="xhtml"  />
  </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
/**
 * @copyright    Copyright (C) 2005 - 2010 Barrie North.
 * @license      GPL
 */
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$leftcolgrid    = "3";
$rightcolgrid   = "3";
?>
<!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="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/layout.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/typography.css" type="text/css" />
<?php
if ($this->countModules('left') == 0):?>
<?php $leftcolgrid      = "0";?>
<?php endif; ?>
<?php
if ($this->countModules('right') == 0):?>
<?php $rightcolgrid     = "0";?>
<?php endif; ?>
</head>
<body>
<div id="header" class="container_12">
  <?php echo $app->getCfg('sitename');?><br />
  <jdoc:include type="modules" name="top" style="xhtml" />
</div>
<div class="clear"></div>
<div id="content" class="container_12">
<?php if($this->countModules('left')) : ?>
  <div id="sidebar" class="grid_<?php echo $leftcolgrid;?>">
    <jdoc:include type="modules" name="left"style="xhtml"  />
  </div>
  <?php endif; ?>
  <div id="maincolumn" class="grid_<?php echo (12-$leftcolgrid-$rightcolgrid);?>">
    <jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
    <jdoc:include type="component" />
  </div>
  <?php if($this->countModules('right')) : ?>
  <div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>">
    <jdoc:include type="modules" name="right" style="xhtml" />
  </div>
  <?php endif; ?>
</div>
<div class="clear"></div>
<div id="footer" class="container_12">
  <jdoc:include type="modules" name="footer" style="xhtml" />
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>

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