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
www.atmire.com
XMLUI PrimerHigh impact tips and tricks to enhance the
DSpace User Experience
Bram Luyten
WHAT WE WON’T BE DOING
THIS SHOULD BE MORE LIKE
WHERE DO WE START?
http://downloads.gosquared.com/help_sheets/07/CSS%20Help%20Sheet.pdf
WHAT HAPPENS IN MIRAGE CSS?
WITHOUT STYLE.CSS
STYLE.CSS TAKES CARE OF
DIV width, height, percentages
Font weights & relative sizes
Colours
Some images
WITHOUT STYLE.CSS
STRIPPING DOWN EVEN FURTHER REMOVING BASE.CSS
WAIT?
The browser should by itself know how to render basic elements, such as lists, right?
RESET.CSS REMOVES ALL BROWSER INFLUENCEWITHOUT RESET.CSS (IN CHROME):
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
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
TELL DSPACE TO START USING YOUR THEME
<themes> section in /dspace/config/xmlui.xconf
CHANGING PAGE STRUCTURE
http://www.mulberrytech.com/quickref/XSLT_1quickref-v2.pdf
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
DISSECTING THE DSPACE PAGES INTO PIECES
WHAT DOES THE XHTML TELL US
XHTML = the final end product of the XML pipeline
PIECES OF THE HOMEPAGE
ds-body ds-options
buildHeader
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, ...
DRI - BODY
The DIV ids tell us which aspect is responsible for putting this part into the DRI
DRI - OPTIONS
The DIV ids tell us which aspect is responsible for putting this part into the DRI
HOW XSL OPERATES ON DRI CONTENT
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?
POP QUIZ
What are the two strategies for removing the Browse element from the menu ?
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
DISABLING THIS IN XSL
MyTheme.XSL reveals which stylesheets get applied
Note that older themes Reference, Kubrick and classic refer to different xsl’s.
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')]"/>
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
REMOVE IN ASPECT JAVA CLASS EXAMPLE
dspace-xmlui/src/main/java/org/dspace/app/xmlui/aspect/viewArtifacts/Navigation.java
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
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.
THE BIG PICTURE
THIS IS ALL FOR NOW
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