SUNScholar/XMLUI Theme/M2/Customisation/Extra Customisation
Back to Mirage 2 Customisation
Modify Font Size CSS
Absolute font sizing does not scale well with a responsive theme.
Left the font size size attributes that use XXem for font sizing.
Removed all the CCS font-size = XXpx; attributes from all the files in the styles folder.
Modify Screen Size Breakpoints
Edit the following file:
nano $HOME/source/dspace-xmlui-mirage2/src/main/webapp/styles/classic_mirage_color_scheme/_bootstrap_variables.scss
Go to the bottom of the file and add the following:
/** Extra Small **/
$screen-xs: 480px !default;
/** Small **/
$screen-sm: 768px !default;
/** Medium **/
$screen-md: 992px !default;
/** Large **/
$screen-lg: 1200px !default;
Refer to: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
==Modify Item View CSS==
Edit the following file:
nano $HOME/{{Source}}/dspace-xmlui-mirage2/src/main/webapp/styles/classic_mirage_color_scheme/_item-lists.scss
See below for modified file.
<pre>
/**
* The contents of this file are subject to the license and copyright
* detailed in the LICENSE and NOTICE files at the root of the source
* tree and available online at
*
* http://www.dspace.org/license/
*/
.artifact-title {
margin-bottom: 0px;
}
.artifact-abstract {
text-align: justify;
}
.thumbnail {
.glyphicon.glyphicon-file {
color: $gray-lighter;
margin-left: -10px;
}
}
.item-wrapper.row {
@media(max-width: $screen-xs-max) {
padding-bottom: 5px;
border-bottom: 1px solid $gray-lighter;
}
}
Modify DSpace Variables CSS
Edit the following file:
nano $HOME/source/dspace-xmlui-mirage2/src/main/webapp/styles/classic_mirage_color_scheme/_dspace_variables.scss
See below for modified file
/** * The contents of this file are subject to the license and copyright * detailed in the LICENSE and NOTICE files at the root of the source * tree and available online at * * http://www.dspace.org/license/ */ // Extra DSpace variables // ---------------------- $almost-white: #f7f7f7 !default; $center-section-padding-top: 20px; $center-section-padding-bottom: 20px;