DXPR Builder 主题定制.

学习 DXPR Builder扩展基于它开发

构建器内容是您页面中的普通 HTML，因此您的主题像处理其他内容一样为其应用样式。本页介绍主题继承的内容、如何向编辑器添加类，以及覆盖样式的位置。

主题负责样式的内容

已发布的构建器内容会继承您主题的样式：

标题、正文和链接使用您主题的样式。
布局使用 Bootstrap 5 的行和列，因此 Bootstrap 5 主题与之对齐。对于其他主题，请前往 DXPR Studio > DXPR Builder > General Settings，将 Sideload Bootstrap files 设为 Bootstrap 5。
每个元素按类型有一个类，例如 az-card 或 az-button，大多数还带有 az-element；请参见 CSS 架构。

向编辑器添加类

在主题的 info.yml 中

在您主题的 .info.yml 中，在 dxpr_builder_classes 下列出类。只要主题处于启用状态，它们就会出现在每个元素的 HTML classes 列表中，位于以主题命名的选项组里：

# mytheme.info.yml
dxpr_builder_classes:
  brand-header: 'Brand header style'
  brand-cta: 'Call to action style'
  bg-gradient-primary: 'Primary gradient background'

通过模块

实现 hook_dxpr_builder_classes_alter()。名称必须以 _alter 结尾；请参见 Hooks API 参考。

/**
 * 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');
}

按钮样式

按钮元素提供 Bootstrap 样式 Primary、Secondary、Success、Info、Warning、Danger、Link、Light 和 Dark。该列表在编辑器中是固定的；按钮文件夹钩子不会改变它。要让按钮呈现您的品牌外观，请在您的主题中为 Bootstrap 的 btn-* 类设置样式，或通过 HTML classes 添加您自己的类。

CSS 覆盖

在您主题的 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);
}

编辑人员在样式选项卡中所做的设置会写为内联样式。内联样式优先于不使用 !important 的主题规则，因此请使用主题 CSS 设置默认值，并让编辑人员按元素覆盖它们。

编辑器与您的主题

编辑器运行在显示字段的页面上，也就是在您的前端主题中，而不是管理主题中。它的控制栏、菜单和对话框带有 dxpr-builder-ui 类，并加载自己的样式表 dxpr_builder_backend.css。针对宽泛选择器（例如 button 或 .modal）的主题规则仍可能影响它们；请将您的规则限定在内容区域内，以避免这种情况。