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

From Libopedia
Jump to navigation Jump to search
Line 37: Line 37:
 
<pre>
 
<pre>
 
$font-size-base:          10px;
 
$font-size-base:          10px;
−
$font-size-large:        ceil((@font-size-base * 1.25)); // ~18px
+
$font-size-large:        13px;
−
$font-size-small:        ceil((@font-size-base * 0.85)); // ~12px
+
$font-size-small:        8px;
  
−
$font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
+
$font-size-h1:            2.5em;  
−
$font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
+
$font-size-h2:            2.2em;  
−
$font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
+
$font-size-h3:            1.8em;  
−
$font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
+
$font-size-h4:            1.2em;  
−
$font-size-h5:            ceil((@font-size-base * 1.00));
+
$font-size-h5:            1.0em;
−
$font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
+
$font-size-h6:            0.8em;
  
 
$headings-font-family:    inherit;
 
$headings-font-family:    inherit;

Revision as of 14:33, 26 May 2015

Back to Mirage 2 Customisation

Introduction

This wiki page has instructions on how to configure the fonts used in your custom Mirage 2 theme.

Step 1 - Define fonts reference

Modify XSL to use custom fonts. Check the following link:

This is equivalent to: 

nano $HOME/source/dspace-xmlui-mirage2/src/main/webapp/xsl/core/page-structure.xsl

Go to line 194 and insert the following: 

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold"/>

Make sure to indent and format the insertion correctly.

Step 2 - Define fonts CSS

Modify CSS to use the custom fonts. Check the following link:

This is equivalent to: 

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: 

$font-family-base:       "Ubuntu","Bitstream Vera Sans","DejaVu Sans",Tahoma;
$font-family-serif:      "Ubuntu","Bitstream Vera Sans","DejaVu Sans",Tahoma,serif;
$font-family-sans-serif: "Ubuntu","Bitstream Vera Sans","DejaVu Sans",Tahoma,sans-serif;
$font-family-monospace:  "Ubuntu","Courier New",monospace;

Step 3 - Define font headings CSS

Type the following: 

 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: 

$font-size-base:          10px;
$font-size-large:         13px;
$font-size-small:         8px;

$font-size-h1:            2.5em; 
$font-size-h2:            2.2em; 
$font-size-h3:            1.8em; 
$font-size-h4:            1.2em; 
$font-size-h5:            1.0em;
$font-size-h6:            0.8em;

$headings-font-family:    inherit;
$headings-font-weight:    500;
$headings-line-height:    1.1;
$headings-color:          inherit;

Adjust the settings to suit you.

Retrieved from "http://wiki.lib.sun.ac.za/index.php?title=SUNScholar/XMLUI_Theme/M2/Customisation/Typography&oldid=36674"