Child pages
  • Skins
Skip to end of metadata
Go to start of metadata

A skin overlays the theme, specifying visual style and formatting.

On this page


Skin Definition

A Skin

  • Is a package of CSS and images that applies a brand: color, style, and imagery
  • Can (and usually does) affect channel and portlet content due to the cascading nature of CSS
  • Can override and/or extend the structure/layout
  • Is specific to a particular theme




Theme

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

Sample theme output with layout CSS applied

Reference: Rendering Process and Theme

uPortal 3.1 Skin

"uportal3" is the default skin for uPortal 3.1.

Screenshot of the uPortal 3.1 uportal3 skin

Skin File Location

Source
CSS:

Images:

JavaScript:

Deployed
CSS:

Images:

JavaScript:

Adding a new skin

Steps to adding a new skin to uPortal.

  1. Set up a development environment (Consider the uPortal Quickstart)
    1. Safe place for trial and error
    2. Demo to stakeholders
  2. Copy the entire skin directory
  3. Rename the skin directory
  4. Register the new skin in the portal
  5. Make modifications to skin files
  6. Test the new skin in a test environment
  7. Move the new skin to a public environment
  8. Restart the portal server
  9. Verify the new skin within the portal