Difference between revisions of "SUNScholar/XMLUI Theme/M2/Customisation/Typography"
Jump to navigation
Jump to search
| (42 intermediate revisions by the same user not shown) | |||
| Line 4: | Line 4: | ||
===Introduction=== | ===Introduction=== | ||
This wiki page has instructions on how to configure the fonts used in your custom Mirage 2 theme. | This wiki page has instructions on how to configure the fonts used in your custom Mirage 2 theme. | ||
| + | |||
| + | At Stellenbosch University we elected to use the free Google fonts. | ||
| + | |||
| + | See: https://developers.google.com/fonts/docs/getting_started and https://github.com/google/fonts | ||
| + | |||
| + | Also see: http://wiki.lib.sun.ac.za/index.php/SUNScholar/Theme/Fonts | ||
===Step 1 - Define fonts reference=== | ===Step 1 - Define fonts reference=== | ||
Modify XSL to use custom fonts. Check the following link: | Modify XSL to use custom fonts. Check the following link: | ||
*https://github.com/DSpace/DSpace/blob/dspace-5.2/dspace-xmlui-mirage2/src/main/webapp/xsl/core/page-structure.xsl#L194 | *https://github.com/DSpace/DSpace/blob/dspace-5.2/dspace-xmlui-mirage2/src/main/webapp/xsl/core/page-structure.xsl#L194 | ||
| − | + | Edit the following file: | |
| − | nano $HOME/ | + | nano $HOME/{{Source}}/dspace-xmlui-mirage2/src/main/webapp/xsl/core/page-structure.xsl |
Go to line 194 and insert the following: | Go to line 194 and insert the following: | ||
<pre> | <pre> | ||
| − | <link | + | <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'/> |
</pre> | </pre> | ||
Make sure to indent and format the insertion correctly. | Make sure to indent and format the insertion correctly. | ||
===Step 2 - Define fonts CSS=== | ===Step 2 - Define fonts CSS=== | ||
| − | + | Edit the following file: | |
| − | + | nano $HOME/{{Source}}/dspace-xmlui-mirage2/src/main/webapp/styles/classic_mirage_color_scheme/_bootstrap_variables.scss | |
| − | |||
| − | nano $HOME/ | ||
Go to the bottom of the file and add the following: | Go to the bottom of the file and add the following: | ||
| Line 28: | Line 32: | ||
**/ | **/ | ||
| − | $font-family-base: | + | $font-size-base: 13px; |
| − | $font-family-serif: | + | $font-size-large: 13px; |
| − | $font-family-sans-serif: | + | $font-size-small: 12px; |
| − | $font-family-monospace: | + | |
| + | $font-family-base: 'Ubuntu', Verdana, 'Trebuchet MS', Arial; | ||
| + | $font-family-serif: 'Ubuntu', Verdana, 'Trebuchet MS', Arial, serif; | ||
| + | $font-family-sans-serif: 'Ubuntu', Verdana, 'Trebuchet MS', Arial, sans-serif; | ||
| + | $font-family-monospace: 'Ubuntu', 'Andale Mono', 'Courier New', monospace; | ||
| − | |||
| − | |||
| − | |||
</pre> | </pre> | ||
===Step 3 - Define font headings CSS=== | ===Step 3 - Define font headings CSS=== | ||
| − | + | Edit the following file: | |
| − | nano $HOME/ | + | 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> | ||
| − | ** | + | /** |
* Headings CSS | * Headings CSS | ||
**/ | **/ | ||
| − | $font-size-h1: | + | $font-size-h1: 1.0em; |
| − | $font-size-h2: 1. | + | $font-size-h2: 1.0em; |
| − | $font-size-h3: 1. | + | $font-size-h3: 1.0em; |
| − | $font-size-h4: 1. | + | $font-size-h4: 1.0em; |
$font-size-h5: 1.0em; | $font-size-h5: 1.0em; | ||
| − | $font-size-h6: | + | $font-size-h6: 1.0em; |
$headings-font-family: inherit; | $headings-font-family: inherit; | ||
| − | $headings-font-weight: | + | $headings-font-weight: 700; |
| − | $headings-line-height: 1. | + | $headings-line-height: 1.0; |
| − | $headings-color: | + | $headings-color: $gray-dark !default; |
</pre> | </pre> | ||
Adjust the settings to suit your institution. | Adjust the settings to suit your institution. | ||
| + | [[Category:Customisation]] | ||
Latest revision as of 12:11, 28 May 2016
Back to Mirage 2 Customisation
Contents
Introduction
This wiki page has instructions on how to configure the fonts used in your custom Mirage 2 theme.
At Stellenbosch University we elected to use the free Google fonts.
See: https://developers.google.com/fonts/docs/getting_started and https://github.com/google/fonts
Also see: http://wiki.lib.sun.ac.za/index.php/SUNScholar/Theme/Fonts
Step 1 - Define fonts reference
Modify XSL to use custom fonts. Check the following link:
Edit the following file:
nano $HOME/source/dspace-xmlui-mirage2/src/main/webapp/xsl/core/page-structure.xsl
Go to line 194 and insert the following:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'/>
Make sure to indent and format the insertion correctly.
Step 2 - Define fonts 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:
/** * Fonts CSS **/ $font-size-base: 13px; $font-size-large: 13px; $font-size-small: 12px; $font-family-base: 'Ubuntu', Verdana, 'Trebuchet MS', Arial; $font-family-serif: 'Ubuntu', Verdana, 'Trebuchet MS', Arial, serif; $font-family-sans-serif: 'Ubuntu', Verdana, 'Trebuchet MS', Arial, sans-serif; $font-family-monospace: 'Ubuntu', 'Andale Mono', 'Courier New', monospace;
Step 3 - Define font headings 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:
/** * Headings CSS **/ $font-size-h1: 1.0em; $font-size-h2: 1.0em; $font-size-h3: 1.0em; $font-size-h4: 1.0em; $font-size-h5: 1.0em; $font-size-h6: 1.0em; $headings-font-family: inherit; $headings-font-weight: 700; $headings-line-height: 1.0; $headings-color: $gray-dark !default;
Adjust the settings to suit your institution.
