用主题 CSS 定制构建器内容样式.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

DXPR Builder 内容是主题渲染的页面的一部分，因此主题的 CSS 在编辑器和已发布页面上都为其定型。当某个外观要在众多元素或页面上重复，或元素设置做不出时，请用本页方法。最终您会在主题中得到一个样式表和一个编辑人员可用的类。单个元素请用它的设置对话框。

开始之前

在 mytheme.libraries.yml 中声明该文件：

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

为自己起的类名写规则：

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

在 Configuration > Development > Performance (/admin/config/development/performance) 用 Clear all caches 清除缓存，或运行 drush cr。
在构建器中打开 Section 的设置，添加 brand-hero 到 HTML classes 下。HTML ID 和类演示了如何输入自己的类。

主题在那里列出类后，编辑人员也可以从 HTML classes 列表中挑选；请参阅实用类。

加上类，版块立刻带上渐变和白色文字，因为编辑器运行在主题渲染的页面上。保存页面后访客看到同样的效果。类存放在页面的 HTML 中，因此以后改规则，所有带它的元素一起更新。

自己的类是最安全的目标。已保存 HTML 中还有这些类：

选择器	匹配
`.az-container`	每个 DXPR Builder 字段的外层；有人编辑时还带有 `.dxpr-editor` 类
`.az-section`	每个 Section；里面是 `.container`，`.container-fluid` 用于 Full width 开启时
`.row`	每个 Row；DXPR Builder 用 Bootstrap 自己的类，不加 `az-row`
`.col-*`	每个列，例如 `.col-12.col-md-6`；没有 `az-column`
`.az-text`、`.az-image`、`.az-button`、`.az-card`	一种元素类型：`az-` 加元素名，例如 Divider 的 `.az-separator` 类
`.az-element`	大多数内容元素，但 Image、Icon、Button 除外

该 Style 面板写内联 style 属性，同一属性上胜过类规则。Bootstrap 实用类带 !important 标记，胜过两者。

类已在元素上，但没有任何变化。 库没有加载，或缓存中还是旧 CSS。请检查 mytheme.info.yml 是否列出了该库，再到 /admin/config/development/performance 清除缓存。
只有部分属性生效。 同一属性上的 Style 面板值胜出。请在元素的 Style 面板中清除该值，或把整个外观搬进类里。
样式在编辑器中显示，访客看不到。 Apply text format filters to frontend content 开启了，字段的文本格式剥离了 class 属性。请在 Text Filters（/admin/dxpr_studio/dxpr_builder/settings）下关闭它，或在格式中允许类。
关于 .az-row 或 .az-column 的规则从不匹配。 DXPR Builder 不写这些类。请改用 .row、.col-* 类或自己的类。