Documentation

Customize fonts & headings

Customize fonts & headings using the Theme page

The Fonts & headings section allows you to change the font families and colors of text throughout the site. Font colors can be customized for various types of text (e.g. links, page body, future/private indicators).

Font family

There are 10 font families available:
  • Fira Sans, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Dejavu Sans, Helvetica, Arial, sans-serif
  • Arial, Helvetica, sans-serif
  • Tahoma, Verdana, Arial, Helvetica, sans-serif
  • Trebuchet MS, Verdana, Helvetica, Arial
  • Lucida Grande, Lucida Sans, Arial, sans-serif
  • Georgia, Times New Roman, Times, serif
  • Helvetica, Arial, sans-serif
  • Palatino Linotype, Book Antiqua, Palatino, Times New Roman, Times, serif
  • Trebuchet MS, Lucida Sans, Arial, sans-serif
  • Verdana, Tahoma, Arial, Helvetica, sans-serif
These function as a priority sequence of fonts to display to the user. If the first is not available on a user's computer then the next available in the list will be presented.

You can further customize your intranet by adding additional web fonts. See add custom web fonts for more information.

Font colors

Colors can be specified by entering the HEX value for the desired color (please see HTML Colors for more info). You can also create your own custom colors by clicking on the currently chosen one associated with a particular field. This will bring up the color customizer.
 
9.0Admin105926ColorCustomizer.png

To close the color customizer without making changes simply click anywhere outside the dialog box area.

Font color fields

The following explains what specific text each font color field applies to:

  • Body copy: Many areas of text - includes page body content and comments
  • Links: Links in body copy, links to page titles in Activity streams, user profiles in News, and the page path to the current page in the SuperNav.
  • Links - visited: links that have been visited (does not affect visited posts on parent News\Blog\Forum pages)
  • Links - hover: links turn this color when the user hovers over them
The following explains what specific areas each button field applies to:
  • Buttons: Background of Action buttons, or Action text, on the site and in pop-up windows. Header colour of pop-up windows.
  • Buttons - hover: Buttons and Action text turn this color when the user hovers over them.
The following explains what specific areas each page status indicator field applies to:
  • Private: text color of the label "Private" (shows beside the page title of pages whose security settings are set to private)
  • Future: text color of the label "Future" (shows beside the page title of future published pages before the published date)
  • New: text color of the label "New" (shows beside the page title of new pages for the time period specified by the config setting dates.maxAge.newItem)
  • Updated: text color of the label "Updated" (shows beside the page title of updated pages for the time period specified by the config setting dates.maxAge.updatedItem)

fonts%20theme.png

Page headings

Under this heading you can specify the font family, color, and weight of page headings. This applies to the title of pages only when viewing a page (not in navigation or news), and to user names when on a profile page.

Page header gradients

The Page header gradient shows on pages where no page header image has been added. You can add multiple different gradient start and end colours for users to choose from on Edit page. The first gradient of the four will be the default gradient used when no page header image has been added.

page%20header%20colours.png

See Page header images for information about using images and photos from galleries in page headers.