SUNScholar/XMLUI Theme/M2/Customisation/Multiple Themes

Back to Mirage 2 Customisation

Introduction

Any folder you create in the following folder will be interpreted as a Mirage2 based theme:

$HOME/source/dspace/modules/xmlui-mirage2/src/main/webapp/themes

Step 1 - Create folders

We have ten top level communities as faculties, therefore we need to create ten distinct themes, one per faculty.

Type the following;

cd $HOME/source/dspace/modules/xmlui-mirage2/src/main/webapp

mkdir -p themes/{01/styles,02/styles,03/styles,04/styles,05/styles,06/styles,07/styles,08/styles,09/styles,10/styles}

Step 2 - Create files

Now we have the style folders, the next step is to create the style file in styles folder.

First, we create styles template file;

cd /tmp

nano _styles.scss

Copy and paste the following into the file

/**
* Faculty branding
**/

$brand-primary:          #76273c;

Now we copy the style template to each of the styles folders;

cd $HOME/source/dspace/modules/xmlui-mirage2/src/main/webapp/themes

for x in 01 02 03 04 05 06 07 08 09 10; do cp /tmp/_styles.scss $x/styles; done

Step 3 - Modify color

Now there is a style file in each style folder.

Go to each style folder, in each of the top level folders and edit the color variable "$brand-primary" in the style file, to match the color per faculty.

See: http://wiki.lib.sun.ac.za/index.php/SUNScholar/Theme/Color_Palette for an example of a faculty palette.

Step 4 - Map themes

Now we need to map the themes to the relevant top level communities in the DSpace XMLUI.

First we record the handle per top level community manually on a piece of paper.

Then we do the mapping;

cd $HOME/dspace/config

nano xmlui.xconf

Copy and paste the following into the <themes> section as the first theme definitions;

        <theme name="01" handle="99999.1/168" path="01/" />
        <theme name="02" handle="99999.1/169" path="02/" />
        <theme name="03" handle="99999.1/170" path="03/" />
        <theme name="04" handle="99999.1/171" path="04/" />
        <theme name="05" handle="99999.1/172" path="05/" />
        <theme name="06" handle="99999.1/173" path="06/" />
        <theme name="07" handle="99999.1/174" path="07/" />
        <theme name="08" handle="99999.1/175" path="08/" />
        <theme name="09" handle="99999.1/176" path="09/" />
        <theme name="10" handle="99999.1/177" path="10/" />

Replace the handles with the handles for your top level communities.

See example below.

    <themes>
        <theme name="01" handle="99999.1/168" path="01/" />
        <theme name="02" handle="99999.1/169" path="02/" />
        <theme name="03" handle="99999.1/170" path="03/" />
        <theme name="04" handle="99999.1/171" path="04/" />
        <theme name="05" handle="99999.1/172" path="05/" />
        <theme name="06" handle="99999.1/173" path="06/" />
        <theme name="07" handle="99999.1/174" path="07/" />
        <theme name="08" handle="99999.1/175" path="08/" />
        <theme name="09" handle="99999.1/176" path="09/" />
        <theme name="10" handle="99999.1/177" path="10/" />

        <theme name="Mirage2" regex=".*" path="Mirage2/" />

        <!-- Example configuration -->

        <!-- <theme name="Test Theme 1" handle="123456789/1" path="theme1/"/>    -->
        <!-- <theme name="Test Theme 2" regex="community-list" path="theme2/"/> -->

        <!-- Mirage theme, @mire contributed theme, default since DSpace 3.0 -->
        <!-- <theme name="Atmire Mirage Theme" regex=".*" path="Mirage/" /> -->

        <!-- Reference theme, the default Manakin XMLUI layout up to DSpace 1.8 -->
        <!-- <theme name="Default Reference Theme" regex=".*" path="Reference/" /> -->

        <!-- Classic theme, inspired by the JSP UI -->
        <!-- <theme name="Classic" regex=".*" path="Classic/" /> -->

        <!-- The Kubrick theme -->
        <!-- <theme name="Kubrick" regex=".*" path="Kubrick/" /> -->

    </themes>