introduction to xmlui and mirage theming for dspace 3
DESCRIPTION
ELAG 2013 Workshop on customizing the DSpace XMLUI Mirage interface. The workshop first explores what can be changed in CSS, exploring the different functions of the style.css, base.css and reset.css files. It then highlights where all of these files can be found and where you need to deploy your own customizations. Digging down an additional layer, it is explained how XSL can be modified to remove or change entire blocks of functionality on a page. The key learning here is that you can alter the representation of whatever comes in through the DSpace DRI using XSL. However, if you need to include additional data or other DSpace info, you have to make sure that it appears in the DRI first, before you can start transforming it with XSL.TRANSCRIPT
![Page 1: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/1.jpg)
www.atmire.com
XMLUI PrimerHigh impact tips and tricks to enhance the
DSpace User Experience
Bram Luyten
![Page 2: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/2.jpg)
WHAT WE WON’T BE DOING
![Page 3: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/3.jpg)
THIS SHOULD BE MORE LIKE
![Page 4: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/4.jpg)
WHERE DO WE START?
http://downloads.gosquared.com/help_sheets/07/CSS%20Help%20Sheet.pdf
![Page 5: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/5.jpg)
WHAT HAPPENS IN MIRAGE CSS?
![Page 6: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/6.jpg)
WITHOUT STYLE.CSS
![Page 7: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/7.jpg)
STYLE.CSS TAKES CARE OF
DIV width, height, percentages
Font weights & relative sizes
Colours
Some images
![Page 8: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/8.jpg)
WITHOUT STYLE.CSS
![Page 9: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/9.jpg)
STRIPPING DOWN EVEN FURTHER REMOVING BASE.CSS
![Page 10: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/10.jpg)
WAIT?
The browser should by itself know how to render basic elements, such as lists, right?
![Page 11: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/11.jpg)
RESET.CSS REMOVES ALL BROWSER INFLUENCEWITHOUT RESET.CSS (IN CHROME):
![Page 12: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/12.jpg)
WHERE CAN WE FIND THESE FILES
Original Mirage sourcefiles[dspace-src]/dspace-xmlui/src/main/webapp/themes
Your own themes and local customizations[dspace-src]/dspace/modules/xmlui/src/main/webapp/themes
In your live, deployed DSpace[dspace-install]/webapps/xmlui/themes
![Page 13: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/13.jpg)
MAKING YOUR OWN THEME
Copy & Rename the Mirage folder to MyTheme from the original source to your local theme customizations dir.
Rename MyTheme/Mirage.xsl to MyTheme/MyTheme.xsl
Rename global variables Mirage to MyTheme in MyTheme/sitemap.xmap
![Page 14: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/14.jpg)
TELL DSPACE TO START USING YOUR THEME
<themes> section in /dspace/config/xmlui.xconf
![Page 15: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/15.jpg)
CHANGING PAGE STRUCTURE
http://www.mulberrytech.com/quickref/XSLT_1quickref-v2.pdf
![Page 16: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/16.jpg)
BASIC CONCEPT
Information pulled from the database in Java classes gets represented in XML and goes to a chain of transformations before eventually being delivered as XHTML to the end user
![Page 17: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/17.jpg)
DISSECTING THE DSPACE PAGES INTO PIECES
![Page 18: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/18.jpg)
WHAT DOES THE XHTML TELL US
XHTML = the final end product of the XML pipeline
![Page 19: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/19.jpg)
PIECES OF THE HOMEPAGE
ds-body ds-options
buildHeader
![Page 20: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/20.jpg)
THE DRI DOCUMENT
DRI = Digital repository interface
Page elements that are not in the DRI are either added by the theme or by aspects. Examples: scripts, css, ...
![Page 21: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/21.jpg)
DRI - BODY
The DIV ids tell us which aspect is responsible for putting this part into the DRI
![Page 22: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/22.jpg)
DRI - OPTIONS
The DIV ids tell us which aspect is responsible for putting this part into the DRI
![Page 23: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/23.jpg)
HOW XSL OPERATES ON DRI CONTENT
![Page 24: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/24.jpg)
WHERE TO LOOK FROM HERE?
Theme XSL
We want to change the final output of something already in DRI
Aspect sitemaps and Java Code
We want to put something new into the DRI or change the way how something is represented in DRI.
The first question is always:
Is the thing I want to affect already in the DRI or not?
![Page 25: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/25.jpg)
POP QUIZ
What are the two strategies for removing the Browse element from the menu ?
![Page 26: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/26.jpg)
ANSWER
1. Prevent in the XSL that the DRI content makes it into the final XHTML
2. Ensure that the element doesn’t get in the DRI to begin with
![Page 27: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/27.jpg)
DISABLING THIS IN XSL
MyTheme.XSL reveals which stylesheets get applied
Note that older themes Reference, Kubrick and classic refer to different xsl’s.
![Page 28: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/28.jpg)
NAVIGATION.XSL
Limit which templates get applied after building the search box.
<xsl:apply-templates select="*[not(@id='aspect.viewArtifacts.Navigation.list.browse')]"/>or
<xsl:apply-templates select="*[not(@n='browse')]"/>
![Page 29: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/29.jpg)
PREVENT FROM GETTING INTO DRI
from DRI
aspect.ViewArtifacts.Navigation.browse
Remove in aspect Java Classes
dspace-xmlui/src/main/java/org/dspace/app/xmlui/aspect/.../Navigation.java
Search for addList(“browse”) to see all occurrences
![Page 30: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/30.jpg)
REMOVE IN ASPECT JAVA CLASS EXAMPLE
dspace-xmlui/src/main/java/org/dspace/app/xmlui/aspect/viewArtifacts/Navigation.java
![Page 31: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/31.jpg)
WAIT .. AM I NOT DOING TOO MUCH INTRUSIVE CHANGES?
All of the files you change for your own theme will end up in your customization directory and NOT in the official source code files.
Maven builds will tie them together
![Page 32: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/32.jpg)
WHAT IF THE CHANGE IS WANT TO MAKE IS NOT IN THE DRI?
Theme related static components including the header and footer are added by a particular XSL.
![Page 33: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/33.jpg)
THE BIG PICTURE
![Page 34: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/34.jpg)
THIS IS ALL FOR NOW
![Page 35: Introduction to XMLUI and Mirage Theming for DSpace 3](https://reader033.vdocuments.us/reader033/viewer/2022050804/549369b2b47959744d8b4863/html5/thumbnails/35.jpg)
CREDITS
http://www.dsmedia.nl/pics/slider3.jpg
http://kiranconnolly.wordpress.com/2012/01/26/questions-and-answers/
http://www.epbot.com/2010/11/from-zero-to-awesome-in-less-than-12.html
http://www.slideshare.net/tdonohue/making-dspace-xmlui-your-own
http://images.thomann.de/pics/prod/287182.jpg