03 Skins

Owned by Jason Jason
Last updated: Feb 26, 2009 by Arlo WhiteVersion comment
2 min read

Skins are groupings of styles (colors, fonts, presentation, images) that may be user selected.

Within one theme, multiple skins can give the layout even more personalization. No changes need to be made to the mark up for switching between skins, so an XSL transformation is not necessary. The theme merely points to which skin will be used. To change which skin is viewed, then, the user simply changes the location of the skin directory to which the theme points. The skins are defined using Cascading Style Sheets and graphics.

Applying a skin is the last step in building each page in uPortal, wrapping the layout with the color scheme and text styles. The user has the ability to change the skin of their portal in the preferences section. This change will take place instantly, and will not effect their layout.

Creating New Skins

New skins can easily be made and added to uPortal. Creating a new skin requires the following steps:

  1. Create a new skin folder structure under uportal-war/src/main/webapp/media/skins/universality (The uportal3 skin makes a good reference)
  2. Add your skin to uportal-war/src/main/webapp/media/skins/universality/skinList.xml
  3. Make new and/or override the default Cascading Style Sheet (CSS) files
  4. Modify and add graphics
  5. Redeploy the portal.

Creating a CSS File

uPortal uses a cascading style sheet to control the text fonts and styles, as well as the background color scheme information. Each skin uses a single style sheet for all of its styles. The styles defined in the new CSS will be translated into the look of the uPortal layout when that skin is chosen.

A number of standard styles are used throughout uPortal, within channels, and defined in the Portlet Spec.

Setting the Default Skin

The default skin is defined in the database in the UP_SS_THEME_PARM table.  Just modify the PARAM_DEFAULT_VALUE to your skin's name.  This row is populated by the  uportal-impl/src/main/resources/properties/db/entities/theme/DLM_XHTML-1.theme, which you can modify to set this parameter in the database when initdb is run.