Theme

Overview

When we talk about the theme of our websites, we’re generally referring to how elements of the page look or are styled. For example, this includes:

  • font choices—family, size, color, etc.
  • the style of boxes that highlight regions, usually of text
  • image borders—size, color, etc.

The theme is administered by the Office of Planning and Communications, and decisions about the theme are made by this office with input from the Web Advisory Council and other key parties. The theme is also guided by the UCSF brand identity for websites, which is managed by University Relations.

Identity Retheme Project

In 2017, five main School of Pharmacy web properties will be rethemed to closer adhere to current brand identity standards. This work is performed by the Office of Planning and Communications. We do not anticipate that content editors on our system will be affected by this project; they just need to be aware that it is happening.

Completed changes

  • Change from hexagon accent art to square or box accent art.
  • Switch homepage hero typefaces from Preface and Verdana to Granjon and Helvetica/Arial.
  • Implement a new favicon (which is the icon that appears in your browser usually in the browser tab).
  • Change the homepage carousel from using separate index indicators to using left and right arrows.
  • Rework some visual helpers from raster to vector to improve image quality (e.g., the homepage links for Education and Departments).

Forthcoming changes

  • Body text font will change from Verdana to Helvetica/Arial.
  • Body text font sizes will be larger in response to a trend of increasing screen sizes.
  • Improved icon quality for nearly all icons.
  • New header styling.
  • Improved line spacing and spacing between paragraphs.
  • Hyphenation support when used with a supporting browser.
  • Improved link styling.

and more.

Paragraph and box styles

Here’s a list of paragraph and box styles available to content editors.

This paragraph uses the paragraph style called emphatic. In the edit interface toolbar, select the Styles picklist, then select Emphatic.

This paragraph uses the box style called Eyecatching. In the edit interface toolbar, select the Styles picklist, then select Eyecatching.

This paragraph uses the box style called fine print. In the edit interface toolbar, select the Styles picklist, then select Fine print.

This paragraph uses the box style called box-neutral. In the edit interface toolbar, select the Styles picklist, then select box-neutral.
This paragraph uses the box style called box-outline. In the edit interface toolbar, select the Styles picklist, then select box-outline.
This paragraph uses the box styles called box-neutral and box-outline. Currently there is no recommended, easy way to insert this style. If you want to use this, please submit a help request.