Geef builderinhoud stijl met de CSS van je thema.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

Builderinhoud van DXPR is deel van de pagina die je thema rendert, dus de CSS van je thema geeft het stijl in de editor en op de gepubliceerde pagina. Gebruik deze pagina wanneer een look op veel elementen of pagina's moet terugkeren, of wanneer de elementinstellingen hem niet kunnen maken. Je eindigt met een stylesheet in je thema en een klasse die redacteurs kunnen toepassen. Voor één element gebruik je zijn instellingendialoogvenster.

Voordat je begint

  • Je hebt toegang tot de bestanden van je thema en een manier nodig om ze te deployen.
  • Gebruik een aangepast thema of een subthema. Een update van een bijgedragen thema vervangt zijn bestanden, en daarmee je CSS.

Instellen

  1. Maak css/custom.css in de map van je thema, bijvoorbeeld themes/custom/mytheme/css/custom.css.

  2. Declareer het bestand in mytheme.libraries.yml:

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

  3. Laad de library op elke pagina vanuit mytheme.info.yml:

    libraries:
  - mytheme/global-styling

  4. Schrijf een regel voor een eigen klassenaam:

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

  5. Wis de cache bij Configuration > Development > Performance (/admin/config/development/performance) met Clear all caches, of draai drush cr.

  6. Open in de builder de instellingen van een Section en voeg brand-hero toe onder HTML classes. HTML ID en klassen toont hoe je een eigen klasse typt.

Redacteurs kunnen de klasse ook uit de lijst HTML classes kiezen zodra je thema hem daar vermeldt; zie Utility-klassen.

Wat je ziet

De sectie neemt het verloop en de witte tekst over zodra je de klasse toevoegt, omdat de editor draait op de pagina die je thema rendert. Bezoekers zien hetzelfde nadat je de pagina hebt opgeslagen. De klasse wordt in de HTML van de pagina bewaard, dus door de regel later te wijzigen werk je elk element met die klasse bij.

Klassen die DXPR Builder schrijft

Je eigen klasse is het veiligste doelwit. Deze klassen staan ook in de opgeslagen HTML:

Selector Matcht
.az-container de wrapper van elk DXPR Builder-veld; die heeft ook .dxpr-editor terwijl iemand het bewerkt
.az-section elke Section; erin zit een .container, of .container-fluid wanneer Full width aanstaat
.row elke Row; DXPR Builder gebruikt Bootsraps eigen klasse, geen az-row
.col-* elke kolom, bijvoorbeeld .col-12.col-md-6; er is geen az-column
.az-text, .az-image, .az-button, .az-card één elementtype: az- plus de naam van het element, zoals .az-separator voor de Divider
.az-element de meeste inhoudselementen, maar niet Image, Icon of Button

Het paneel Style schrijft inline style-attributen, die een klasseregel op dezelfde eigenschap verslaan. Bootstrap-utilityklassen zijn gemarkeerd met !important en verslaan beide.

Als je de stijl niet ziet

  • De klasse staat op het element, maar er verandert niets. De library is niet geladen, of de cache bevat nog de oude CSS. Controleer of mytheme.info.yml de library vermeldt en wis daarna de caches op /admin/config/development/performance.
  • Slechts enkele eigenschappen gelden. Een Style-paneelwaarde op dezelfde eigenschap wint. Wis die waarde in het Style-paneel van het element, of verplaats de hele look naar je klasse.
  • De stijl toont in de editor maar niet voor bezoekers. Apply text format filters to frontend content staat aan en het tekstformaat van het veld stript class-attributen. Zet het uit onder Text Filters op /admin/dxpr_studio/dxpr_builder/settings, of sta klassen toe in het formaat.
  • Een regel voor .az-row of .az-column matcht nooit. DXPR Builder schrijft die klassen niet. Richt op .row, de .col-*-klassen of je eigen klasse.

Wat nu?