Header

There are two header styles available:

Standard header

The Standard header is designed to accomodate a number of elements within the header (there are nine elements which can  be included in your site’s header area) and consist of three 'rows'; topbar, branding and navigation:

If you have most header elements enabled, the Standard header is likely to be an apporpriate choice.

The Standard header includes the option to set the Site Logo(s) to overlap the topbar.

Minimal header

The Minimal header only consists of two rows, whereby the navigation is incorportated into the branding row:

This arrangement makes for a cleaner design and works best when you have fewer header elements enabled.

There are two styles available for your search search box, which appears on your site header and on the search results page.

One style defines the text input area and submit button using background colour and places the submit button to the right of the input field, the other style defines the input area with an underline colour and places the submit button to the left of the input field.

[1] University Crests

The site logo options enable you to choose whether or not you wish to display the University Crest in your header, and if so which one. There are four to choose from: square or rectagle, with or without a white border (recommended for better definition on dark backgrounds). Which you choose will depend on your overall site design, though you should also take into consideration the University's branding guidelines (PDF).

[2] Site logo

You also have the option to upload a custom log for your site. This image will be scaled to a maximum height of 115px, while mainataining the aspect ratio of the image. Uploading images that have a very wide (landscape) aspect ratio may cause layout issues at lower screen widths, it is therefore recommended that you don't upload images that with an aspect ratio greater than 2:1.

[3] Mobile logo

It is also possible to provide a different logo image for use on mobiles and tablets (screens less than 993px wide), as well as in sticky menus. Images will be scaled to a height of 80px for tablet sizing/sticky menus, and 40px for mobile devices. This allows you to provide a version of your logo approproiate for use at a smaller scale, for example you may wish to exclude any smaller pieces of text such as a strapline.

The Social media links section allows you to provide links to any social media accounts associated with your site and allocate an approporiate icon for the link. Any existing social lnks will be listed:

You can control the order of the links by dragging items up and down the list by the drag handles (1) and clicking on 'Save order' (2).

To add a social media link, click the 'Add new social link' button (remember to save any reordring you have done beforehand). This will take you to the Create Social Media Link form page:

The Title field will be be the name used in the list of Social Links mentioned above. Note that this is not the text that will be used in the link itself.

The Icon name is used to select an approporiate Font Awesome icon for your link. The form provides a link the Font Awesome cheatsheet listing all available icons and their names. Most popular social media platforms are available. Your chosen icon is what will be displayed on your site.

The Link element consists of two fields, the Title field will be included in the Title attribute of the link (which is important for both accessibility and SEO), the Link field is the url of your social media account (e.g. https://twitter.com/ox_it)

The Header links section allows you to place links to approporiate websites and pages on your own site which are regularly accessed by your end-users in the header of your site and allocate an approporiate icon for the link. Any existing header links will be listed:

You can control the order of the links by dragging items up and down the list by the drag handles (1) and clicking on 'Save order' (2).

To add a header link click the 'Add new header link' button (remember to save any reordring you have done beforehand). This will take you to the Create Header Link form page:

The Title field will be be the name used in the list of Header Links mentioned above. Note that this is not the text that will be used in the link itself.

The Icon name is used to select an approporiate Font Awesome icon for your link. The form provides a link the Font Awesome cheatsheet listing all available icons and their names. Your chosen icon is will be displayed along with the link text.

The Link element consists of two fields, the Title field will be the shown as the text for the link.

*Header top bar and footer background image configuration is available on request. Site Administrators can request the functionality from the Mosaic web platform team by contacting oxfordmosaic@it.ox.ac.uk.

A background image can be applied to the header top bar. When applied, the background image overrides the colour setting that is set for the top bar background; the text colour setting still applies. The background image is set to tile (repeat) across the region it has been placed in. Therefore, if a small image is uploaded, it will repeat to fill the area.

Please note that when placing a background image, you need to consider the legibility of the text that will appear on top of it. To ensure text legibility, we recommend that you:

• use images that are predominantly the same tone (i.e. mostly dark or most light)
• use images that are either mostly dark or mostly light (avoid images which are mostly mid-tone)
• set the text colour of the text appropriately (i.e. very dark text on a light image, or very light text on a dark image)
• once in place, review your background image / text colour combination to assess the legibility

Add a top bar background image

To add a background image to the top bar:

• click 'Select a top bar background image'
• on the top bar and footer background images page, under the 'Top bar background image' section, click 'Browse'
  
  
• select an image from the Media Browser or upload a new image
• once the preview has loaded, click 'Save configuration'