SUNScholar/XMLUI Theme/M2/Customisation/Multiple Themes

Back to Mirage 2 Customisation

PLEASE NOTE:

Please do not attempt this until you have successfully customised the main Mirage2 theme!

This procedure is still in the testing phase.

Introduction

This procedure was used to create distinct themes on our development server.

Basically 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

See below details of the procedure we used, please modify according to your particular situation.

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..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
**/

header .navbar-default {
    background-color: #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 brand 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 "background-color" 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, top level community handle to theme name and path;

cd $HOME/source/dspace/config

nano xmlui.xconf

Copy and paste the following into the <themes> section as the first theme definitions; (Please read the comments in the file about the order in which the themes are rendered)

        <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>