Highlights

• Rendering in uPortal leverages a three-part, hierarchical approach
  
  1. Structure (XSL transform)
  2. Theme (XSL transform)
  3. Skin (CSS, JavaScript, images, etc.)
• A skin is tied to a theme
• Skins are located in
  uportal-war/src/main/webapp/media/skins/
• Desktop skins belong to the Universality theme
• Mobile skins belong to the mUniversality theme
• CSS is usually developed and maintained with SASS

Step-By-Step Skinning Guide

1. Copy the uportal3 skin (folder) and give it an intitution-specific name (e.g. wolverine)
2. Edit the skinList.xml file to add your custom skin 
   (Optionally remove the other skins)
   

   <skin>
   <skin-key>wolverine</skin-key>
   <skin-name>Wolverine</skin-name>
   <skin-description>
   Custom, institional branding
   </skin-description>
   </skin>

   
   

3. Edit the DLMXHTML.stylesheet-descriptor.xml file with your skin name & re-import it
   

   <stylesheet-parameter>
   <name>skin</name>
   <default-value>wolverine</default-value>
   <scope>PERSISTENT</scope>
   <description>Skin name</description>
   </stylesheet-parameter>

    

4. Change the contents of the wolverine folder to-taste