Skinning and Branding
Highlights
- Rendering in uPortal leverages a three-part, hierarchical approach
- Structure (XSL transform)
- Theme (XSL transform)
- Skin (CSS, JavaScript, images, etc.)
- A skin is tied to a theme
- Skins are located in
uportal-war/src/main/webapp/media/skins/
- Skins for the Respondr theme go in the
respondr/
directory - CSS is developed and maintained with LESS
Step-By-Step Skinning Guide
- Copy the
defaultSkin/
(folder) and give it an intitution-specific name (e.g. wolverine) - Copy the
defaultSkin.less
file and give it the same name (e.g. wolverine.less) - Edit yourÂ
skinName.less
 file to change the path toskin.less
but ADD an import for yourvariables.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";
 - 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> - Edit the respondr.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>Â
- 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> - 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
- Override color values and a handful of other things in