Skip to content

Add brand styles and buttons to the text editor

When editors click into a text in DXPR Builder, a toolbar appears. You can fill its Styles list with your brand's styles, such as a lead paragraph or a highlighted phrase. You can also choose which buttons each role sees. Editors then apply a brand look with one click instead of setting sizes and colours by hand. Fonts come from your theme; see Custom fonts.

Before you start

  • To edit styles, you need Administer DXPR Builder configuration.
  • To edit toolbar buttons, you need Administer dxpr builder profile.
  • Every style needs CSS behind it. Bootstrap 5 classes such as lead work when the page loads Bootstrap 5. Your own classes need a rule in the theme; see Custom CSS.

Set up

  1. Go to DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings).
  2. Expand Text Editor. The Custom styles box already lists the styles that ship with DXPR Builder, one per line.
  3. Add one line per style in the form Label=element.class, and delete the lines you do not want.
  4. Click Save settings.
  5. Open a page in the builder, or reload it if it is open, and click into a text.
  6. Click Styles on the toolbar and choose your style.

These lines add four styles:

Lead=p.lead
Event date=span.text-primary.fw-semibold
Callout=p.border-start.border-primary.border-4.ps-3
Sassy Title=h1.sassy-title

Each line has three parts:

  • The label before = is the name editors see in the list.
  • The element after = decides what the style covers. A block element such as p, h2 or blockquote styles a whole paragraph or heading. An inline element such as span, mark or code wraps only the selected words.
  • Each class follows a dot. Add more classes with more dots, as in Callout above.

Element names use letters and digits only. Class names use letters, digits, hyphens and underscores. To get the shipped list back, empty the box and save.

Toolbar buttons per role

  1. Go to DXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile) and click Edit next to the profile for the role.
  2. Expand Text editor buttons (inline editing). Tick the buttons for text you edit on the page.
  3. Expand Text editor buttons (modal editing). Tick the buttons for text boxes in a settings dialog.
  4. Click Save.

Inline editing covers the Text, Alert and Blockquote elements. Keep Font style ticked in both groups to show your custom styles; it is the profile's name for the Styles list. If you untick every button in a group, that toolbar falls back to the built-in set. User profiles explains which profile applies to whom.

What you see

Styles on the toolbar opens a panel with two groups. Block styles holds the styles for whole paragraphs and headings, Text styles the ones for selected words. After you choose a style, the button shows its name, or Multiple styles when several apply.

The text toolbar of a Text element whose Styles button reads Lead, above the paragraph with the caret in it, now set in the larger Lead style above a normal paragraph

The editor saves the element and its classes in the page's HTML, so visitors see the same look. A block style is only active in its own element: Sassy Title needs the cursor in a Heading 1.

Settings

All 36 buttons appear in both groups. A new profile starts with these ticked:

Button Machine name Inline default Modal default
AI Assistant, AI Tone of Voice aiAgentButton, aiAgentToneButton yes yes
Bold, Italic bold, italic yes yes
Underline, Strike through underline, strikethrough yes
Superscript, Subscript superscript, subscript yes
Remove format removeFormat yes yes
Text color fontColor yes yes
Background color fontBackgroundColor
Font size fontSize yes yes
Font family fontFamily
HTML block format heading yes yes
Font style (the Styles list) style yes yes
Align left, Center, Align right, Justify alignment:left, alignment:center, alignment:right, alignment:justify yes yes
Insert/Remove Bullet list bulletedList yes yes
Insert/Remove Numbered list numberedList yes
Outdent, Indent outdent, indent yes
Block quote blockQuote yes
Link, Image, Table link, insertImage, insertTable yes yes
Horizontal rule, Character map horizontalLine, specialCharacters yes
Source code, Show blocks sourceEditing, showBlocks yes
Select all, Replace, Accessibility help selectAll, findAndReplace, accessibilityHelp
Undo, Redo undo, redo yes yes

Users whose roles match no enabled profile get the built-in toolbars. Inline, that is Bold, Italic, Remove format, HTML block format, Font style, both lists, Link, Image, Table, Undo and Redo. The modal toolbar adds the underline, strike through, script, alignment, indent, colour and size buttons. It also adds Block quote, Horizontal rule, Character map, Source code and Show blocks. When AI is on, both get the two AI buttons.

Font family offers CKEditor's standard web-safe fonts, not your theme's fonts.

If you don't see your style

  • The Styles list only shows the shipped styles. One line breaks the format, or a blank line sits between two styles, so DXPR Builder ignores the whole list. Correct it under Text Editor at /admin/dxpr_studio/dxpr_builder/settings and save.
  • Your style is greyed out. A block style only works in its own element: h1.sassy-title needs a Heading 1. Change the block with the heading list first, or define the style for p.
  • There is no Styles button on the toolbar. The editor's profile has Font style unticked. Tick it in both button groups at /admin/dxpr_studio/dxpr_builder/profile.
  • The style applies, but the text looks the same. The theme has no CSS for the class, or Bootstrap 5 is not loaded. Add the rule to the theme, or set Sideload Bootstrap files to Bootstrap 5 under Bootstrap on the General Settings page.
  • Editors see the style, visitors do not. Apply text format filters to frontend content is on under Text Filters, and the field's text format removes class attributes. Turn the option off, or give the field a format that keeps classes; see Visitors see something different.

What's next?

Something wrong or missing on this page? Report it or edit the page.