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

From Libopedia
Jump to navigation Jump to search
 
(27 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
This wiki page helps to setup the default colours for the web site.
 
This wiki page helps to setup the default colours for the web site.
  
−
===Step 1 - Define colours CSS===
+
===Step 1 - Review palette preferences===
−
Type the following:
+
See: http://wiki.lib.sun.ac.za/index.php/SUNScholar/Theme/Color_Palette
−
nano $HOME/source/dspace-xmlui-mirage2/src/main/webapp/styles/_style.scss
+
 
 +
===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:
 
Go to the bottom of the file and add the following:
 
<pre>
 
<pre>
−
$gray-base:              #000;
+
/**
−
$gray-darker:            lighten(@gray-base, 13.5%); // #222
+
* Colours CSS
−
$gray-dark:              lighten(@gray-base, 20%);  // #333
+
**/
−
$gray:                  lighten(@gray-base, 33.5%); // #555
 
−
$gray-light:            lighten(@gray-base, 46.7%); // #777
 
−
$gray-lighter:          lighten(@gray-base, 93.5%); // #eee
 
  
−
$brand-primary:          darken(#76273c, 6.5%); // #337ab7
+
$brand-primary:          #60223b;
 +
$brand-warning:          #ff9b33;
 
$brand-success:          #5cb85c;
 
$brand-success:          #5cb85c;
 
$brand-info:            #5bc0de;
 
$brand-info:            #5bc0de;
−
$brand-warning:          #f0ad4e;
 
 
$brand-danger:          #d9534f;
 
$brand-danger:          #d9534f;
 +
 +
$gray-base:              #000;
 +
$gray-darker:            #222;
 +
$gray-dark:              #333;
 +
$gray:                  #555;
 +
$gray-light:            #777;
 +
$gray-lighter:          #eee;
 
</pre>
 
</pre>
 +
Adjust the settings to suit your institution.
  
−
===References===
+
===Step 3 - Define body background color CSS===
−
See: http://wiki.lib.sun.ac.za/index.php/SUNScholar/Theme/Color_Palette
+
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;
Retrieved from "http://wiki.lib.sun.ac.za/index.php?title=SUNScholar/XMLUI_Theme/M2/Customisation/Palette&oldid=42758"