Difference between revisions of "SUNScholar/XMLUI Theme/M2/Customisation/Palette"
Jump to navigation
Jump to search
(Created page with "<center> '''Back to Mirage 2 Customisation''' </center>") |
|||
| (29 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
'''[[SUNScholar/XMLUI_Theme/M2/Customisation|Back to Mirage 2 Customisation]]''' | '''[[SUNScholar/XMLUI_Theme/M2/Customisation|Back to Mirage 2 Customisation]]''' | ||
</center> | </center> | ||
| + | ===Introduction=== | ||
| + | This wiki page helps to setup the default colours for the web site. | ||
| + | |||
| + | ===Step 1 - Review palette preferences=== | ||
| + | See: http://wiki.lib.sun.ac.za/index.php/SUNScholar/Theme/Color_Palette | ||
| + | |||
| + | ===Step 2 - Define colours CSS=== | ||
| + | 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: | ||
| + | <pre> | ||
| + | /** | ||
| + | * Colours CSS | ||
| + | **/ | ||
| + | |||
| + | $brand-primary: #60223b; | ||
| + | $brand-warning: #ff9b33; | ||
| + | $brand-success: #5cb85c; | ||
| + | $brand-info: #5bc0de; | ||
| + | $brand-danger: #d9534f; | ||
| + | |||
| + | $gray-base: #000; | ||
| + | $gray-darker: #222; | ||
| + | $gray-dark: #333; | ||
| + | $gray: #555; | ||
| + | $gray-light: #777; | ||
| + | $gray-lighter: #eee; | ||
| + | </pre> | ||
| + | Adjust the settings to suit your institution. | ||
| + | |||
| + | ===Step 3 - Define body background color CSS=== | ||
| + | Go to the bottom of the file and add the following: | ||
| + | <pre> | ||
| + | /** | ||
| + | * Body background CSS | ||
| + | **/ | ||
| + | $body-bg: $gray-lighter !default; | ||
| + | </pre> | ||
| + | |||
| + | ===Step 4 - Define anchor colours CSS=== | ||
| + | Go to the bottom of the file and add the following: | ||
| + | <pre> | ||
| + | /** | ||
| + | * Links CSS | ||
| + | **/ | ||
| + | $link-color: $brand-primary; | ||
| + | $link-hover-color: $brand-warning; | ||
| + | $link-hover-decoration: underline; | ||
| + | </pre> | ||
| + | |||
| + | ===Step 5 - Define text colour CSS=== | ||
| + | Go to the bottom of the file and add the following: | ||
| + | <pre> | ||
| + | /** | ||
| + | * Text CSS | ||
| + | **/ | ||
| + | $text-color: $gray-dark !default; | ||
| + | </pre> | ||
| + | [[Category:Customisation]] | ||
Latest revision as of 12:11, 28 May 2016
Back to Mirage 2 Customisation
Contents
Introduction
This wiki page helps to setup the default colours for the web site.
Step 1 - Review palette preferences
See: http://wiki.lib.sun.ac.za/index.php/SUNScholar/Theme/Color_Palette
Step 2 - Define colours CSS
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:
/** * Colours CSS **/ $brand-primary: #60223b; $brand-warning: #ff9b33; $brand-success: #5cb85c; $brand-info: #5bc0de; $brand-danger: #d9534f; $gray-base: #000; $gray-darker: #222; $gray-dark: #333; $gray: #555; $gray-light: #777; $gray-lighter: #eee;
Adjust the settings to suit your institution.
Step 3 - Define body background color CSS
Go to the bottom of the file and add the following:
/** * Body background CSS **/ $body-bg: $gray-lighter !default;
Step 4 - Define anchor colours CSS
Go to the bottom of the file and add the following:
/** * Links CSS **/ $link-color: $brand-primary; $link-hover-color: $brand-warning; $link-hover-decoration: underline;
Step 5 - Define text colour CSS
Go to the bottom of the file and add the following:
/** * Text CSS **/ $text-color: $gray-dark !default;