...

• 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 SASSSkins for the Respondr theme go in the respondr/ directory
• CSS is developed and maintained with LESS

Step-By-Step Skinning Guide

1. Copy the uportal3 skin defaultSkin/ (folder) and give it an intitution-specific name (e.g. wolverine)
2. Copy the defaultSkin.less file and give it the same name (e.g. wolverine.less)
3. Edit defaultSkin.less to change the path to skin.less but ADD an import for your variables.less file:
   

   /** DO NOT REMOVE THIS INCLUDE ****************/
   @import "defaultSkin/less/variables.less";
   /**********************************************/

   @import "wolverine/less/variables.less";

   @import "common/common.less";

   @import "wolverine/less/skin.less";

    
4. Edit the skinList.xml file to add your custom skin 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>

   
   

5. Edit the DLMXHTMLrespondr.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>

    

6. Edit the dynamic-respondr-skin.portlet-definition.xml file with your skin name & re-import it:
   

   <!-- NOTE: When using the 'dynamic-respondr-skin' portlet with a custom skin,
   uncomment the following <portlet-preference> element and change the <value>
   to the name of your skin. -->
   <portlet-preference>
   <name>PREFdynamicSkinName</name>
   <readOnly>false</readOnly>
   <value>wolverine</value>
   </portlet-preference>

    
7. Change the contents of the wolverine folder to-taste
   • Override color values and a handful of other things in variables.less
   • Override style rules in skin.less