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

From Libopedia
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

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;