The main areas of a BB2 page

A BB2 page is made up of a number of "containers", laid in layers one on top of another.

Have you ever got confused trying to change the background color of your page?  

Once you understand how these layers work, changing the background colors is much easier.

Before you read any further, just watch this 30 second silent animation showing you the layers in motion.  

Later in the series we'll show you how to alter the backgrounds of the various layers, and how you can design your own template in BB2.


Understanding layers

When you look at a web page on your PC, it looks flat, as though everything has been drawn onto one single flat sheet of paper. We're so used to using pen and paper since an early age, that this is the first mental model that occurs to us.

In reality, the html code underlying the page draws a number of distinct containers, each holding text and images.

These container boxes act as though they are in 3 main layers, piled one on top of another.

Like this.

Here we've taken a flat screen Dell monitor and placed it on its back on the floor. Then we've drawn representations of each layer onto the monitor.

Then we've put a Starbucks Grande coffee cup onto the floor on the left hand side of the monitor.  That's so you can easily get your bearings, never mind which angle we use to show you the picture!

If you change your viewpoint so that you are directly overhead, then you get a Plan View, like this.

If you move in the other direction, so that you are viewing the page at a flat angle from the front, this is what you see.



The concept of layers

The simplest way to visualize these layers is to compare them to a series of see-through plastic sheets that are used with Overhead Projectors (OHP's).

OHP's are not that common anymore, but once upon a time they could be found in nearly every classroom.

The presenter draws onto a clear plastic transparent sheet and places it onto the flat surface of the OHP.

The bright light underneath shines up through the transparency, and projects the image onto the screen via the mirror.

If more than one transparent sheet is placed onto the OHP, then a single picture is projected onto the screen combining the images from all the layers.

And if the presenter draws a large black box on the top sheet, then everything under that box is hidden from view on the screen.

A very similar process occurs with your web page.

  • Multiple layers are piled on top of each other.  
  • What you see on the screen depends on the order and transparency of each layer.
  • Things on a higher layer block out things on the lower layers.



So, what are the layers on a BB2 page?

There are 3 main layers.

  • The bottom layer is called the Body, and colored gray in our drawing
  • The middle layer is called the PageWrapper, and colored green.
  • The third layer doesn't have a name. But for now, we'll call it the Content Layer.  Whenever you type any words, or add an image to the page, that content lives inside one of the blocks on this layer.  

They look like this.



Individual layers in more detail

Let's look at these one by one.

  • The bottom layer is called the Body.  Think of this as the background for everything on your monitor.

    In our drawing, it is colored gray, and stretches from the far left wall of your browser window to the far right wall.

    With your browser window maximized, the width of the body is whatever the width is between the 2 sides of the monitor.  This could be 1366 pixels for a regular laptop, up to 1600 pixels wide for a high end monitor. Or as low as 480 pixels wide for an i-Phone 3GS.

    If you ever decide you want a picture as the background to your website, (e.g, trees and a blue sky), then that image will be displayed as the background to this layer.  


  • The middle layer is called the Page Wrapper, and it's basically the background to your website.  It's what you commonly think of as the "footprint" of your web site.  

    So, if your web site is designed to be 960 pixels wide, your Page Wrapper is set to be 960 pixels wide.

  • The top layer, the one we called the Content Layer, is actually 5 separate sub-layers.  They are called
    - the Header   
    - the ContentColumn   
    - the NavColumn
    - the ExtraColumn and   
    - the Footer.

  • Recognize them?  They have been specially designed not to overlap each other.  This means they act as though they are all on the same layer.


What decides how big these containers become?

  • The Header is usually set to the fixed height of your Header image.
  • The NavColumn, ContentColumn and ExtraColumn and Footer are usually each only as long as the typed content they contain.  
  • The PageWrapper is designed to be fluid in length, and wraps around all your content. It expands and contracts automatically to match the longest length of your Content.
  • The size of the Body is the size of your browser window, side to side and top to bottom.

Understanding which layer contains your content is the key to being able to alter your template design.