Home > Articles > Web Development > Content Management Systems

  • Print
  • + Share This
This chapter is from the book

Using CSS to Create a Tableless Layout

We will be using pure CSS to make a 3-column layout for the Joomla template. We will also be making it a fluid layout. There are two main types of web page layout—fixed and fluid—and they both refer to how the width of the page is controlled.

The width of the page is an issue because of the many browser resolutions at which people surf the Web. Although the percentage is dropping, about 17% of surfers are using an 800x600 resolution. The majority, 79%, are using 1024x768 and higher2. Making a fluid layout means that your valuable web page won't be a narrow column in the 1024 resolution and will be visible in full on smaller monitors.

A typical design might use tables to lay out the page. They are useful in that you just have to set the width of the columns as percentages, but they 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 something called "spacer gifs."

Even big companies sometimes fall into the table trap, as seen by a recent controversy about the new disney.co.uk website3:

There are a couple of major problems with a site that uses tables for layout.

  • They are difficult to maintain. To change something you have to figure out what all the table tags like td/tr 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 will 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 3-column layout) before they get to the middle column, the important stuff. 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 using CSS. For a quick introduction, a good source is Brainjar's CSS Positioning.4

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

We will be using float to position our content. At its most basic, the template might look like Figure 9.4.

Figure 9.4

Figure 9.4 Basic template layout

Still not very exciting, but let's see what the different parts are all about.

In Figure 9.4, the left, middle, and right columns are each given their own element. Each is floated left and given a percent 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 we build our second template in this chapter, we will have to use a more advanced clearing technique.

To improve the layout and to add some breathing room to the content, we need to add some column spacing, commonly called "gutter." Unfortunately, there is a problem here. You might know that Internet Explorer does not interpret CSS correctly. One problem is that it calculates width differently. We can solve this problem by not using any padding or borders on something that has a width. To get our gutter, we add another <div> element inside the columns.

To the CSS we add

.inside {padding:10px;}

Our resulting <body> code for index.php is:

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
        <?php echo $mainframe->getCfg('sitename');?>
      <jdoc:include type="modules" name="top" />
    </div>
  </div>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" />
    </div>
  </div>
  <div id="content">
    <div class="inside">
      <jdoc:include type="component" />
    </div>
  </div>
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" />
    </div>
  </div>
  <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>
</div>
<!--end of wrap-->
</body>

Our template.css file looks like this:

/*Compass Design layout.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. However, it is not source-ordered. For that we must use a more advanced layout known as a nested float.

Source-ordered layouts perform better for SEO than ones where the important content occurs late in the code. From a Joomla site perspective, the important content is that which is coming from the component.

Default CSS

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

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

We have centered the page by using a small hack. This has to be done because Internet Explorer does not read CSS accurately. With a standards-compliant browser, we could just say margin:0 10%; to center the page, but IE does not recognize that, so we center the "text" of the whole page and then align it left in the columns.

In celebration of IE7's support of min/max width (which IE6 does not), we can add in a minimum and maximum width. Note we have to add a tiny hack for IE6 as it does not understand these. It will ignore the !important statement and have a plain, old 960px width.

We have also added a new style to the columns: overflow:hidden. This will make the page "break" more consistent as we reduce its width.

At the beginning of the typography, with CSS we will set some overall styles and have what is known as 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;
}

Everything is given a zero margin and padding, and then all block level elements are given a bottom margin. This helps achieve browser consistency. You can read more about the global reset at clagnut5 and left-justified.6

The font size is set to 76%. The reason for this is to try and get more consistent font sizes across browsers. All font sizes are then set in em. Having line-height:1.3 helps readability. This means that the pages will be more accessible because the viewer will be able to resize the fonts to their own preferences. This is discussed more at "An experiment in typography" at The Noodle Incident (Owen Briggs).7

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

Figure 9.5

Figure 9.5 Basic template with typography

Notice that the side columns do not reach their footer. This is because they only extend as far as their content; where the space is white on the left and on the right, they don't exist.

If we have a template that has a white background for all three columns, this is no problem. We will use this approach and will have boxes around the modules. If we want equal height columns that are colored or have boxes, we have to use a background image that will tile vertically. This technique is called Faux Columns and is described by Douglas Bowman8 and Eric Meyer.9

Joomla-Specific CSS

Although Joomla 1.5 has the functionality to override the core output in a template, its default rendering still uses significant tables to output content in the main body. Along with these tables, CSS output is available for a designer to style pages. Based on some research by various community members, Table 9.2 shows the current list. Note, it does not include generic web page styles like H1, H2, p, ul, a, form, and so on.

Table 9.2. Legacy Default CSS Styles from 1.0 in 1.5

article_separator

adminform

article_separator

author

bannerfooter

bannergroup

bannerheader

banneritem

blog

blog_more

blogsection

breadcrumbs

button

buttonheading

clr

componentheading

content_email

content_rating

content_vote

contentdescription

contentheading

contentpagetitle

contentpane

contentpaneopen

contenttoc

createdate

created-date

date

input

inputbox

intro

latestnews

loclink

mainlevel

message

metadata

modifydate

module

moduletable

mosimage

mosimage_caption

mostread

newsfeed

outline

pagenav

pagenav_next

pagenav_prev

pagenavbar

pagenavcounter

pathway

pollstableborder

read

search

searchintro

sections

sectiontable_footer

sectiontableentry

sectiontablefooter

sectiontableheader

small

smalldark

sublevel

title

wrapper

Many designs you might see in Table 9.2 actually have given CSS styles that are more specific in their definitions. Basically, a more specific rule overrides a less specific rule.

For example

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

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

The color on a link and the color of the .contentheading will be red, as that rule is more specific (as .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 a module. table.moduletable will only apply the style to a table with class="moduletable" on it.

.moduletable will apply the style regardless of what element the class is on.

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; its often easier to start by using the most general style possible and then getting more specific if the results are not what you expect.

Here are some links to websites that discuss specificity in detail:

At the moment, our template is using several tables. As mentioned earlier, this slows the pages down and makes them harder to update. To reduce the number of tables, when we call the modules, we need to use style parameters in the jdoc:include.

Modules in Templates

When a module is called in the index.php, it has several options on how it is displayed.

The syntax is

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

The style is optional and is defined in templates/system/html/modules.php. Currently, the default modules.php file contains the following layouts.

OPTION="table" (default display) modules are displayed in a column. The following shows an example of the output:

 <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 horizontal. Each module is output in the cell of a wrapper table. The following shows an example of the output:

 <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 a simple div element. The following shows an example of the output:

  <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 this $style is used, the name of the <div> changes from moduletable to module. The following shows an example of the output:

  <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 ((x)html and rounded) are much leaner in code, which makes it easier to style the web pages. I don't recommend using suffixes of table (default) or horz unless absolutely needed.

Here's the really good bit!

If you examine the modules.php file, you will see all the options that exist for modules. It's easy to add your own; this is part of the new templating power that is in 1.5. We look at this in more detail in our section on template overrides.

To develop our template, we will put a module style of "xhtml" on all of our modules:

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

Note that we cannot put these module styles on the <jdoc:include type="component" /> because it is not a module.

We have also placed the site title inside an <H1> tag. It's more semantically correct and will also help in SEO. Let's also remove the background from the layout divs.

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

Our CSS now looks like this:

/*Compass Design typography CSS*/

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

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

Figure 9.6

Figure 9.6 Basic template with module title styling

Menus in Templates

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

Again, using CSS lists rather than tables results in reduced code and easier markup. After setting all our menus to lists we have only 12 tables (we see how to remove the rest using the new version 1.5 override feature). Remember, the list setting is the new 1.5 version; flat list is from 1.0 and will be depreciated. 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 example 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.com10 has a selection of over 30 menus, all using the same underlying code. It's called the Listamatic. There is a slight difference in the code that we need to change in order to adapt these menus to Joomla.

These lists use the following code:

<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 xhref="#">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, we need to have some sort of enclosing <div>.

We can achieve this by using module suffixes. If you recall, the output of an (X)HTML style option module is

<div class="moduletable">
  <h3>modChrome_xhtml</h3>
  modChrome_xhtml </div>

If we add a module suffix, that will get added to the moduletable class, like this:

<div class="moduletablesuffix">
  <h3>modChrome_xhtml</h3>
  modChrome_xhtml </div>

So when picking a menu from Listamatic, you need to replace the navcontainer class style in the CSS by moduletablesuffix.

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

For our site, we use List 10 by Mark Newhouse.11 Our CSS is

.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;
}

We then need to add the module suffix of menu (no underscore in this case) to any modules of menus we want to be styled. This produces a menu like what's shown in Figure 9.7.

Figure 9.7

Figure 9.7 Basic template with menu styling

For any menu we want to be styled this way, we have to add "menu" as a module suffix.

The CSS is embedded instead of linked to make editing easier.

Hiding Columns

So far, we have our layout such that we always have three columns, regardless of whether there is any content included. From the perspective of a CMS template, this is not very useful. In a static site the content would never change, but we want to give our site administrators the ability to put their content anywhere they want to without having to worry about editing CSS layouts. We want to be able to "turn off" a column automatically or "collapse" it if there is no content there.

During the development of the Joomla 1.5 templating engine, there were a number of changes and improvements. Quoting directly from the Joomla development blog12:

  • The changes to the template system in Joomla 1.5 can be divided into two categories. First, there are changes to the way things where done in Joomla 1.0—for example the new way modules are loaded, and second there are also a bunch of extra features, like template parameters...a quick overview:
  • Changes to the old ways
  • mosCountMoules
  • The mosCountModules function has been replaced by the $this->countModules function and support for conditions has been added. This allows designers to easily count the total number of modules in multiple template positions in just one line of code, for example $this->countModules('user1 + user2 ); which will return the total number of modules in position user1 and user2.

So the general use of mosCountModules would be

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

There are four possible conditions. As an example, let's count the number of modules in Figure 9.7. We could insert this code somewhere in the 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');?>
  • countModules('left'). Will return 4; there are 4 modules on the left.
  • countModules('left and right'). Will return 1; there is a module in the left and right-hand position.
  • countModules('left or right'). Will return 1; there is a module in the left or the right-hand position.
  • countModules('left + right'). Will return 7; counting the modules in the left and right-hand positions.

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

There are several ways to do this. We 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 were there. To make it as easy as possible, I have 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";
?>

So we count:

  • If there is nothing in left OR right, we are 100%.
  • If there is something in left OR right, we are 80%.
  • If there is something in left AND something in right, we are 60%.

We then need to change the index.php file in the content div to

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

Change the layout css to

#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.

This can also be done in a similar fashion by having the if statement import a sub CSS file.

So we are half-way there, but now we have empty div containers where the columns are.

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 this is not done, the pages will have empty <div>s in them, which can lead to cross browser issues.

To hide the empty <div>, the following if statement is used:

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

Using this code, if there is nothing published in the left, then <div id="sidebar"> will not be outputted.

Using these techniques for our left and right columns, our index.php file now looks like the following code. We will also add an "include for the breadcrumbs module," the module that shows the current page and pathway. Note that this now needs to be included in the index.php file and also published as a module.

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

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

I would recommend a slightly different way of producing the footer. In the manner shown here, it is hard coded into the index.php file, which makes it hard to change. Right now, the "footer" module in the administrative backend shows the Joomla copyright and can't be easily edited. It makes much more sense to have a custom (X)HTML module placed in the footer location so the site administrator can change it more easily. 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 we would replace

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

with

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

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

This basic template shows some of the fundamental principles of creating a Joomla template.

CSSTemplateTutorialStep2

We now have a basic, but functional template. Some simple typography has been added, but more importantly, we have created a pure CSS layout that has dynamic collapsible columns. I have created an installable template that is available from www.joomlabook.com: CSSTemplateTutorialStep2.zip.

Now that we have the basics finished, let's create a slightly more attractive template using the techniques we 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