Difference between revisions of "SUNScholar/XMLUI Theme/M1/Typography"

From Libopedia
Jump to navigation Jump to search
(Created page with "<center> '''Back to Mirage 1 Modification''' </center>")
 
 
(19 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
  '''[[SUNScholar/XMLUI_Theme/M1/Modify|Back to Mirage 1 Modification]]'''
 
  '''[[SUNScholar/XMLUI_Theme/M1/Modify|Back to Mirage 1 Modification]]'''
 
</center>
 
</center>
 +
===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:
 +
<pre>
 +
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold"/>
 +
</pre>
 +
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 <tt>'''font:13px sans-serif;'''</tt> 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:
 +
<pre>
 +
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;
 +
}
 +
</pre>
 +
 +
''Optional:'' You may want to add custom heading colours to each heading style.
 +
 +
See example below.
 +
<pre>
 +
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;
 +
}
 +
</pre>
 +
===Step 4 - Rebuild DSpace===
 +
[[SUNScholar/Rebuild_DSpace|Rebuild DSpace]]
 +
[[Category:Customisation]]

Latest revision as of 13:09, 1 June 2016

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