Custom Palette

2 min read Updated

The Custom Palette addon puts your own colors in the SiteOrigin color pickers. Add your brand colors once, then pick them with one click when you style rows, widgets and text. You don’t need to copy hex codes between settings.

Requirements

Go to SiteOriginPremium Addons and activate Custom Palette.

Where the Palette Shows

Your colors appear as swatches in these places:

  • Widgets Bundle color settings: every color setting in a SiteOrigin widget or block, for example a button or heading color. Other forms that use Widgets Bundle color fields show them too. The addon Settings forms on the Premium Addons page don’t.
  • Page Builder color settings: the color settings in Row Styles, the column styles (for example Column 2 Styles) and Widget Styles, such as Background Color and Border Color.
  • SiteOrigin Editor widget: the Text color menu in the visual editor. Your colors come after the standard colors.

In the Widgets Bundle and Page Builder color pickers, your list replaces the standard WordPress swatches. Swatches that a field or another plugin adds stay, next to yours.

A Page Builder Background Color picker with the custom palette swatches

Settings

  1. Go to SiteOriginPremium Addons.
  2. Find Custom Palette and click Settings.
  3. Change the colors in the Colors list.
  4. Click Save.

The Custom Palette settings with a list of Northfield Studio brand colors

The list starts with the eight standard WordPress swatch colors: #000, #fff, #d33, #d93, #ee2, #81d742, #1e73be and #8224e3. Click Add to add a color. Click a color to open it. Use the icons on the right to copy or delete it. Drag the colors to change their order. The order in the list is the order of the swatches.

Color
Pick a color, or type a hex value such as #1f3a5f.

A color with an empty value doesn’t show in the pickers.

Text Color in the SiteOrigin Editor Widget

  1. Edit a SiteOrigin Editor widget and select some text in the Visual tab.
  2. If you see only one row of buttons, click Toolbar Toggle.
  3. Click the arrow next to Text color.
  4. Pick a color from your palette. Your colors are after the standard colors. Hover over a swatch to see its hex value.

The palette only adds colors to the SiteOrigin Editor widget. Other text editors, such as the Classic Editor, keep the standard colors.

The Text color menu of the SiteOrigin Editor widget with the custom colors after the standard colors