Difference between revisions of "SUNScholar/XMLUI Theme"

From Libopedia
Jump to navigation Jump to search
m (1 revision)
(No difference)

Revision as of 10:54, 15 August 2010


This page describes methods for customising your Dspace instance using the Manakin interface. This procedure is much easier to achieve if you build yourself an Ubuntu desktop computer to use first.

View the following presentations for a better understanding:

Read the following documentation:

  1. Check: http://wiki.dspace.org/index.php/Create_a_new_theme_(Manakin)
  2. Then: http://wiki.dspace.org/index.php/Install_a_theme
  3. And rebuild: http://wiki.dspace.org/index.php/Rebuild_DSpace

If you use Mozilla Firefox then install the Firebug extension to help you with the design of your Manakin themed repository.

Login to the remote server

Log into your Dspace server as the "dspace" user always.

To use the Nautilus file manager and gedit editor


How to connect remotely to the server using the Nautlius file browser. See below for instructons. (This is not easily possible using Microsoft Windows)

  1. On your Ubuntu desktop computer, click on: Places => Connect to Server, a dialog box pops up.
  2. Click on Service Type and select SSH.
  3. Fill in the fields correctly. See the screenshot above for an example. Replace server with your servers hostname.

Open files with "gedit" for editing by "right-clicking" on them and selecting "Open with" and use "gedit".

To use the console/xterm and the nano editor

On your Ubuntu desktop computer, click on: Applications => Accessories => Terminal to open a command line terminal. Type as follows to connect to the server.

ssh dspace@%hostname%

Replace %hostname% with the hostname of your server.

Setup "Mytheme"

We will be using the "modules" method to create a custom theme.

The default folder is: /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/themes/[custom-theme-dir]

Copy the "Reference" theme to "Mytheme"

Type the following.

mkdir /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/themes
mkdir /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/themes/Mytheme
cd /home/dspace/dspace-1.5.2-src-release/dspace-xmlui/dspace-xmlui-webapp/src/main/webapp/themes
cp -R Reference /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/themes/Mytheme

Ensure the "dspace" user owns your theme folder by typing as follows:

cd /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/themes
ls -l

You should get the following output:

dspace@server:~/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/themes$ ls -l
drwxr-xr-x 4 dspace dspace 4096 2009-09-19 17:41 Mytheme

If "Mytheme" is owned by anybody else, remove it as the root user as follows and start again as the "dspace" user !!

sudo rm -rf /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/themes/Mytheme

Modify the "xmlui.xconf" file to use "My theme"

Type the following to go to your Dspace config directory.

cd /home/dspace/dspace-1.5.2-src-release/dspace/config

Type the following to edit the Dspace XMLUI config file.

nano xmlui.xconf

Add the following to "xmlui.xconf" file in the themes section using copy and paste with firefox and nano. Make sure to comment out all other theme references !!

<theme name="My theme" path="Mytheme/" regex=".*" />

Modify the "sitemap.xmap" file to use "My theme"

Type the following to change directory to the "Mytheme" folder.

cd /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/themes/Mytheme

Modify the sitemap.xmap config file for your new theme by typing the following.

nano sitemap.xmap

Change the "theme-path" and "theme-name" parameters in the sitemap.xmap file using the "nano" editor.

       <theme-name>My theme</theme-name>

Save the file by pressing CTL+O and then CTL+X on the keyboard.

Modify "Mytheme"

Get a copy of the logo you want to use and resize it to have a "height" of 80px only and no more than 700px "width". Take note of the resultant "width" of the image in pixels after re-sizing.

Save it to a portable usb "stick" then go to your Ubuntu desktop computer, login as the dspace user and plug in the stick. A folder dialog should pop-up displaying the contents of usb stick.

Upload your institution's logo to the following images folder. Use the "copy" and "paste" functions of the nautilus file browser. Remove/delete the dspace-blue.gif file.


Go to the following folder. Open the file "style.css".


Go the "Header" section in the file. See below for an example.

div#ds-header  a span#ds-header-logo {
	width: 520px;
	height: 80px;
	float: left;
	background-image: url("../images/us-logo.jpg");
	background-repeat: no-repeat;
	background-position: 85% 40%;
	color: inherit;
	background-color: white;

Modify the following:

width: 520px;

This should match the "width" of your logo in pixels and should not be more than 700px.

Modify the following:

float: left;

The logo should placed left in the box.

Modify the following:

background-image: url("../images/us-logo.jpg");

This should match the name of the image you uploaded.

Modify "style.css" to use your font colours

While we are editing the style.css file we can modify the heading colours as follows:

Search and replace all instances of:

color: #DF6E00;

With the following:

color: #780A0A;

Search and replace all instances of:

color: rgb(223, 110, 0);

With the following:

color: #780A0A;

Search and replace all instances of:

color: rgb(210, 100, 0);

With the following:

color: #780A0A;

Save the file in "gedit".

Structural changes

Customise the front page news

Open the following file:

nano /home/dspace/dspace-1.5.2-src-release/dspace/config/news-xmlui.xml

Modify the content as desired and save the file.

Disable the top "Login" button

mkdir /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/themes
mkdir /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/themes/dri2xhtml
cd /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/themes/dri2xhtml
cp /home/dspace/dspace-1.5.2-src-release/dspace-xmlui/dspace-xmlui-webapp/src/main/webapp/themes/dri2xhtml/structural.xsl .
nano /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/themes/dri2xhtml/structural.xsl

Modify the structural.xsl file and comment out the following. ( About line: 310 )

                <xsl:when test="/dri:document/dri:meta/dri:userMeta/@authenticated = 'yes'">
                    <div id="ds-user-box">
                                <xsl:attribute name="href">
                                    <xsl:value-of select="/dri:document/dri:meta/dri:userMeta/
                                        dri:metadata[@element='identifier' and @qualifier='url']"/>
                                <xsl:value-of select="/dri:document/dri:meta/dri:userMeta/
                                    dri:metadata[@element='identifier' and @qualifier='firstName']"/>
                                <xsl:text> </xsl:text>
                                <xsl:value-of select="/dri:document/dri:meta/dri:userMeta/
                                    dri:metadata[@element='identifier' and @qualifier='lastName']"/>
                            <xsl:text> | </xsl:text>
                                <xsl:attribute name="href">
                                    <xsl:value-of select="/dri:document/dri:meta/dri:userMeta/
                                        dri:metadata[@element='identifier' and @qualifier='logoutURL']"/>
                    <div id="ds-user-box">
                                <xsl:attribute name="href">
                                    <xsl:value-of select="/dri:document/dri:meta/dri:userMeta/
                                        dri:metadata[@element='identifier' and @qualifier='loginURL']"/>

Change the heading font sizes

Go to line 1363 approx and change the formula which calculates the heading sizes.

After $head_count * and before - string-length is a number of 80, change it to 200 as follows:

 <xsl:variable name="font-sizing" select="365 - $head_count * 200 - string-length(current())"></xsl:variable>

Save the file in "gedit".

Remove the "FrontPage" search

Create a custom modules folder:

mkdir /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/resources/aspects/ArtifactBrowser

Copy the sitemap.xmap file from the sources folder:

cd /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/resources/aspects/ArtifactBrowser
cp /home/dspace/dspace-1.5.2-src-release/dspace-xmlui/dspace-xmlui-api/src/main/resources/aspects/ArtifactBrowser/sitemap.xmap .

Open the following file:

nano /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/resources/aspects/ArtifactBrowser/sitemap.xmap

Delete the following transformer:

<map:transformer name="FrontPageSearch" src="org.dspace.app.xmlui.aspect.artifactbrowser.FrontPageSearch"/>

At about line 66.

And delete the following transform:

<map:transform type="FrontPageSearch"/>

At about line 119.

Apply custom text messages

mkdir /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/i18n
cd /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/i18n
cp /home/dspace/dspace-1.5.2-src-release/dspace-xmlui/dspace-xmlui-webapp/src/main/webapp/i18n/messages.xml .
nano /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/i18n/messages.xml

Search for dri2xhtml by pressing CTL+F on the keyboard.

Browse through the list of dri2xhtml text messages and modify accordingly.

Create custom global static content

The XMLUI user interface supports the addition of globally static content (as well as static content within individual themes).

mkdir /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/static
cd /home/dspace/dspace-1.5.2-src-release/dspace/modules/xmlui/src/main/webapp/static

You may add static HTML (*.html) content to this directory, as needed for your installation.

Any static HTML content you add to this directory may also reference static content (e.g. CSS, Javascript, Images, etc.) from the same folder. You may reference other static content from your static HTML files similar to the following:

 <link href="./static/mystyle.css" rel="stylesheet" type="text/css"/>
 <img src="./static/images/static-image.gif" alt="Static image in /static/images/ directory"/>
 <img src="./static/static-image.jpg" alt="Static image in /static/ directory"/>

View new look

First repackage using a rebuild script.

Then refresh your browser XMLUI interface of Dspace, by typing the following in the address bar.


Replace %hostname% with the hostname of your server.

Example Screenshot

See an example of a modified XMLUI below.


The excerise to modify the footer is left up to you. There should be enough clues from the procedures above to help you do it. The footer was left intact as an attribution to the Dspace and Manakin developers. Tip: Check the messages.xml file !

Example command-line XSLT transformer: SAXON

Copy the JAR file across to your home directory.

cd /home/dspace
wget http://services.lib.sun.ac.za/files/temp/SAXON7.JAR

Run the JAR file to see its correct usage syntax.

java -jar /home/dspace/SAXON7.JAR


Using the modules overlay method

Using the Adobe Flash Server



SU Customisation

Click on the heading above.