SUNScholar/XMLUI Theme/M1/Typography

Back to Mirage 1 Modification

Introduction

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

At Stellenbosch University we elected to use the free Ubuntu fonts.

Also see: http://wiki.lib.sun.ac.za/index.php/SUNScholar/Theme/Fonts

Step 1 - Define fonts XSL

Edit the following file:

nano $HOME/source/dspace/modules/xmlui/src/main/webapp/themes/SUNScholar/lib/xsl/core/page-structure.xsl

At line 170, after the comment, 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

Edit the following file:

nano $HOME/source/dspace/modules/xmlui/src/main/webapp/themes/SUNScholar/lib/css/reset.css

At line 77, replace font:13px sans-serif; with the following:

font:13px Ubuntu, sans-serif;

Step 3 - Define headings CSS

Edit the following file:

nano $HOME/source/dspace/modules/xmlui/src/main/webapp/themes/SUNScholar/lib/css/style.css

From line 15, change heading sizes to match the following:

h1 {
    font-size: 1.4em;
    color: #76273C;
    text-align: justify;
}

h2{
    font-size: 1.2em;
}

h3 {
    font-size: 1.0em;
}

h4 {
    font-size: 1.0em;
}

h5, h6 {
    font-size: 0.8em;
}

Optional: You may want to add custom heading colours to each heading style.

See example below.

h1 {
    font-size: 1.4em;
    color: #333;
    text-align: justify;
}

h2{
    font-size: 1.2em;
    color: #444;
}

h3 {
    font-size: 1.0em;
    color: #555;
}

h4 {
    font-size: 1.0em;
    color: #555;
}

h5, h6 {
    font-size: 0.8em;
    color: #555;
}

Step 4 - Rebuild DSpace

Rebuild DSpace