--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css' title: '用主题 CSS 定制构建器内容样式 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:44:53+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder 内容是主题渲染的页面的一部分，因此主题的 CSS 在编辑器和已发布页面上都为其定型。当某个外观要在众多元素或页面上重复，或元素设置做不出时，请用本页方法。最终您会在主题中得到一个样式表和一个编辑人员可用的类。单个元素请用它的 设置对话框。 开始之前 您需要能访问主题文件，并有部署它们的方法。 请用自定义主题或子主题。贡献主题的更新会替换其文件，您的 CSS 也会一起被替换。 设置 在主题文件夹中创建 css/custom.css，例如 themes/custom/mytheme/css/custom.css。 在 mytheme.libraries.yml 中声明该文件： tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: '用主题 CSS 定制构建器内容样式' description: |- DXPR Builder 内容是主题渲染的页面的一部分，因此主题的 CSS 在编辑器和已发布页面上都为其定型。当某个外观要在众多元素或页面上重复，或元素设置做不出时，请用本页方法。最终您会在主题中得到一个样式表和一个编辑人员可用的类。单个元素请用它的 设置对话框。 开始之前 您需要能访问主题文件，并有部署它们的方法。 请用自定义主题或子主题。贡献主题的更新会替换其文件，您的 CSS 也会一起被替换。 设置 在主题文件夹中创建 css/custom.css，例如 themes/custom/mytheme/css/custom.css。 在 mytheme.libraries.yml 中声明该文件： image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:44:53+0000' dateModified: '2026-10-24T09:09:48+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/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css' description: |- DXPR Builder 内容是主题渲染的页面的一部分，因此主题的 CSS 在编辑器和已发布页面上都为其定型。当某个外观要在众多元素或页面上重复，或元素设置做不出时，请用本页方法。最终您会在主题中得到一个样式表和一个编辑人员可用的类。单个元素请用它的 设置对话框。 开始之前 您需要能访问主题文件，并有部署它们的方法。 请用自定义主题或子主题。贡献主题的更新会替换其文件，您的 CSS 也会一起被替换。 设置 在主题文件夹中创建 css/custom.css，例如 themes/custom/mytheme/css/custom.css。 在 mytheme.libraries.yml 中声明该文件： breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # 用主题 CSS 定制构建器内容样式. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [实用类](/zh-hans/hc/documentation/learn-dxpr-builder/customization/utility-classes) - [在构建器页面上使用品牌字体](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-fonts) - [在文本编辑器中添加品牌样式和按钮](/zh-hans/hc/documentation/learn-dxpr-builder/customization/text-editor) DXPR Builder 内容是主题渲染的页面的一部分，因此主题的 CSS 在编辑器和已发布页面上都为其定型。当某个外观要在众多元素或页面上重复，或元素设置做不出时，请用本页方法。最终您会在主题中得到一个样式表和一个编辑人员可用的类。单个元素请用它的 [设置对话框](/hc/documentation/learn-dxpr-builder/element-settings)。 ## 开始之前 - 您需要能访问主题文件，并有部署它们的方法。 - 请用自定义主题或子主题。贡献主题的更新会替换其文件，您的 CSS 也会一起被替换。 ## 设置 1. 在主题文件夹中创建 `css/custom.css`，例如 `themes/custom/mytheme/css/custom.css`。 2. 在 `mytheme.libraries.yml` 中声明该文件： ```yaml global-styling: css: theme: css/custom.css: {} ``` 3. 从 `mytheme.info.yml` 在每个页面上加载该库： ```yaml libraries: - mytheme/global-styling ``` 4. 为自己起的类名写规则： ```css .brand-hero { background: linear-gradient(135deg, #1a4d8f, #0f2a4d); color: #ffffff; } ``` 5. 在 **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`) 用 **Clear all caches** 清除缓存，或运行 `drush cr`。 6. 在构建器中打开 **Section** 的设置，添加 `brand-hero` 到 **HTML classes** 下。[HTML ID 和类](/hc/documentation/learn-dxpr-builder/element-settings/custom-css)演示了如何输入自己的类。 主题在那里列出类后，编辑人员也可以从 **HTML classes** 列表中挑选；请参阅 [实用类](/zh-hans/hc/documentation/learn-dxpr-builder/customization/utility-classes)。 ## 您会看到的内容 加上类，版块立刻带上渐变和白色文字，因为编辑器运行在主题渲染的页面上。保存页面后访客看到同样的效果。类存放在页面的 HTML 中，因此以后改规则，所有带它的元素一起更新。 ## DXPR Builder 写入的类 自己的类是最安全的目标。已保存 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-*` 类或自己的类。 ## 接下来做什么？ - [实用类](/zh-hans/hc/documentation/learn-dxpr-builder/customization/utility-classes)：在 **HTML classes** 下列出您的类，方便编辑人员挑选。 - [自定义字体](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-fonts)：用同样的方法加载品牌字体。 - [文本编辑器](/zh-hans/hc/documentation/learn-dxpr-builder/customization/text-editor)：在 **Styles** 列表中为段落和词组提供类。