Drupal Web Theme Color Palette Changes

Posted: 

In accordance with new official colors designated by the university Office of Marketing and Communications, the College of Engineering Drupal web theme is being adjusted. This update to built-in theme elements will occur automatically for all new and existing pages, and will not require any action from content creators.

This adjustment will not change any uploaded media that may contain Ohio State brand colors (images, documents, embedded video). This includes background images or video for hero banners, or uploaded images that are being used as buttons. Since official university colors have changed, content creators are encouraged to audit any live media that may contain Ohio State brand colors, and upload a suitable replacement. Buttons that are made with built-in layout tools (such as the Link List custom block) will be adjusted automatically.

Appearance Changes

The most notable appearance will be to the primary colors, scarlet and gray, that are prevalent throughout the theme. These colors have been adjusted to the values designated in the Brand Center. This will result in a slightly different appearance of the header and footer of all pages, and most custom blocks. In all cases, care has been taken to make required adjustments while making minimal visual impact.


Points Of Pride Custom Block

Default Color Change

Screenshot of Points of Pride with Higlight Tiles view mode
The default color of the third item will be PMS 2425, an accent color designated in the Brand Center.

Although care was taken to match new colors closely with existing colors, there will be a change to the default colors of the Points of Pride custom block with the View Mode: Highlight Tiles Multicolor. The default color of the third item has been changed from yellow to a shade of the new official brand color "PMS 2425" as designated in the Brand Center. This change was required to meet accessibility standards, since the current yellow background does not provide sufficient contrast with white text.

If content creators prefer not to use PMS 2425, they are encouraged to take advantage of the new Color Theme feature that will roll out at the same time as the color palette update.

New Color Theme Feature For Points Of Pride Highlight Tiles

With this update, content creators will be able to change the appearance of individual Points of Pride Highlight Tiles items. Setting the Color Theme of an individual item will override the View Mode setting that exists on the parent Points of Pride block. This option can be used on any number of individual items in a Points of Pride block.

  • The Color Theme dropdown will appear in the editing interface for individual Points of Pride items, above the icon and text fields.
    Color theme dropdown location
    Location of the Color Theme dropdown.
  • If an item has a Color Theme selected, the Color Theme of that item will take precedence over the block View Mode, as long as the View mode is set to a Highlight Tiles option (not Statistics).
    Location of the View Mode dropdown
    Location of the View Mode dropdown. Color Theme will override this setting for individual items. Items that do not have a Color Theme set will inherit this setting.
  • If an item has a Color Theme selected, it will keep its Color Theme even if its order is changed within the Points of Pride block.
  • If an item does not have a Color Theme selected, or is set to Default, then it will use the appearance of the block View Mode (the current default behavior).

Statistics View Mode

Content creators should be aware that the Color Theme setting does not have any affect if the block View Mode is set to Statistics.

New Custom Classes For Points of Pride Highlight Tiles

Screenshot showing standard case option for Points of Pride Highlight tiles
A new custom class will enable standard case for the Large Text and Medium Text fields.

The Large Text and Medium Text fields can now be set to use standard case instead of all-caps with two new custom classes: standard-case-large-text and standard-case-medium-text.  When used, these custom classes will apply to all items in the Points of Pride block. For more information about the custom classes available for custom blocks, visit the Custom Blocks Custom Classes page.

Tag: Drupal