Styluj treści kreatora CSS motywu.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

Treści kreatora DXPR są częścią strony renderowanej przez twój motyw, więc CSS motywu styluje je w edytorze i na opublikowanej stronie. Użyj tej strony, gdy wygląd ma się powtarzać w wielu elementach albo stronach albo gdy ustawienia elementu go nie dadzą. Kończysz z arkuszem stylów w motywie i klasą do zastosowania przez redaktorów. Do jednego elementu użyj jego okna ustawień.

Zanim zaczniesz

  • Potrzebujesz dostępu do plików motywu i sposobu ich wdrożenia.
  • Użyj własnego motywu albo submotywu. Aktualizacja motywu dodatkowego zastępuje jego pliki, a wraz z nimi twój CSS.

Konfiguracja

  1. Utwórz css/custom.css w katalogu motywu, na przykład themes/custom/mytheme/css/custom.css.

  2. Zadeklaruj plik w mytheme.libraries.yml:

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

  3. Wczytaj bibliotekę na każdej stronie z mytheme.info.yml:

    libraries:
  - mytheme/global-styling

  4. Napisz regułę dla własnej nazwy klasy:

    .brand-hero {
  background: linear-gradient(135deg, #1a4d8f, #0f2a4d);
  color: #ffffff;
}

  5. Wyczyść pamięć podręczną w Configuration > Development > Performance (/admin/config/development/performance) poleceniem Clear all caches albo uruchom drush cr.

  6. W kreatorze otwórz ustawienia Section i dodaj brand-hero w HTML classes. HTML ID i klasy pokazują, jak wpisać własną klasę.

Redaktorzy mogą też wybrać klasę z listy HTML classes, gdy motyw ją tam wymieni; zobacz klasy narzędziowe.

Co widzisz

Sekcja przejmuje gradient i biały tekst, gdy tylko dodasz klasę, ponieważ edytor działa na stronie renderowanej przez twój motyw. Odwiedzający widzą to samo po zapisaniu strony. Klasa przechowywana jest w HTML strony, więc późniejsza zmiana reguły aktualizuje każdy element, który ją ma.

Klasy zapisywane przez kreator DXPR

Własna klasa to najbezpieczniejszy cel. Te klasy też znajdują się w zapisanym HTML:

Selektor Pasuje do
.az-container opakowanie każdego pola kreatora DXPR; ma też .dxpr-editor, gdy ktoś je edytuje
.az-section każda Section; wewnątrz niej znajduje się .container albo .container-fluid, gdy Full width jest włączone
.row każdy Row; kreator DXPR używa własnej klasy Bootstrapa i nie dodaje az-row
.col-* każda kolumna, na przykład .col-12.col-md-6; nie ma az-column
.az-text, .az-image, .az-button, .az-card jeden typ elementu: az- plus nazwa elementu, na przykład .az-separator dla elementu Divider
.az-element większość elementów treści, ale nie Image, Icon ani Button

Panel Style zapisuje osadzone atrybuty style, które biją regułę klasy dla tej samej właściwości. Klasy narzędziowe Bootstrapa oznaczone są !important i biją obie.

Jeśli nie widzisz stylu

  • Klasa jest na elemencie, ale nic się nie zmienia. Biblioteka nie jest wczytana albo pamięć podręczna nadal trzyma stary CSS. Sprawdź, czy mytheme.info.yml wymienia bibliotekę, potem wyczyść pamięci podręczne w /admin/config/development/performance.
  • Stosują się tylko niektóre właściwości. Wartość panelu Style dla tej samej właściwości wygrywa. Wyczyść tę wartość w panelu Style elementu albo przenieś cały wygląd do swojej klasy.
  • Styl pokazuje się w edytorze, ale nie u odwiedzających. Apply text format filters to frontend content jest włączone, a format tekstu pola usuwa atrybuty class. Wyłącz je w Text Filters w /admin/dxpr_studio/dxpr_builder/settings albo zezwól na klasy w formacie.
  • Reguła dla .az-row albo .az-column nigdy nie pasuje. Kreator DXPR nie zapisuje tych klas. Celuj w .row, klasy .col-* albo własną klasę.

Co dalej?