Додайте власний CSS до сторінок конструктора.

Вивчення DXPR BuilderКерування сайтомАдаптація під бренд

Вміст DXPR Builder це частина сторінки, яку рендерить ваша тема, тож CSS вашої теми стилізує його в редакторі та на опублікованій сторінці. Використовуйте цю сторінку, коли вигляд має повторюватися на багатьох елементах або сторінках, або коли налаштування елемента не можуть його створити. Ви закінчуєте таблицею стилів у своїй темі та класом, який редактори можуть застосовувати. Для одного елемента використайте його діалогове вікно налаштувань.

Перш ніж почати

  • Вам потрібен доступ до файлів вашої теми та спосіб їх розгортати.
  • Використовуйте власну тему або підтему. Оновлення доповненої теми замінює її файли, а з ними і ваш CSS.

Налаштування

  1. Створіть css/custom.css у теці своєї теми, наприклад themes/custom/mytheme/css/custom.css.

  2. Заявіть файл у mytheme.libraries.yml:

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

  3. Завантажте бібліотеку на кожній сторінці з mytheme.info.yml:

    libraries:
  - mytheme/global-styling

  4. Напишіть правило для власного імені класу:

    .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 та класи.

Редактори також можуть вибрати клас зі списку HTML 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- плюс ім’я елемента, як-от .az-separator для Divider
.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-* або власний клас.

Що далі?