SUNScholar/XMLUI Theme/M2/Customisation

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.

It is assumed that the Mirage 2 theme was installed according to: http://wiki.lib.sun.ac.za/index.php/SUNScholar/XMLUI_Theme/M2.

It is also assumed that you installed DSpace according to: http://wiki.lib.sun.ac.za/index.php/SUNScholar/DSpace.

After you have completed your customisation, you will have to rebuild DSpace.

1. Requirements
2. Introduction Text
3. Institutional Branding
4. Document Structure
5. Banner Logo
6. Palette (colours)
7. Typography (fonts)
8. Footer Design
9. Multiple Themes

Tips

Live Webapp Quick Changes

Type the following:

cd $HOME/webapp/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 instantly.

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

Just remember to make the same changes to the source SASS CSS files in the following folder:

$HOME/source/dspace-xmlui-mirage2/src/main/webapp/styles

Screenshot

1000px

Help Links

• http://wiki.duraspace.org/display/DSDOC5x/Mirage+2+Configuration+and+Customization
• Read about Mirage 2 theme customisation on github.
• Use the custom Maties theme as a bootstrap template.
• http://gianthatworks.com/entry/bootstrap-for-designers
• http://mdo.github.io/code-guide
• https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
• https://github.com/twbs/bootstrap/blob/master/less/variables.less