Skins

Owned by Gary Thompson
Last updated: May 05, 2009Version comment
2 min read

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:

uportal-war\src\main\webapp\media\skins\universality\uportal3

Images:

uportal-war\src\main\webapp\media\skins\universality\uportal3\images

JavaScript:

uportal-war\src\main\webapp\media\skins\universality\common\javascript

Deployed
CSS:

uPortal\media\skins\universality\uportal3

Images:

uPortal\media\skins\universality\uportal3\images

JavaScript:

uPortal\media\skins\universality\common\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
RELATED LINKS


REFERENCES

XML/XSLT Resources

HTML Resources

CSS Resources

JavaScript Resources