Difference between revisions of "SUNScholar/XMLUI Theme/M2/Customisation/Extra Customisation"
Jump to navigation
Jump to search
m |
|||
| (22 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
</center> | </center> | ||
| − | == | + | ==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 | |
Go to the bottom of the file and add the following: | Go to the bottom of the file and add the following: | ||
<pre> | <pre> | ||
/** | /** | ||
| − | * | + | * Buttons CSS |
**/ | **/ | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | $btn-font-weight: normal !default; | |
| − | + | ||
| − | + | $btn-warning-color: #fff !default; | |
| − | + | $btn-warning-bg: $brand-warning !default; | |
| − | + | $btn-warning-border: darken($btn-warning-bg, 5%) !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-warning-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-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; | ||
</pre> | </pre> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | ==[[SUNScholar/XMLUI_Theme/M2/Customisation/Multiple Themes|Multiple Themes]]== | |
| − | |||
| − | |||
| − | + | ==Modify Font Size CSS== | |
| − | + | Absolute font sizing does not scale well with a responsive theme. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | Therefore I, removed all the absolute <tt>'''font-size = XXpx;'''</tt> attributes from all the files in the <tt>'''styles'''</tt> folder and left alone the font size attributes that use relative <tt>'''XXem'''</tt> for font sizing. | |
| − | + | ==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 | |
| − | + | [[Category:Customisation]] | |
| − | See below | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Latest revision as of 12:12, 28 May 2016
Back to Mirage 2 Customisation
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-warning-color: #fff !default; $btn-warning-bg: $brand-warning !default; $btn-warning-border: darken($btn-warning-bg, 5%) !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-warning-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-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;
Multiple Themes
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.
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
