Use your brand colours
Apply your brand colours to sections, text and buttons so every page looks like it belongs to the same site. Every colour field in DXPR Builder shows your theme's palette as swatches, so you pick brand colours instead of guessing codes. The example gives a section your primary brand colour with white text.
Before you start
- Your brand colours live in the theme. With DXPR Theme, set them under Appearance > Settings > DXPR Theme (
/admin/appearance/settings/dxpr_theme), in the Colors panel. - DXPR Builder shows the first ten different colours of that palette as swatches.
Colour a section
- Hover the section, open More and choose Settings.
- Open the Style panel.
- Click the colour button of Background. The colour picker opens with your swatches.
- Click your primary brand swatch.
- Click the colour button of Font color and pick white.
- Click Save.
What you see
The section fills with your brand colour and its text turns white. The same swatches appear in every colour field. That includes the Style and Hover style panels, and the Start color and End color of a section's Gradient background.
To use a colour outside the palette, type its code in the picker's text field, for example #2196F3. Move the opacity slider for a see-through colour. Clear removes the colour.
Keep colours linked to the theme
A swatch copies the colour's code into the element. If you change the theme palette later, that element keeps the old colour.
To make an element follow the palette, use a colour class instead. Open the element's Settings and pick a chip under HTML classes:
| Chip | What it does |
|---|---|
| Primary background, Secondary background and others | Bootstrap colours from your theme |
| Primary text color, Secondary text color and others | Bootstrap text colours from your theme |
| Background color: DXPR Theme primary | The DXPR Theme Primary colour, with its matching text colour |
| Text color: DXPR Theme accent1 | The DXPR Theme Secondary colour for text |
The DXPR Theme chips appear only when DXPR Theme is enabled.
Colour fields per element
| Where | What it colours |
|---|---|
| Style panel: Font color, Border color, Background | The element itself |
| Hover style panel: the same fields | The element while the pointer is on it |
| Button: Type | A ready-made button colour scheme |
| Card: Type | The background and text of the whole card |
| Alert: Type | Success, Info, Warning or Danger |
| Section: Background effects > Gradient | A blend of two colours |
Readable colour
- Keep enough contrast between text and background. WCAG 2.1 Level AA asks for at least 4.5 to 1 for normal text.
- Do not use colour alone to carry meaning; pair it with a label or an icon.
- Alternate section backgrounds, such as white, light grey and your brand colour, to give long pages a rhythm.
If you don't see your colours
- The colour picker shows no swatches. Your site's default theme provides no colour palette. Type your colour codes, or use a theme with a palette, such as DXPR Theme.
- An element keeps its old colour after you change the theme palette. A swatch stores a fixed colour code. Pick the new swatch, or switch to a colour chip under HTML classes, which follows the palette.
- Background or Font color has no effect on a card. A card Type other than Default sets its colours with theme classes that win. Set Type to Default first.
What's next?
- Make elements react on hover: change colours when visitors point at an element.
- Style your cards: apply your colours to cards.
- Custom CSS: set brand rules that the panels do not cover.