CODEWITHSUNDEEP
dspace
Peter Dietz
Peter Dietz

Reputation: 2689

In DSpace, how can I use multiple XMLUI themes that reuse code?

Say I have a base XMLUI theme /Mirage1, and another theme /Mirage1-green, and /Mirage1-red. How can I make it so that Mirage1-green and Mirage1-red don't have to have copies of all the XSL code and logic, but instead just have green.xsl, green.js, and green.css, and then the other theme has red.xsl, red.js and red.css?

My goal for doing this is so that I can make bug fixes and other improvements to the base theme Mirage1, and not having to repeat those fixes to the other themes too.

I'm thinking that the solution involves Mirage1-green theme's sitemap.xmap to import Mirage1-green/xsl/green.xsl, which then imports ../Mirage1/aspect/artifactbrowser/common.xsl and so on, but links to code, or other guides would be much appreciated.

Upvotes: 1

Views: 644

Answers (2)

Bram Luyten
Bram Luyten

Reputation: 1063

The following will only work for XMLUI themes that are based on the recently contributed Mirage 2 theme:

The inheritance of the base Mirage 2 theme is implicit and automatic.

  1. Create a new theme folder in src/dspace/modules/xmlui-mirage2/src/main/webapp/themes
  2. Any file you put in there will override the the Mirage 2 original files.

An example has been put in place in the DSpace master branch to make this clear:

https://github.com/DSpace/DSpace/tree/master/dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles

This folder currently contains a single _style.scss file, overriding the _style.scss in the styles folder from the Mirage 2 source files at:

https://github.com/DSpace/DSpace/tree/master/dspace-xmlui-mirage2/src/main/webapp

Upvotes: 1

terrywb
terrywb

Reputation: 3956

We have implemented a similar solution, and we can easily roll out a new custom theme with minimal changes.

We tend to customize a header image and link target, footer text, and a few CSS styles per collection.

  • Create MirageBase.xsl and MirageBase.css
    • Global changes to your stylesheet logic should be applied in MirageBase.xsl
  • Mirage1 sitemap points to Mirage1 xsl, css, js
    • Mirage1 xsl does an xsl:import of MirageBase.xsl
    • Mirage1 css does an import of MirageBase.css
  • Mirage2 sitemap points to Mirage2 xsl, css, js
    • Mirage2 xsl does an xsl:import of MirageBase.xsl
    • Mirage2 css does an import of MirageBase.css
  • Mirage3 sitemap points to Mirage3 xsl, css, js
    • Mirage3 xsl does an xsl:import of MirageBase.xsl
    • Mirage3 css does an import of MirageBase.css

Here is an example of what one of our custom collection stylesheets looks like.

<xsl:stylesheet xmlns:i18n="http://apache.org/cocoon/i18n/2.1"
    xmlns:dri="http://di.tamu.edu/DRI/1.0/" xmlns:mets="http://www.loc.gov/METS/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"     xmlns:dim="http://www.dspace.org/xmlns/dspace/dim"
    xmlns:mods="http://www.loc.gov/mods/v3" xmlns:xlink="http://www.w3.org/TR/xlink/"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

    <xsl:import href="../non-GU-lib.xsl" />
    <xsl:output indent="yes" />

    <xsl:variable name="header-logo"
       select="concat($context-path,'/themes/GU-base-theme/non-GU-lib/ir/images/ir-logo.png')" />
    <xsl:variable name="header-logo-link">
        http://library.georgetown.edu/ir/home
    </xsl:variable>
    <xsl:variable name="teaser-image"
        select="concat($theme-path,'/images/ir-teaser.jpg')" />

</xsl:stylesheet>

Upvotes: 1

Related Questions