--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/customization/custom-css' title: "Style builder content with your theme's CSS | 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: 'Add site-specific styles to builder content through the theme' 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: "Style builder content with your theme's CSS" description: 'Add site-specific styles to builder content through the theme' 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/customization/custom-css' articleSection: 'Match your brand' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/customization/custom-css' description: 'Add site-specific styles to builder content through the theme' 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) # Style builder content with your theme's CSS. Add site-specific styles to builder content through the theme Learn DXPR BuilderManage the siteMatch your brand ## In this guide Related guides - [Utility classes](/hc/documentation/learn-dxpr-builder/customization/utility-classes) - [Custom fonts](/hc/documentation/learn-dxpr-builder/customization/custom-fonts) - [Text editor](/hc/documentation/learn-dxpr-builder/customization/text-editor) 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](/hc/documentation/learn-dxpr-builder/element-settings). ## 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](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) 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](/hc/documentation/learn-dxpr-builder/customization/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](/hc/documentation/learn-dxpr-builder/customization/utility-classes): list your classes under **HTML classes** so editors can pick them. - [Custom fonts](/hc/documentation/learn-dxpr-builder/customization/custom-fonts): load brand fonts the same way. - [Text editor](/hc/documentation/learn-dxpr-builder/customization/text-editor): offer classes for paragraphs and words in the **Styles** list.