---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/development/theming'
title: 'Theming DXPR Builder | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'How themes interact with the builder and its output'
tags:
  - 'Build on it'
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: 'Theming DXPR Builder'
      description: 'How themes interact with the builder and its output'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+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/development/theming'
      articleSection: 'Build on it'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/development/theming'
      description: 'How themes interact with the builder and its output'
      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) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Build on it](/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Theming DXPR Builder.

How themes interact with the builder and its output

 Learn DXPR BuilderExtendBuild on it

   ## In this guide

Builder content is ordinary HTML in your page, so your theme styles it like any other content. This page covers what a theme inherits, how it adds classes to the editor, and where to put overrides.

## What your theme styles

Published builder content inherits your theme's styles:

- Headings, body text and links use your theme's styles.
- Layout uses Bootstrap 5 rows and columns, so a Bootstrap 5 theme lines up with it. With any other theme, go to **DXPR Studio > DXPR Builder > General Settings** and set **Sideload Bootstrap files** to **Bootstrap 5**.
- Every element has one class per type, such as `az-card` or `az-button`, and most also carry `az-element`; see [CSS architecture](/hc/documentation/learn-dxpr-builder/development/css-architecture).

## Adding classes to the editor

### In the theme's info.yml

List classes under `dxpr_builder_classes` in your theme's `.info.yml`. They appear in the **HTML classes** list of every element, in an option group named after the theme, while the theme is enabled:

```yaml
# mytheme.info.yml
dxpr_builder_classes:
  brand-header: 'Brand header style'
  brand-cta: 'Call to action style'
  bg-gradient-primary: 'Primary gradient background'

```

### From a module

Implement `hook_dxpr_builder_classes_alter()`. The name must end in `_alter`; see [Hooks API reference](/hc/documentation/learn-dxpr-builder/development/hooks-api).

```php
/**
 * Implements hook_dxpr_builder_classes_alter().
 */
function mymodule_dxpr_builder_classes_alter(&$classes) {
  $classes['optgroup-custom'] = t('Custom Styles');
  $classes['custom-card'] = t('Custom card');
  $classes['custom-hero'] = t('Custom hero');
}

```

## Button styles

The Button element offers the Bootstrap styles Primary, Secondary, Success, Info, Warning, Danger, Link, Light and Dark. The list is fixed in the editor; the buttons folders hook does not change it. To give buttons your brand look, style Bootstrap's `btn-*` classes in your theme, or add your own class through **HTML classes**.

## CSS overrides

Override builder output in your theme's CSS:

```css
/* Section padding */
.az-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Card shadows */
.az-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

```

Settings an editor makes on the Style tab are written as inline styles. Inline styles beat theme rules that do not use `!important`, so use theme CSS for defaults and let editors override them per element.

## The editor and your theme

The editor runs on the page where the field is displayed, so inside your front-end theme, not the admin theme. Its control bars, menus and dialogs carry the `dxpr-builder-ui` class and load their own stylesheet, `dxpr_builder_backend.css`. Theme rules that target broad selectors such as `button` or `.modal` can still reach them; scope your rules to your content regions to avoid that.