Темізація DXPR Builder.

Вивчення DXPR BuilderРозширенняРозробка на платформі

Вміст конструктора це звичайний HTML на вашій сторінці, тож ваша тема оформлює його як будь-який інший вміст. Ця сторінка охоплює успадковане темою, додавання класів до редактора й місце для перевизначень.

Що оформлює ваша тема

Опублікований вміст конструктора наслідує стилі вашої теми:

  • Заголовки, текст тіла й посилання використовують стилі вашої теми.
  • Макет використовує рядки й стовпці Bootstrap 5, тож тема Bootstrap 5 узгоджується з ним. З будь-якою іншою темою перейдіть до DXPR Studio > DXPR Builder > Загальні налаштування і задайте для параметра Підвантажувати файли Bootstrap значення Bootstrap 5.
  • Кожен елемент має один клас на тип, наприклад az-card або az-button, а більшість також мають az-element; див. Архітектура CSS.

Додавання класів до редактора

У файлі info.yml теми

Перелічіть класи під dxpr_builder_classes у файлі .info.yml вашої теми. Вони з’являються в списку Класи HTML кожного елемента в групі параметрів, названій за темою, поки тему увімкнено:

# 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: Основний, Додатковий, Успіх, Інформація, Попередження, Небезпека, Посилання, Світлий і Темний. Список фіксовано в редакторі; хук папок кнопок його не змінює. Щоб надати кнопкам фірмового вигляду, оформіть класи btn-* Bootstrap у своїй темі або додайте власний клас через Класи HTML.

Перевизначення 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, усе ще можуть їх сягати; обмежте свої правила регіонами вмісту, щоб цього уникнути.