Portland Community College | Portland, Oregon Portland Community College

Site title

The site title area includes the title of the current site, and contact information for the department or resource. The title of the current page appears below, in the content area. (We’re moving away from this section displaying the page title – you may still see the page title instead of the site title until we get the entire website moved into WordPress).

Contact information should follow the format (including the vertical line spacers): Location (campus or center, building, room) | Contact name (link to Staff Directory) | Phone | Other

Development info

  • Stylesheet location for the site title area: /source-v6/styles/layout/_header.scss
  • Stylesheet location for the background image: /source-v6/styles/base/_mixins.scss
  • For information about creating and using custom background images, see below.

Styling

The site title always uses PCC sapphire as a background color, but it’s possible to use a custom background image (the diamond pattern is the default image). The image used for the site title also displays behind the sidebar navigation heading.

The background images receive a series of color treatments. This way, they remain recognizable but become a supportive UI element. They shouldn’t compete with the content.

Responsive behavior

The site title and contact information don’t change as the screen size changes, but the background image does. The default background image has three different versions that display for large, medium, and small screens. This keeps the diamond correctly placed and sized for all screen sizes, and cuts down on data usage for mobile devices and slow connections.

Custom background images

Programs, departments and resources can have a custom background image, with approval.

Creating a custom image

Custom background images can’t include multiple images, so make sure the image you choose works well at all screen sizes. It should be 2000px wide and 200px tall. At this large size, it will remain crisp on large screens.

The photo must be black and white – CSS adds the sapphire color.

Default black and white image (as it was uploaded to the server)

Black and white image

Image with CSS overlay (as it appears on the page)

Same image but with blue CSS overlay

What types of images work best

Images with subtle, abstract patterns and no specific subject work best.

  • Images with too many details or too much contrast:
    • Make the image distracting and draw users’ eyes to your image instead of the page content.
    • Make the site title and contact information difficult to read.
  • Images with a specific subject:
    • There isn’t a way to control where the image gets cropped as the screen size changes.
    • Recognizable shapes (like people) will get cropped in awkward places, and it may not be apparent what the image is showing.
  • Make sure important parts of the image are at the top of the image.
    • The bottom of the images get cut off most of the time, except on small screens where the narrow width and tall site title and contact information make the section taller.

The following examples generally don’t work because they have a defined subject that requires a specific crop. Using an abstract pattern located at the top of the image would avoid these issues.

Example of a bad crop:

The Portland skyline, but you can only see the very top of two buildings

The Portland skyline, almost

Example of a vertical subject – horizontal is better:

You can only see a small slice of the vertical bridge tower, the rest is blank

A slice of St. John’s Bridge

Example of the crop changing as the screen size changes:

Veterinary Technology with a photo of a cat - phone screen size

The cropping looks fine on small screens…

Veterinary Technology with a photo of a cat - desktop screen size - you can only see the cat's ears

…but you can only see part of the cat’s head on larger screens.

Adding a custom image to a site

Talk to Ali or Gabriel.

  • Custom images are located in /_source-v6/images/custom-headers/.
  • JavaScript inserts custom images as an inline style on the header id="secondary-header".
  • Add custom images to /scripts/library/pcc-hacks-presentation.js.
  • In function pcc_custom_header(), add new custom images to var fns.
Desktop view

Site title with contact information and default background image, desktop

Phone view

Site title with contact information and default background image, phone

Custom background image

Site title with custom background image (keyboard for Distance Education)