New CommonSpot Templates

Share

Overview

Starting Monday, 25 October, we changed the base template that all CommonSpot pages are built from.  The biggest aspect of this change is that all new pages will no longer use a table as the layout framework.  Instead the pages are using CSS to determine the display.  This will give us all much more flexibility and control over the appearance of our pages.

This change will not require any changes to any current pages or templates or any pages you make from current templates.  The only problem that should occur when you are making pages is that now when you specify a width for the left column, any images that are wider than column will be truncated, like this:

Layout

The basic layout of the page is divided into divs, most of which have ids that you can use in styling your pages.  This is a rundown of the divs.  In each image, the div under consideration has been given a red border to show its location.

1. #contentArea

This is the div in which all the other page content that you control goes into.

2.  #topRow

This is the area that the header images usually go into.

3. #barDiv

This contains the two bars after the header image.

4. #printerFriendly

This contains the printer friendly link

5. #bottomRow

This contains everything else above the footer.  No content goes directly into this div, but into the one or two child divs that it contains.  It will always contain at least one div within it (#bottomRight, more on it in a minute).  If the Full Body option isn’t checked in the Custom Metadata, will also contain a #bottomLeft  div as well.

6.  #bottomLeft

This div has the width that is specified in the left column specification in the Custom Metadata.

7. #bottomRight

This div has a width of 770 – the width of the left column.

An interactive demo of these divs can be seen at http://www.ecu.edu/cs-training/hallwa/Template-Demo.cfm.  When you mouse over each of the three main divs, you will see the background change and the id of the div will appear at the top.

One thought on “New CommonSpot Templates

  1. Pingback: Tech Tips » CommonSpot Templates

Leave a Reply