Adapt User's Guide

Graphic Headers

Unsurprisingly, the Graphic Headers extension adds the ability to add background and logo images to the headers of any compatible theme.

Graphic Headers Settings

The settings that allow you to edit the header of a page or submenu are found in the settings for Page (double click the page title in the Page Editor or Submenu (by doubleclicking the submenu element in the Menu Editor), respectively.

The settings that allow you to edit the main menu are in Project Settings

The settings for both sections can be found under the Graphic Header block and are the same in all locations:

Is Enabled
Enables the behavior. If not checked all other options are ignored.
Logo Image
A small logo to be placed above the page or menu title.
Alternative Text
The alternative text for the logo.
Header Background Image
The backgroud image to be used. If no image is specified, the header will retain the default color.
Header Background Alternative Text
The alternative text for the header image, if required.
Force Header Height
Forces the header to be at least as high as the browser while centering the title and/or logo.

Graphic Header Logo Requirements

Logos used in the adapt course should typically be no larger than 300px wide or high. Unlike other images, Adapt will not correct bad images in this context, but will ensure that the image is no more than 50% of the width of the browser on desktop or tablet, and no more than 80% of the width on mobile.

Typically, logos should be transparent .png files. Due to the nature of .png files, your logo should be as small as humanly possible, as the format itself may make the file larger than typical. While .jpg files can be used, there will not be a transparent background.

Graphic Header Background Requirements

Graphics used as the background should be landscape images (wider than they are tall) and between 1200—1600px wide. Images should be under 120KB in file size or the learner may not see the image (or course loading will be delayed significantly). Plan for the smallest image file size you can while still achieving an attractive background.

Use caution with your image sellection and body text. The title color and text color are theme dependent and cannot be altered. Choose an image that provides sufficient contrast. If there is any doubt, contact the CPM artist for assistance.