Motywy w DXPR Builder.

Learn DXPR BuilderExtendBouw erop voort

Treść kreatora to zwykły HTML na twojej stronie, więc twój motyw stylizuje ją jak każdą inną treść. Ta strona opisuje, co motyw dziedziczy, jak dodaje klasy do edytora i gdzie umieszczać nadpisania.

Co stylizuje twój motyw

Opublikowana treść kreatora dziedziczy style twojego motywu:

  • Nagłówki, tekst zasadniczy i linki używają stylów twojego motywu.
  • Układ używa wierszy i kolumn Bootstrap 5, więc motyw oparty na Bootstrap 5 wyrównuje się z nim. Przy każdym innym motywie przejdź do DXPR Studio > DXPR Builder > General Settings i ustaw Sideload Bootstrap files na Bootstrap 5.
  • Każdy element ma jedną klasę na typ, na przykład az-card albo az-button, a większość niesie też az-element; zobacz Architektura CSS.

Dodawanie klas do edytora

W pliku info.yml motywu

Wymień klasy w dxpr_builder_classes w pliku .info.yml swojego motywu. Pojawiają się na liście HTML classes każdego elementu, w grupie opcji nazwanej od motywu, gdy motyw jest włączony:

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

Z modułu

Zaimplementuj hook_dxpr_builder_classes_alter(). Nazwa musi kończyć się na _alter; zobacz Dokumentacja API hooków.

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

Style przycisków

Element przycisku oferuje style Bootstrapa Primary, Secondary, Success, Info, Warning, Danger, Link, Light i Dark. Lista jest stała w edytorze; hook folderów przycisków jej nie zmienia. Aby nadać przyciskom wygląd marki, ostyluj klasy btn-* Bootstrapa w swoim motywie albo dodaj własną klasę przez HTML classes.

Nadpisania CSS

Nadpisz wyjście kreatora w CSS swojego motywu:

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

Ustawienia wprowadzone przez redaktora na zakładce Styl zapisują się jako style wstawione. Style wstawione biją reguły motywu, które nie używają !important, więc używaj CSS motywu do wartości domyślnych, a redaktorom pozwól nadpisywać je na element.

Edytor a twój motyw

Edytor działa na stronie, na której wyświetla się pole, więc wewnątrz twojego motywu front-endowego, nie motywu administracyjnego. Jego paski sterowania, menu i okna niosą klasę dxpr-builder-ui i wczytują własny arkusz stylów dxpr_builder_backend.css. Reguły motywu celujące w szerokie selektory, na przykład button albo .modal, wciąż mogą je dosięgnąć; ogranicz swoje reguły do regionów treści, aby tego uniknąć.