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:

/**
* Maximum Screen Width
**/
$grid-gutter-width:            20px;
$container-large-desktop:      (1240px + $grid-gutter-width) !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.

/**
 * 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;