Contents
Cal Poly Pomona

All-CSS versions of CPP pages

Version 4.2, 2008-06-24

Templates are now available in this original narrow version (750 px) and the new extra-crispy wide version (1000 px).

These pages are designed to match the look and feel of the main Cal Poly Pomona pages, for use by other parts of the university. The links below are to example pages, and to the current Cal Poly Pomona pages that they emulate.

All the files are available in a zip archive, which also includes the images and stylesheets all properly linked to be placed at the top level of your site.

Instructions for Use

A detailed tutorial is available in ehelp.

These templates will appear somewhat different in Dreamweaver CS3 or Dreamweaver 8 than they do in a browser. They will appear very different in Dreamweaver MX 2004, and may not be usable in previous versions. Don't try to fix the appearance in Dreamweaver until you have seen the same problem in a browser.

The templates use no layout tables or <font> tags, and are designed to be used with little additional markup. The <h1> tag is used for the page heading above and for the column heading at right (the gold letters above are the result of applying the CSS class .goldletter). The <h2> tag provides the gray-background subheads, and the <h3> tag is below:

Lists

Lists are used for navigation in the top horizontal menu, the left and right navigation, and the footer navigation. In all cases, the bullets are eliminated and margins are adjusted, and in the horizontal navigation at top and bottom, the list items are set to display in-line. List navigation is much more accessible to disabled users that simple columns of text—some screen readers will tell the user how many items are in the list.

In the central column, bullets are retained, but if you would like the list style of the CPP home pages, you may change the stylesheet content_area.css to activate those styles and deactivate the current styles (using comment strings).

Please note...

The Dreamweaver "indent" button doesn't really indent, but rather creates a <blockquote>, which usually appears indented in a graphical browser. The style sheets define an appearance for <blockquote> that is different from paragraph text, so this misuse of the "indent" button will have a different effect. Also, the <font> tag is deprecated, and chrome.css redefines it to remind you of that.

Editable regions

Each template has a page_heading region in addition to the content region. Because the editable part is inside the <h1> tag, Dreamweaver will give a warning when you save a template. You can ignore it.

In addition, the templates with navigation columns have editable regions there as well, to allow you to turn off each page's link to itself. If an editable region will remain unchanged in your implementation, you can remove it.

Remember that you can change non-editable regions in the template, especially the footer, which currently has the links of the CPP home pages.

Style Sheets

Each template links separate screen and print stylesheets. The screen stylesheet "imports" several additional stylesheets (by importing rather than linking, Netscape 4 gets unstyled content, rather than messing up the page with its broken style implementation).

The imported stylesheets

The eight page types each have a separate linked stylesheet (the second in each case is for the version with a top horizontal menu):

  • imports_fw.css
  • imports_fwtm.css
  • imports_narrow.css
  • imports_narrowtm.css
  • imports_wc.css
  • imports_wctm.css
  • imports_wr.css
  • imports_wrtm.css

Each imports a stylesheet with its specific layout:

  • fullwidth.css
  • narrow.css
  • wide_content.css
  • wide_right.css

Each also imports these stylesheets. Two are used in every page type:

  • chrome.css
  • colors.css
  • content_area.css

The styles that have left columns use leftnav.css, and the styles that have right columns use searchcolumn.css. Finally, one of two style sheets is used depending on whether or not there is a top horizontal menu:

  • topmenu_full.css
  • topmenu_stub.css

There is also a print stylesheet, print.css. It makes the navigation areas invisible and sets the width of the contents to auto, so that they will print without being cut off.

Testing

These pages have been tested in a number of modern browsers, and work acceptably in all (Netscape 4 gets unstyled content, older versions of Opera have some formatting problems, IE 4 is ugly but usable, and IE 5 for Macintosh has some minor problems)). If you have problems with a specific browser, please contact webteam@csupomona.edu.

It is important to make sure that you don't put a too-wide item (such as an image) into a column. These pages will break in a different way than layout-table pages when the width is forced to increase.

Version history

Version 4.2

  1. The templates are separated into two sets, one that creates the original 750 px wide pages, and one that creates 1000 px wide pages, which better uses modern screen resolutions. The templates are separated, since we do not expect any single site to use both widths, but they differ only in five .css files: fullwidth.css, narrow.css, topmenu_full.css, wide_content.css, wide_right.css, and width.css. By changing these files, a Version 4.2 site can be changed from 750 px to 1000 px, or vice-versa.
  2. The horizontal navigation has been completely reworked. The tabs show a better mouseover/select state, with a graphic background, and the entire navigation expands gracefully when the font size is enlarged. Each item in the navigation must be enclosed in an empty <span>, e.g. <span>Home</span>, regardless of whether it is an active link or not, but that is the only necessary change to the markup.

Version 4.1

Most of these changes are to aid template implementers in proper use of the templates. None of them change functionality of the templates.

  1. Add styling to unmodified banner replacement text to remind template implementers to change it and the title text.
  2. Change default title text to make it more embarrassing to template implementers who don't change it, and to point out preferred use of vertical pipe (|) instead of less-than (<) as title delimiter (works better for screen readers).
  3. Comment out footer menu so that template implementers won't leave the default, which is not intended to be a finished product.
  4. Class "goldletter" changed from #E1B122 to #C6930A to provide adequate contrast.

Version 4.0

  1. Convert to XHTML 1.0 Transitional.
  2. Move all colors into a separate stylesheet, to provide hooks for easy customization.
  3. Changes to the print stylesheet to make the footer area more harmonious.
  4. Unfocused Contents link is now black-on-black rather than off-screen to deal with rumored screen reader limitations.
  5. Addition of a level of indentation to the right navigation. As with the main navigation, use with care; the presence of this style is not a license to make your navigation horribly complex.
  6. Some graphic file names changed for consistency.

Version 3.5

  1. Addition of BroncoDirect icon at the top of the "away" links. You can simply delete it if you don't need it. (The "away" navigation <table> was set to cellspacing="0" to deal with a Firefox border-collapse bug.)
  2. Change of left navigation background from background-color to background-image. This fixes the visual problem of page content being shorter than the left column, and incorporates the 1px right border that was present on the original non-CSS Cal Poly Pomona home page.
  3. Addition of text for banner link: normally invisible, this text is displayed by Netscape 4 and browsers that ignore CSS. (Remember to change it along with the alt for the accompanying transparent image.)
  4. Addition of <div> for watermark at the bottom of the left column. Watermark images should be created with care: On short pages, they can end up behind the away links, so they need to be low contrast. An example watermark is commented out in #lwatermark in wide_right.css and narrow.css.
  5. Addition of <h2> styling for the "away" links, for a few specific cases where a non-linked header was needed.
  6. Addition of a level of indentation to the main navigation. Use with care; the presence of this style is not a license to make your navigation horribly complex.
  7. Addition of <h3> to the right navigation.
  8. Addition of <h4> to the content area.
  9. Change of <h2> red to Cal Poly Pomona maroon, a:hover red to Cal Poly Pomona red.

Version 3

  1. Conversion of "away" navigation to a table (we hated to do it, but it was the best way to deal with wrapping entries).
  2. Incorporation of "away" icons into HTML instead of stylesheet, making them much easier to create and maintain.
  3. Conversion of footer to semantic paragraphs and lists.
  4. Addition of "last modified" date to footer.
  5. Addition of "Google" background to search box to better meet Google TOS.
  6. Addition of linked transparent graphic to HTML of the banner box. Keeping the actual image as a background in the style sheet is preferable, because it only has to be changed in one place, but adding the link allows a clickable "back to my main page".
  7. Modifications to "skip to contents" link to make it more visible on focus.

Version 2

  1. Incorporation of top horizontal menu
  2. Addition of text with graphic icon backgrounds for the left "away" navigation
  3. Incorporation of "skip to contents" link (visible in most browsers when tabbing through the document)
  4. Changes to the left main navigation to indent the second and subsequent lines of multi-line entries
  5. Calling out styles in the style sheets that may need modification to adapt the templates
  6. More extensive commenting of the templates and style sheets

Version 1, version 2, version 3.0, version 3.5, version 4.0, and version 4.1 templates are deprecated, but still available for repairs and nostalgia.

Menus, text, photos

This area can be used for navigation of specific parts of your site, or for text or photographs.

2008-06-24