Nested DIVs theme

Owned by Terence Ordona
Last updated: Jan 29, 2009 by Gary Thompson (Deactivated)Version comment
2 min read

Overview

Create a theme for use within uPortal 2.x that complies to W3C recommended standards. Facilitate the separation of structure and presentation while creating a portal that makes sense in the absence of any stylistic presentation.

Background

The Nested DIVs theme dates back to September 2002 when the original concept was formed. Prototype concepts were developed around December 2002 with a working uPortal theme achieved around March 2003. It was fairly innovative at the time, items such as rounded tabs made using CSS with simple UL elements, and even multiple colors for each skin.

Version 2.x

The basic underpinnings of the Nested DIVs theme v2.x has not changed much from it's v1.x state. Many updates have been made to address accessibility, usability, account for newer browsers, and to add new features such as javascript. Almost all browser hacks and workarounds have been removed. Thus skins from v1.x will not work without minor updates to the CSS files. The updates are mainly with the Tab Navigation selectors. Everything else should work without updates, though, I have not tested this theory.

Meeting Recommended Standards

The Nested DIVs theme meets or helps to meet the following recommended standards:

  • W3C Recommendations for XHTML 1.0 Transitional
  • W3C Recommendations for CSS level 2
  • WAI Checkpoints Levels 1, 2, and 3
  • US Government Section 508

Accessibility Support

The Nested DIVs theme makes appropriations, were possible, to try and achieve modeless accessibility. This includes being friendly to screen readers and magnifiers. A significant attempt was made to be device and browser independent. Some key points include:

  • Access keys on each Tab
  • Skip to page content link on top of page
  • Skip to page navigation link on top of page
  • Better TITLE attributes on links, images, and Icon Conrols
  • TABINDEX attributes on primary navigation elements

Features

  • Does not use tables or transparent gifs for page layout.
  • Allows for user selectable font scaling
  • Allows developer to create tab specific page designs
  • Developer selectable icons on tabs and channel headers
  • Unobtrusive Javascript (Optional client-side Channel icon controls)
  • Supports better printing
  • Supports a broad range of standards compliant web browsers
  • Uses only very basic browser filtering CSS code, no insane CSS browser hacks

Contributors/Interested Parties

Resources

Accessibility
Download lastest version
Screenshot 1
Screenshot 2
Screenshot 3