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.

1. XMLUI Primer
High impact tips and tricks to enhance the
DSpace User Experience
Bram Luyten
www.atmire.com

2. WHAT WE WON’T BE DOING

3. THIS SHOULD BE MORE LIKE

4. WHERE DO WE START?
http://downloads.gosquared.com/help_sheets/07/CSS%20Help%20Sheet.pdf

5. WHAT HAPPENS IN MIRAGE CSS?

6. WITHOUT STYLE.CSS

7. STYLE.CSS TAKES CARE OF
DIV width, height, percentages
Font weights & relative sizes
Colours
Some images

8. WITHOUT STYLE.CSS

9. STRIPPING DOWN EVEN FURTHER
REMOVING BASE.CSS

10. WAIT?
The browser should by itself know how to
render basic elements, such as lists, right?

11. RESET.CSS REMOVES ALL BROWSER INFLUENCE
WITHOUT RESET.CSS (IN CHROME):

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

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

14. TELL DSPACE TO START USING YOUR THEME
<themes> section in
/dspace/config/xmlui.xconf

15. CHANGING PAGE STRUCTURE
http://www.mulberrytech.com/quickref/XSLT_1quickref-v2.pdf

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

17. DISSECTING THE DSPACE PAGES INTO PIECES

18. WHAT DOES THE XHTML TELL US
XHTML = the final end product of the XML pipeline

19. PIECES OF THE HOMEPAGE
buildHeader
ds-body
ds-options

20. 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, ...

21. DRI - BODY
The DIV ids tell us which aspect is responsible for
putting this part into the DRI

22. DRI - OPTIONS
The DIV ids tell us which aspect is responsible for
putting this part into the DRI

23. HOW XSL OPERATES ON DRI CONTENT

24. 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?

25. POP QUIZ
What are the two strategies for removing
the Browse element from the menu ?

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

27. DISABLING THIS IN XSL
MyTheme.XSL reveals which stylesheets get
applied
Note that older themes Reference, Kubrick and classic refer
to different xsl’s.

28. 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')]"/>

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

30. REMOVE IN ASPECT JAVA CLASS EXAMPLE
dspace-xmlui/src/main/java/org/dspace/app/xmlui/
aspect/viewArtifacts/Navigation.java

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

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

33. THE BIG PICTURE

34. THIS IS ALL FOR NOW

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