Page History
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
Introduction
Mirage has been the default XMLUI theme since DSpace 1.7 and has been used as base point for most custom themes. DSpace 5 includes Mirage 2, also developed by @mire, an upgrade to Mirage built on modern web technologies. The predominant improvement for the end user is the responsive design. Repository admins and developers will also benefit because of the tools available to make both simple and advanced customizations.
Responsive design
A responsive website is a website that rearranges its content to fit in different screen sizes. The main focus is to provide a better overall user experience whether you're browsing on a mobile phone, a tablet or desktop computer. As opposed to using a separate mobile theme, there's only one version of the website that will work everywhere. A simply way to find out what the differences are between a narrow screen and a larger screen in Mirage 2, go to any webpage and resize the browser window. You will notice the sidebar is only shown when the window is large enough, otherwise a menu button is displayed to get to the sidebar options. The theme provides a distinct look for each of the 3 different categories of screen sizes: mobile, tablet and desktop.
Configuration options
Mirage 2 adds two configuration options to dspace.cfg that affect the rendering of bitstream labels on item pages:
...
| Tip | ||
|---|---|---|
| ||
Manage your local Mirage 2 customizations or derived themes in: src/dspace/modules/xmlui-mirage2 Managing your local customizations in this folder comes with the advantage that you ONLY need to keep files you have changed, compared to the standard Mirage 2 folder. To get you started, the contributors have added a _styles.scss file where you can make local scss customizations: dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles |
The Mirage 2 color scheme
The style sheet of Mirage 2 is written in sass and relies on the bootstrap framework. A big advantages of this is the ease of changing the color scheme. By default Mirage 2 has the colors that are familiar from the classic Mirage theme, but another color scheme with only the standard bootstrap colors is also ready and available. In fact this color scheme can be activated by building DSpace using one extra maven profile, mirage2_bootstrap_color_scheme.
The classic mirage theme is a customization of the bootstrap theme. Thanks to the sass variables, a complete color scheme can be conceived by modifying one or two variables. These variables are set in the theme's /styles/classic_mirage_color_scheme/_bootstrap_variables.scss. Copy this file into dspace/modules/xmlui-mirage2/src/main/webapp.themes/Mirage2 and see what happens when you change $brand-primary. More detailed information on how to customize this file can be found in the Mirage 2 readme.
Simple styling customization
Simple customizations imply that they only require custom css. The theme's _styles.scss file is the right place for this. All the lines of css in this file will be included in the theme's style sheet. Even though it's a file with the scss extention, the usual lines of css will work just as well.
Advanced styling customizations
For guidelines on how to include javascript, please read the the Additional Developer documentation.
Automatically retrieving the latest versions of Mirage 2 dependencies
...
Overview
Content Tools