Skins

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

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

Sample theme output with layout CSS applied

Reference: Rendering Process and Theme

"uportal3" is the default skin for uPortal 3.1.

Screenshot of the uPortal 3.1 uportal3 skin

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

Steps to adding a new skin to uPortal.

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

RELATED LINKS

User Experience Goals (uPortal)

Design Concepts (uPortal)

User Experience (uPortal)

Markup and CSS Naming Conventions (uPortal)

Accessibility (uPortal)

Rendering Process (uPortal)

Skins (uPortal)

User Interface (uPortal)

Theme (uPortal)

Theme Configuration (uPortal)

REFERENCES

XML/XSLT Resources

HTML Resources

CSS Resources

JavaScript Resources