Documentation

draft.20030610

Table of Contents

Overview

This document provides installation and configuration information necessary for getting started using the Nested DIVs theme with uPortal. It will describe the "quick start" and "uPortal only" distributions.

Requirements

  • Current distribution of Nested DIVs theme available from the JA-SIG Clearinghouse
  • Current distribution of uPortal 2.1.x Quick-start
  • The Java Development Kit (JDK) version 1.3 or higher, but NOT v1.4.2, must be installed.
  • JAVA_HOME environment variable must be set.
  • Servlet engine, Tomcat 4.0+ or Resin 2.1+.
  • Nothing else should be running on port 8080 and 8887.

Installation

Please note that these instructions have not been thoroughly tested.

Quick-start installation:

  • Copy and/or overwrite files from the Nested DIVs distribution on top of uPortal Quick-start distribution
  • Compile and Deploy uPortal
  • Follow directions regarding the uPortal Quick start package.

uPortal only installation: (Using rel 1.01 or lower)

  • Copy and/or overwrite files from the Nested DIVs distribution on top of uPortal only distribution
  • Modify data.xml: Under the table UP_SS_THEME, change "Nested tables" and "nested-tables" to "Nested DIVs" and "nested-divs"
  • Modify data.xml: Under the table UP_SS_THEME, change SERIALIZER_NAME to value of XHTML
  • Set the Login channel as part of the Guest layout within your Database.
  • Load the DB
  • Compile and Deploy uPortal

uPortal only installation: (Using rel 1.02 or greater)

Theme Structure

Skin Structure

standard.css: Required file. This file describes a set of CSS IDs and classes that are shared amongst all of the skins.

print.css: Optional file. CSS file that transforms a uPortal layout into one that is suitable for printing. This includes hiding elements such as the tab navigation, changing the font size units to 'point', and aligning the columns top to bottom.

orange.css: Required file. This is the skin's default CSS file, it sets the skin's colors, tabs, and channel windows.

layout.css: Required file. The layout of the page is determined with this file. Column layout, being horizontal or vertical, and spacing values are set here. Any CSS that must be hidden from Netscape 4 should be placed in this file.

highcontrast.css: Optional file. A black and white skin with larger fonts.

color.css: Optional files. Alternate skin color(s). With the exception of the color values and/or file names, these files are identical to the orange CSS file.

Skin Basics

The built-in Nested DIV skins all use a monochromatic color scheme. In short, monochromatic color schemes use a single color. The scheme has differing values of the chosen color that are used to create the feel of different colors. Monochromatic color schemes are harmonious and peaceful. Using a single color creates unity, helps to create or tie things together (such as a webpage's content).

Tweak Tip: It is recommended to use discretion in the number of alternate skin colors provided. Each additional skin color places extra requests to the server in terms of fetching the .css file, tab graphics (if applicable), and background images.

Tab Creation

Tabs are created using an unordered list (UL element). The tabs have an ID of tabNavigation and a tab that is to be highlighted (a selected tab) has a class of selectedTab

				<ul id="#tabNavigation">
					<li><a href="link.html">My Tab</a></li>
					<li><a href="link.html">Your Tab</a></li>
					<li class="selectedTab"><a href="link.html">Who's Tab?</a></li>
					<li><a href="link.html">Virginia</a></li>
					<li><a href="link.html">Tech</a></li>
				</ul>

Each tab is assigned an Accesskey corresponding to the tab's ID number.

Channel Windows

The channel windows rely on eight container DIVs for their creation.

channel-window-outside: can be used to control the color of the window and provide a border.

channel-window-inside: can be used to provide a bevel effect to the overall window appearance

channel-window-header: contains the channel's title and associated control icons. There is an additional (unlabeled) DIV element nested here to allow for bevel effects similar to channel-window-inside. Background images are useful for transforming the window to provide appearances such as Mac OS Classic or Windows XP style windows.

channel-content-border: can be used to provide a bevel effect to the overall window appearance

channel-content-body: contains the channel's content.

There are two DIV containers that are completely optional, which are labeled: corners-top and corners-bottom. As of this writing (2003.06.10) only Mozilla 1+, Opera 7+, and Safari 1+ are able to render the CSS used for the "rounded corner" illusion.

At a bare minimum, only three of the DIVs used for the channel window creation are required. Using only: channel-window-header and channel-content-body will keep non-semantic code at a minimum. The rest of the DIVs are used for presentation (eye-candy) only.

Tweak Tip: If your instance of uPortal will not be serving skins that make use of the corners-top and corners-bottom, such as Windows XP or Apple Quicktime skin, you can delete those specific DIV references and save a few bytes in page size.

channel-windows

Channel Windows (Minimized)

Channel Windows that are minimized have the same structure as those that are maximized with two exceptions. All the windows have a suffix of "-minimized" and the structure lacks the channel-content-border and channel-content-body DIVs.

channel-window-outside-minimized: can be used to control the color of the window and provide a border.

channel-window-inside-minimized: can be used to provide a bevel effect to the overall window appearance

channel-window-header-minimized: contains the channel's title and associated control icons.

channel-windows-min

Browser Compatibility

In general, the Nested DIVs theme has been shown to work in the following browsers. There are certain cases where a skin has been optimized to work within a set of browsers, however, this is limited to the creation of tabs only and will not affect the page rendering.

  • Opera 5+ : All Platforms
  • Mozilla 1+ / Gecko Engine : All Platforms
  • Internet Explorer 5+ / MSIE Engine : Windows
  • Internet Explorer 5+ : Macintosh
  • Safari 1+ / Apple Webcore Engine : Macintosh
  • Konqueror 3+ / KHTML Engine : Linux

The following browsers have been tested and are unable to render the Nested DIVs theme correctly and/or the rendering degrades gracefully (denoted with a *)

  • Netscape 4.x *
  • Off By One 3.x *
  • iCab 2.x *
  • Lynx 2.x *
  • HotJava 3.x *
  • OmniWeb 4.x up to 4.5x
  • Espial Escape 4.x
  • ICEbrowser 5.x
  • Clue Browser 4.x

Issues and known problems

- If there is more than one column and the last column has a default width of 100%, the columns will revert to dividing the total width by number of columns. This is to avoid any potential overflow of content.

Example: A layout has 2 columns. The 1st column has a width of 50% and the 2nd column still has the default width of 100%. Logic with nested-divs.xsl will set the widths of each column to 50%.

- Content that is longer in width than an column's specified width will cause that column to wrap in WinIE 5+. This only applies only if there is more than one column.

Resolved using overflow: auto; Still affect Opera v6.x and lower plus Konqueror 3.1 and lower.

- Limitations using CSS to give total column widths is set to relative percentages (%) and not absolute pixel widths.

- TEXTAREA, OPTION, and SCRIPT tags are outputted in XHTML shorthand format. Causes rendering problems in most browsers. Example:

				<textarea />

Resolved with a fix applied to the HTMLserializer. The fix forces the TEXTAREA and OPTION element to empty.state = false. Resulting in (proper output): 

				<textarea></textarea>