Skip to content

Style builder content with your theme's CSS

DXPR Builder content is part of the page your theme renders, so your theme's CSS styles it in the editor and on the published page. Use this page when a look should repeat across many elements or pages, or when the element settings cannot produce it. You end with a stylesheet in your theme and a class editors can apply. For one element, use its settings dialog.

Before you start

  • You need access to your theme's files and a way to deploy them.
  • Use a custom theme or a sub-theme. An update of a contributed theme replaces its files, and your CSS with them.

Set up

  1. Create css/custom.css in your theme's folder, for example themes/custom/mytheme/css/custom.css.

  2. Declare the file in mytheme.libraries.yml:

    yaml global-styling: css: theme: css/custom.css: {}

  3. Load the library on every page from mytheme.info.yml:

    yaml libraries: - mytheme/global-styling

  4. Write a rule for a class name of your own:

    css .brand-hero { background: linear-gradient(135deg, #1a4d8f, #0f2a4d); color: #ffffff; }

  5. Clear the cache at Configuration > Development > Performance (/admin/config/development/performance) with Clear all caches, or run drush cr.

  6. In the builder, open the settings of a Section and add brand-hero under HTML classes. HTML ID and classes shows how to type a class of your own.

Editors can also pick the class from the HTML classes list once your theme lists it there; see Utility classes.

What you see

The section takes the gradient and white text as soon as you add the class, because the editor runs on the page your theme renders. Visitors see the same after you save the page. The class is stored in the page's HTML, so changing the rule later updates every element that has it.

Classes DXPR Builder writes

Your own class is the safest target. These classes are in the saved HTML too:

Selector Matches
.az-container the wrapper of each DXPR Builder field; it also has .dxpr-editor while someone edits it
.az-section every Section; inside it sits a .container, or .container-fluid when Full width is on
.row every Row; DXPR Builder uses Bootstrap's own class and adds no az-row
.col-* every column, for example .col-12.col-md-6; there is no az-column
.az-text, .az-image, .az-button, .az-card one element type: az- plus the element's name, such as .az-separator for the Divider
.az-element most content elements, but not Image, Icon or Button

The Style panel writes inline style attributes, which beat a class rule on the same property. Bootstrap utility classes are marked !important and beat both.

If you don't see the style

  • The class is on the element, but nothing changes. The library is not loaded, or the cache still holds the old CSS. Check that mytheme.info.yml lists the library, then clear caches at /admin/config/development/performance.
  • Only some properties apply. A Style panel value on the same property wins. Clear that value in the element's Style panel, or move the whole look into your class.
  • The style shows in the editor but not for visitors. Apply text format filters to frontend content is on, and the field's text format strips class attributes. Turn it off under Text Filters at /admin/dxpr_studio/dxpr_builder/settings, or allow classes in the format.
  • A rule for .az-row or .az-column never matches. DXPR Builder does not write those classes. Target .row, the .col-* classes or your own class.

What's next?

  • Utility classes: list your classes under HTML classes so editors can pick them.
  • Custom fonts: load brand fonts the same way.
  • Text editor: offer classes for paragraphs and words in the Styles list.
Something wrong or missing on this page? Report it or edit the page.