/
Skinning and Branding

Skinning and Branding

Mar 18, 2016

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/

  • Skins for the Respondr theme go in the respondr/ directory

  • CSS is developed and maintained with LESS

Step-By-Step Skinning Guide

  1. Copy the 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 your skinName.less file 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:
    (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 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>

     

  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