SUNScholar/XMLUI Theme/M2/Customisation

From Libopedia
Jump to navigation Jump to search
Back to Mirage 2 Theme

Introduction

These wiki pages will assist you in customising the Mirage 2 theme that was introduced with DSpace 5.X.

Please read the requirements first, to gain an understanding of the "bootstrap" framework, then proceed with the rest of the customisation.

This customisation is very basic and is intended for those who have basic web 2.0 design skills.

Please Note:

Procedures

  1. Requirements
  2. Review Common Elements
  3. Front Page Text
  4. Palette (colours)
  5. Typography (fonts)
  6. Banner Logo
  7. Institutional Branding
  8. Document Structure
  9. Footer Design
  10. Extra Customisation (Optional)

Live Webapp Quick Changes

CSS changes

This saves you from having to recompile the whole DSpace webapp just to see what effect a few SASS CSS changes will make.

Type the following:

cd $HOME/webapps/xmlui/themes/Mirage2
compass watch

Now using another login session, you can modify the SASS CSS stylesheets in the styles folders and the main.css file will compile almost instantly.

If you make a serious error, then compass will crash, so you must watch the terminal where compass is running to check for errors and if needed restart compass.

Just remember to make the same changes to the source SASS CSS files, so that your changes will be applied after the next DSpace rebuild:

To synchronise the live webapp CSS styles folder with the source folder, type the following:

rsync -av $HOME/webapps/xmlui/themes/Mirage2/styles/ $HOME/source/dspace-xmlui-mirage2/src/main/webapp/styles/

XSL changes

After modifying the XSL stylesheets in the live webapp XSL folder, just press refresh in your browser to view the changes. If your browser has caching enabled, try to disable caching while doing development work.

Just remember to make the same changes to the source XSL files, so that your changes will be applied after the next DSpace rebuild:

To synchronise the live webapp XSL stylesheet folder with the source folder, type the following:

rsync -av $HOME/webapps/xmlui/themes/Mirage2/xsl/ $HOME/source/dspace-xmlui-mirage2/src/main/webapp/xsl/

Screenshots

Below are screenshots of our modified Mirage2 theme.

Front Page

M2.png

View Item

M2-1.png

View Community

M2-2.png

ORCID Lookup

M2-3.png

Simple Submission Form

M2-4.png

Help Links

Theme Archive

Below are links to archived themes that can be used as examples.

Reference