Skip to content

Theming DXPR Builder

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.

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:

# 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.

/**
 * 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:

/* 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.

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