University of Otago Subsite Branding
The University of Otago subsites follow this branding guide. There are brand restrictions on the way the University logo can be used and which colours are appropriate in the main template design. The template also dictates the sizes of images that can be used and the font choices and sizes.
Subsite Colour Palette
- Blue
- #031F69
- Yellow
- #FFCC33
- Stone (dark)
- #95A189
- Stone (medium)
- #D9DDCC
- Stone (light)
- #E9ECE3
- Red
- #990000
- Heading one
- #333333
- Paragraph
- #333333
- Link
- #003399
- Link hover
- #003366
Stylesheets
- Reset
- @import url("http://www.otago.ac.nz/css/reset.css");
- Icons
- @import url("http://www.otago.ac.nz/css/icons.css");
- 960 Grid
- @import url("http://www.otago.ac.nz/css/960.css");
- Text
- @import url("http://www.otago.ac.nz/css/text.css");
Javascript
jQuery Include
The jQuery library must be included in the head of the webpage to use its features:
http://www.otago.ac.nz/prodcons/fragments/otg_assets/javascript/jquery.min.js
FancyBox
A jQuery plugin that provides lightbox modal functionality to webpages:
http://www.otago.ac.nz/prodcons/fragments/otg_assets/javascript/fancybox/jquery.fancybox_min.css
http://www.otago.ac.nz/prodcons/fragments/otg_assets/javascript/fancybox/jquery.fancybox.pack.js
http://www.otago.ac.nz/prodcons/fragments/otg_assets/javascript/fancybox/jquery.mousewheel.pack.js
Cycle Images
http://www.otago.ac.nz/prodcons/fragments/otg_assets/javascript/jquery.cycle.min.js
Code Sample
<script type="text/javascript" src="http://INSERT INCLUDE FILE”></script>
University Logo
To ensure the University's logo is applied consistently, please reference this image file directly from:
http://www.otago.ac.nz/prodcons/fragments/subsite_assets/gfx/logo.gif
Code example:
<img src=
"http://www.otago.ac.nz/prodcons/fragments/subsite_assets/gfx/logo.gif" alt="University of Otago logo." width="160" height="80" />
Image Sizes
Three pre-defined image width sizes are used: 160px, 220px and full width (520px).These are floated right by default. A large range of university photography is available in the Image Library (http://images.otago.ac.nz).
960px Grid
Otago subsites are structured around a 16 column, 960px grid framework. Navigation: 3 columns; Content: 9 columns; Righthand column: 4 columns.
Fonts
Web content should be set in: Georgia (serif) for headings and Verdana (sans-serif) for body copy.
If text forms part of an image, for example a banner, use: Minion Pro (serif) or Gill Sans (light and bold) (sans-serif)