Utility-klassen.

DXPR Builder lerenDe site beherenJe huisstijl toepassen

Elk element heeft een veld HTML classes met een lijst van benoemde klassen. Bootstrap 5-utilities en slagschaduwen zijn ingebouwd. Je thema kan een eigen groep toevoegen via zijn .info.yml, en een module via een alter hook. Deze pagina legt uit wat de lijst bevat en hoe je je eigen klassen registreert, zodat redacteurs een merklook op naam kiezen in plaats van klassennamen te typen.

Een klasse toepassen

  1. Open de instellingen van het element en vind HTML classes onderaan het paneel General.
  2. Klik op het vak en kies een klasse uit de lijst. Typen in het vak filtert de lijst.
  3. Om een klasse in te voeren die niet in de lijst staat, klik je op Edit as text en typ je hem.
  4. Klik in het dialoogvenster op Save en daarna op Save op de builderwerkbalk.

De klassen komen in het attribuut class van het element in de opgeslagen HTML. HTML ID en klassen loodst redacteurs door veelvoorkomend gebruik.

Wat de lijst bevat

De editor bouwt de lijst wanneer hij start. Hij voegt drie bronnen samen in deze volgorde:

  1. De ingebouwde lijst. Die heeft een groep Drop shadows, een korte groep Bootstrap classes en de Bootstrap 5-utilities, gegroepeerd per taak: Display & Visibility, Responsive Visibility, Margins, Padding, Text Colors en meer.
  2. Een groep voor elk geïnstalleerd thema waarvan de .info.yml een sleutel dxpr_builder_classes heeft. De groep is gelabeld met de naam van het thema.
  3. Wijzigingen van modules; zie Klassen registreren vanuit een module.

De lijst HTML classes open in het paneel General van een Tekst-element, gescrolld naar de groep DXPR Theme met vermeldingen zoals Inline Form en Background color: DXPR Theme accent1

Elke site heeft dus klassen voor ruimte, zoals mt-3 en px-4, voor weergave, zoals d-none, en voor tekst, zoals text-center en fw-bold. Je stelt er niets voor in.

Klassen registreren in een thema

Voeg een dxpr_builder_classes-mapping toe aan de .info.yml van het thema. Elke sleutel is een klassenaam, of meerdere gescheiden door spaties; elke waarde is het label dat redacteurs zien. DXPR Theme registreert zijn klassen zo:

dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

  1. Voeg de mapping toe aan themes/custom/mytheme/mytheme.info.yml:

    dxpr_builder_classes:
  brand-card: 'Brand card'
  brand-card shadow-lg: 'Brand card with shadow'

  2. Schrijf de CSS voor de klassen in een library die het thema op elke pagina laadt; zie Aangepaste CSS.

  3. Wis de caches met drush cr, zodat Drupal het infobestand opnieuw leest.

  4. Open de instellingen van een element en controleer of HTML classes een groep met de naam van je thema en de twee vermeldingen toont.

Elk geïnstalleerd thema met de sleutel voegt zijn groep toe, niet alleen het standaardthema. De groep draagt altijd de naam van het thema; het infobestand kan hem niet hernoemen.

Klassen registreren vanuit een module

Een aangepaste module kan klassen toevoegen, of klassen verwijderen die een thema heeft geregistreerd, met een alter hook. De ingebouwde Bootstrap-vermeldingen kan hij niet verwijderen, omdat de editor die in de browser toevoegt. De code staat op Hooks API-referentie.

Bootstrap-versie

De ingebouwde lijst is Bootstrap 5. Als je thema geen Bootstrap 5 laadt, zet je Sideload Bootstrap files op Bootstrap 5 onder Bootstrap bij DXPR Studio > DXPR Builder > General Settings, zodat de klassen CSS erachter hebben. Zie Performance voor wat dat laadt.

Als je je klassen niet ziet

  • De groep van je thema ontbreekt in HTML classes. Drupal gebruikt nog de oude kopie van het infobestand van het thema. Klik op Clear all caches bij Configuration > Development > Performance (/admin/config/development/performance), of draai drush cr.
  • Een thema met de sleutel voegt geen groep toe. Alleen geïnstalleerde thema's tellen. Installeer het thema bij Appearance (/admin/appearance); het hoeft niet het standaardthema te zijn.
  • Het element ziet er hetzelfde uit nadat je een klasse hebt gekozen. Er laadt geen CSS voor die klasse op de pagina. Voeg de regels toe aan een library die je thema laadt; zie Aangepaste CSS. Voor Bootstrap-klassen, zie Bootstrap-versie.

Wat nu?