Match your brand
Make DXPR Builder pages look like the rest of your site, and give editors your brand's styles in place of generic ones. Most of this work happens once, in the theme or the module settings, and then every editor benefits. Use the table to find the page for what you want to do.
| I want to ... | Use | Needs |
|---|---|---|
| offer brand text styles in the text editor's Styles list | Text editor | the Administer DXPR Builder configuration permission |
| choose which text editor buttons a role sees | Text editor | a builder profile for that role |
| style builder content with the site's own CSS | Custom CSS | access to the theme's files |
| use brand fonts on builder pages | Custom fonts | access to the theme's files, or DXPR Theme |
| add an icon set to the icon picker, or see which sets ship | Icon libraries | a custom module or theme for a new set |
| list your own classes under HTML classes | Utility classes | access to the theme's .info.yml |
| run the editor from a local build instead of the DXPR CDN | Editor assets | a local build of the editor |
| change the module's own Twig templates | Override DXPR Builder templates | access to the admin theme's files |
Which should I use
Start with the theme. Fonts, colours and the CSS behind your classes belong there, because one change updates every page. Custom CSS and Custom fonts show how.
Then give editors names for that CSS. A class in the HTML classes list styles a whole element, such as a card or a section. A custom style in the text editor's Styles list styles a paragraph or a few words. Both point at the same theme CSS, so pick by what the editor selects.
The last three rows are for developers. Most sites never need them.
For a single element on a single page, use its settings dialog instead; see Style your elements.
What's next?
- Visual design and branding: plan colours, spacing and layout across pages.
- Text editor: the most common first step, brand styles for editors.
In this section
- Text editor: Add brand styles to the text editor's Styles list and choose the toolbar buttons each role sees
- Custom CSS: Add site-specific styles to builder content through the theme
- Custom fonts: Load brand web fonts through the theme so builder pages use them
- Icon libraries: The icon sets that ship with DXPR Builder, how they load, and how to add your own
- Editor assets: Load the editor from a local build instead of the DXPR CDN
- Utility classes: The classes editors pick under HTML classes, and how a theme or module adds its own
- Template overrides: The four Twig templates you can override, why element markup cannot be overridden, and what to use instead