Color Style applies one of the site’s preset color palettes to a component — the accent color of a carousel’s arrows, the header bars of an accordion, the buttons of a links list. You pick a name; the exact colors are defined once by the site administrator so that every page stays consistent.

Where to find it

In the light-blue Config row of the card, on the components that have it. It is a drop-down of color names sorted alphabetically.

The Color Style drop-down expanded on a Feature Box, listing Black, Blue, Green, Orange, Red, Silver and Blue, Teal Blue and White.
Color Style options on a Feature Box (single-color palette).

Two palettes

There are two kinds of Color Style. They share the same field label, so the component decides which list you see.

Top: eight single-color swatches named Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue. Bottom: a table of multi-state styles, each with base, active, hover and title text swatches: Blue, Blue and Green, Gray, Green, Orange, Red, Teal Blue, Yellow Orange and Red, Fancy White.
The two palettes as configured on the demo site. Your site administrator may adjust the colors; the names stay the same.

Single-color styles

Used by Carousel, Feature Box, Image Gallery, Links, Profiles, Slideshow, Special List and Video. Each style is one accent color: Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue.

What the accent color is applied to depends on the component:

  • Carousel and Slideshow — the navigation controls (arrows, dots).
  • Image Gallery — the frame behind each thumbnail.
  • Special List — the list text and markers.
  • Feature Box, Links, Profiles, Video — the accent parts of each card, button or player, which vary with the display type chosen.

The component pages show exactly which parts change color for each display type. Feature Box, Links, Profiles and Special List also have a Color Style on each item, so one card or link can use a different accent than the rest.

Multi-state styles

Used by Accordion and Tabs (and by the items of Read More). These components have elements that react to the visitor — a header that is closed, open or hovered; a tab that is selected or not — so each style is a small set of colors:

ColorUsed for
BaseThe header or tab in its normal state.
ActiveThe open accordion panel header or the selected tab.
HoverThe header or tab under the mouse pointer.
Title textThe text printed on top of those backgrounds (white on dark styles, near-black on light ones).

Available styles: Blue, Blue and Green, Gray, Green, Orange, Red, Teal Blue, Yellow Orange and Red, Fancy White.

Color Style versus Container Settings

Color Style and Container Settings › Background answer different questions:

  • Color Style colors the parts of the component itself (arrows, headers, buttons) from a fixed palette.
  • Background in Container Settings colors the box around the component, with any color you like, and can also set the text color of the section title and intro.

They combine well: a Feature Box with the White Color Style on a dark blue container background is a common pattern.

Changing the palette

Editors cannot add colors from the component card. Site administrators maintain the two lists under Structure › Taxonomy › APB Color Styles 01 and APB Color Styles 02, where each entry has a name and its color values. Changing a color there updates every component that uses that style.