---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/customization/text-editor'
title: 'Add brand styles and buttons to the text editor | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T10:11:51+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: "Add brand styles to the text editor's Styles list and choose the toolbar buttons each role sees"
tags:
  - 'Match your brand'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Add brand styles and buttons to the text editor'
      description: "Add brand styles to the text editor's Styles list and choose the toolbar buttons each role sees"
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T10:11:51+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/customization/text-editor'
      articleSection: 'Match your brand'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/customization/text-editor'
      description: "Add brand styles to the text editor's Styles list and choose the toolbar buttons each role sees"
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Match your brand](/hc/documentation/learn-dxpr-builder/customization) # Add brand styles and buttons to the text editor.

Add brand styles to the text editor's Styles list and choose the toolbar buttons each role sees

 Learn DXPR BuilderManage the siteMatch your brand

   ## In this guide

 Related guides

- [Custom CSS](/hc/documentation/learn-dxpr-builder/customization/custom-css)
- [Utility classes](/hc/documentation/learn-dxpr-builder/customization/utility-classes)
- [User profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)

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](/hc/documentation/learn-dxpr-builder/customization/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](/hc/documentation/learn-dxpr-builder/customization/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:

```text
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](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) 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 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](/hc/documentation/learn-dxpr-builder/troubleshooting/visitors-see-something-else).

## What's next?

- [Custom CSS](/hc/documentation/learn-dxpr-builder/customization/custom-css): write the theme rules behind your style classes.
- [Utility classes](/hc/documentation/learn-dxpr-builder/customization/utility-classes): offer classes for whole elements in the **HTML classes** list.
- [User profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin): everything else a profile controls.