Nested DIVs theme documentation

Owned by Terence Ordona
Last updated: Aug 23, 2005Version comment
2 min read

File Structure

There are three Primary directories:

/common - Directory for default and basic files shared in all skins
/divs - Directory for default DIVs skin
/optional - Directory containing optional files, developer selectable

Under the Primary directories may be sub-directories as follows:

/backgrounds - Directory for background images
/controls - Directory for channel icon images
/icons - Directory for channel headers or tab icon images
/institutional - Directory for school specific images such as logos
/profile - Directory for skin preview images and thumbnails
/scripts - Directory for skin related Javascript
/skin - Directory for skin related CSS files
/tabs - Directory for tab navigation related image files

The file structure is fairly identical between the Primary directories, though some may or may not contain all sub-directories.

Skin CSS Files

/common/skin/standard.css :: required :: contains styling for basic HTML elements and generic uportal selectors

/divs/skin/divs.css :: required :: contains color scheme, tab navigation, and channel styling selectors

/divs/skin/icons.css :: optional :: contains example (default) selectors that adds icons to tabs and channel headers

/divs/skin/layout.css :: required :: contains layout selectors and top level font sizing

/optional/skin/highcontrast.css :: optional :: basic css changing all colors to black and white

/optional/skin/print.css :: optional :: contains layout and styling selectors to aid in printing

Rendered Document Structure

Tab Navigation

Channel Headers (All States: Maximized, Minimized, and Focused)

Channel Windows (Maximized)

Channel Windows (Minimized)

Optional Components

icon-controls.js

Adds TITLE attributes to all A elements on a page

  • adds a note if link opens in a new window
  • adds a TITLE attribute if none currently exists

Adds client-side behaviors for most channel icons

  • maximize
  • minimize
  • focus
  • detach

Browser and Platform Compatibility

  • IE 5.5+ Windows
  • IE 6.0+ Windows
  • IE 5.2+ Macintosh
  • Safari 1.2+ Macintosh
  • Konqueror 3.2+ *nix
  • Firefox 1.x All Platforms
  • Mozilla 1.5+ All Platforms
  • Opera 7.x All Platforms
  • Opera 8.x All Platforms

Notes: Tested and correctly works on Windows IE 5.0, but control icons are not positioned correctly. I actually never planned on the skin working on this version, but it ended up this way. Not officially supported.

Known Issues

  • Columns can only be specified in percentages (%) and not fixed widths (Pixel units)
  • Number of columns are limited to 5
  • Firefox 1.x may have issues initially displaying content within a channel window causing a scrollbar to appear.
  • If the tab navigation contains too many tabs or tabs with extremely long names, the navigation may wrap or spill of the page