Difference between revisions of "SUNScholar/XMLUI Theme/M2/Customisation/Extra Customisation"

From Libopedia
Jump to navigation Jump to search
Line 9: Line 9:
  
 
==Create Custom Buttons==
 
==Create Custom Buttons==
 +
Modern web design demands that each "call-to-action" in a web page be made very clearly obvious to the user. Bootstrap buttons are perfect for highlighting these actions.
 +
 
Edit the following file:
 
Edit the following file:
 
   nano $HOME/{{Source}}/dspace-xmlui-mirage2/src/main/webapp/styles/classic_mirage_color_scheme/_bootstrap_variables.scss
 
   nano $HOME/{{Source}}/dspace-xmlui-mirage2/src/main/webapp/styles/classic_mirage_color_scheme/_bootstrap_variables.scss

Revision as of 00:44, 22 June 2015

Back to Mirage 2 Customisation

Modify Font Size CSS

Absolute font sizing does not scale well with a responsive theme.

Therefore I, removed all the absolute font-size = XXpx; attributes from all the files in the styles folder and left alone the font size attributes that use relative XXem for font sizing.

Create Custom Buttons

Modern web design demands that each "call-to-action" in a web page be made very clearly obvious to the user. Bootstrap buttons are perfect for highlighting these actions.

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:

/**
* Buttons CSS
**/

$btn-font-weight:                normal !default;

$btn-default-color:              #333 !default;
$btn-default-bg:                 #fff !default;
$btn-default-border:             #ccc !default;

$btn-primary-color:              #fff !default;
$btn-primary-bg:                 $brand-primary !default;
$btn-primary-border:             darken($btn-primary-bg, 5%) !default;

$btn-success-color:              #fff !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             darken($btn-success-bg, 5%) !default;

$btn-info-color:                 #fff !default;
$btn-info-bg:                    $brand-info !default;
$btn-info-border:                darken($btn-info-bg, 5%) !default;

$btn-warning-color:              #fff !default;
$btn-warning-bg:                 $brand-warning !default;
$btn-warning-border:             darken($btn-warning-bg, 5%) !default;

$btn-danger-color:               #fff !default;
$btn-danger-bg:                  $brand-danger !default;
$btn-danger-border:              darken($btn-danger-bg, 5%) !default;

$btn-link-disabled-color:        $gray-light !default;

Github Repository

All the changes that were made to customise Mirage 2 for Stellenbosch University library are available on github.

See link below.

https://github.com/hamslaai/Mirage2