SUNScholar/XMLUI Theme/Tutorial

From Libopedia
Jump to navigation Jump to search 
Back to XMLUI Theme

Theme Definition

  1. The Tomcat server is configured to use port 80 and 443.
  2. The Tomcat server is configured to use the XMLUI interface as default.
  3. The XMLUI theme to be used is defined in the xmlui.xconf file.

Theme Expression Sequence

Xmlui-overview.jpg

A Java file per aspect is created to form the DRI in an XML format. 

/home/dspace/source/dspace-xmlui/src/main/java/org/dspace/app/xmlui/aspect

The XML is transformed via XSL to XHTML, using global transformers. 

/home/dspace/source/dspace-xmlui/src/main/webapp/themes/dri2xhtml
/home/dspace/source/dspace-xmlui/src/main/webapp/themes/dri2xhtml-alt

The XML is further transformed via XSL to XHTML, using localised transformers, assuming you selected to use the Mirage theme. 

/home/dspace/source/dspace-xmlui/src/main/webapp/themes/Mirage/sitemap.xmap
/home/dspace/source/dspace-xmlui/src/main/webapp/themes/Mirage/Mirage.xsl

The XHTML files are styled per theme using CSS files. 

/home/dspace/source/dspace-xmlui/src/main/webapp/themes/Mirage/lib/css

Official Help

View the following for official DSpace Manakin help.

View the following for a better understanding of XMLUI Mirage theme design using the "modules" overlay method:

Development Tools

Theme path

A new feature in DSpace 1.5 is the ability to try out different themes on a particular page without having to mess with the xmlui.xconf file or needing to restart Tomcat. Two things need to be done in order to apply a theme to any page you are currently looking at.

  1. The following setting in dspace.cfg must be set to true: xmlui.theme.allowoverrides=true
  2. The "themepath" value should be appended to the end of the url. See examples below.
http://scholar.sun.ac.za/?themepath=Classic/
http://scholar.sun.ac.za/?themepath=Reference/
http://scholar.sun.ac.za/?themepath=Mirage/
http://scholar.sun.ac.za/?themepath=Kubrick/
http://scholar.sun.ac.za/?themepath=mobile/

Now check all themes rendering the discovery search page. 

http://scholar.sun.ac.za/discover?themepath=Classic/
http://scholar.sun.ac.za/discover?themepath=Reference/
http://scholar.sun.ac.za/discover?themepath=Mirage/
http://scholar.sun.ac.za/discover?themepath=Kubrick/
http://scholar.sun.ac.za/discover?themepath=mobile/

DRI Expression

You can view the DRI (Digital Repository Interface) elements as follows per page by prepending DRI/. 

http://scholar.sun.ac.za/DRI/discover
http://scholar.sun.ac.za/DRI/statistics-home

XML Expression

You can view the XML elements as follows per page by appending ?XML. 

http://scholar.sun.ac.za/discover?XML
http://scholar.sun.ac.za/statistics-home?XML

Combined Expression

Now lets combine expressions as follows. 

http://scholar.sun.ac.za/DRI/?themepath=Classic/
http://scholar.sun.ac.za/DRI/discover?themepath=Classic/
http://scholar.sun.ac.za/DRI/statistics-home?themepath=Classic/

Getting at the raw XHTML

Moving further down the pipeline, once the XSL templates have been applied and DRI has been converted into XHTML, CSS rules can be applied to the result in order to impart a specific look and feel to the theme. This is the point where Tier 1 development usually begins. When editing the CSS, Manakin theme development is much like any Web development project. You start out with XHTML, a blank CSS and possibly a design in mind, and work with the CSS until the results are satisfactory.

Getting at the raw XHTML output of the XSL processor is easy: all browsers allow the user to look at the page source and save a copy. While the underlying HTML varies for any given DSpace page, the top-level structures like body and header remain consistent. One technique is to go through DSpace page by page, look at the HTML, and create CSS rules as necessary. Alternatively, you can extend the Reference theme that contains CSS selectors for nearly all elements encountered in the HTML structures of Manakin DSpace.

CSS Tips and Tricks

Firefox

Download and install the latest version of Firefox from: 

http://www.mozilla.org/en-US/firefox/new/

Determining current style elements used

Right-click on any part of the website to view the CSS element detail. You can change things in real time per item, in the right hand pane, to see what it will look like.

See screenshots below.

Css-element.png

Css-element-1.png

Theme Repository

Check out the following theme repositories.

References

Retrieved from "http://wiki.lib.sun.ac.za/index.php?title=SUNScholar/XMLUI_Theme/Tutorial&oldid=25584"