Theme

A theme transforms back-end data and layout into user interfaces.

The Theme

• Is a part of the overall Rendering Process
• Controls the structure and layout of content
• Is built with XSLT templates
• Specifies [JavaScript] and CSS linked to the page
• Outputs the portal markup
• Generates the resultant interface
• Excludes portlet content - portlets generate their own markup separately
• Supports multiple skins
• Includes CSS for basic layout and structure
• May be configured to produce different structural arrangements

Theme Structure

This example structure depicts the dashboard view of the uPortal 3.1 distribution. The Universality theme may be configured to produce different structural arrangements.

Theme Structure Example

Layout CSS

CSS is used to produce the basic visual layout. uPortal uses the Fluid Skinning System for basic grid layout and extends that with a uPortal-specific CSS file.

Sample theme output with layout CSS applied

Universality

"Universality" is the name given to the default uPortal 3.x theme. The name is a play on the words "universal" and "university".

Key Features

Easy to customize

A key goal was to make the theme easy to customize and easy to migrate customizations into future releases.

• Simplify location of theme files.
• One file for all customizations.
• Localization of all theme labels and text.
• Broad-stroke and fine-grained control over layout blocks, lists, and ordering.
• Code structure and code comments "for Dummies".
• Standardized naming convention.

Web Standards & Accessiblity

Produce Grade-A pages and markup that is friendly and usable by all.

• Semantic markup.
• Separation of presentation from content.
• All <div> layout, no tables for layout (v 3.1).
• WCAG 2 Level 1 compliant (v 3.1).
• Optional access keys.

JavaScript & AJAX

Elegant use of JavaScript for rich user interaction.

• Uses the jQuery JavaScript library.
• Namespacing to prevent collisions.
• Progressive enhancement approach.

Universality Architecture

An overview of how Universality generates a page.

Theme Architecture

Reference: Rendering Process

Theme File Location

Source
Structure Transform

uportal-war\src\main\resources\layout\structure\columns

Theme Transform

uportal-war\src\main\resources\layout\theme\universality

Deployed
Structure Transform

uPortal\WEB-INF\classes\layout\structure\columns

Theme Transform

uPortal\WEB-INF\classes\layout\theme\universality

Reference: Skin File Location, Structure Transform, and Theme Transform

Theme Configuration

Reference: Theme Configuration

Internationalization

All portal theme text and labels reside in an XML file (messages.xml, located in the same location as the theme files) that can be localized. The theme references the text/label by token. For example:

<img src="{$SKIN_PATH}/images/portal_logo.png" alt="{$TOKEN[@name='LOGO']}"/>

Where the alt text references the token with a name of LOGO. Looking up LOGO in messages.xml, we find:

<token name="LOGO">uPortal by JA-SIG</token>

The resultant markup sent to the browser:

<img src="{$SKIN_PATH}/images/portal_logo.png" alt="uPortal by JA-SIG"/>

Note:

The messages.xml file affects the portal theme only, and does not affect portlets or channels, which have their own localization files.

Skins

Reference: Skins, CSS