Styliser le contenu du builder avec le CSS de votre thème.

Apprendre DXPR BuilderGérer le siteAux couleurs de votre marque

Le contenu DXPR Builder fait partie de la page que votre thème rend, donc le CSS de votre thème le stylise dans l’éditeur et sur la page publiée. Servez-vous de cette page quand un aspect doit se répéter sur beaucoup d’éléments ou de pages, ou quand les réglages d’élément ne peuvent pas le produire. Vous terminez avec une feuille de style dans votre thème et une classe que les contributeurs peuvent appliquer. Pour un élément isolé, utilisez son dialogue de réglages.

Avant de commencer

  • Il faut l’accès aux fichiers de votre thème et un moyen de les déployer.
  • Utilisez un thème personnalisé ou un sous-thème. Une mise à jour d’un thème contribué remplace ses fichiers, et votre CSS avec eux.

Configuration

  1. Créez css/custom.css dans le dossier de votre thème, par exemple themes/custom/mytheme/css/custom.css.

  2. Déclarez le fichier dans mytheme.libraries.yml :

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

  3. Chargez la bibliothèque sur chaque page depuis mytheme.info.yml :

    libraries:
  - mytheme/global-styling

  4. Écrivez une règle pour un nom de classe à vous :

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

  5. Videz le cache sous Configuration > Development > Performance (/admin/config/development/performance) avec Clear all caches, ou exécutez drush cr.

  6. Dans le builder, ouvrez les réglages d’une Section et ajoutez brand-hero sous HTML classes. HTML ID and classes montre comment saisir une classe à vous.

Les contributeurs peuvent aussi choisir la classe dans la liste HTML classes une fois que votre thème l’y liste ; voir Classes utilitaires.

Ce que vous voyez

La section prend le dégradé et le texte blanc dès que vous ajoutez la classe, car l’éditeur tourne sur la page que votre thème rend. Les visiteurs voient pareil après enregistrement de la page. La classe est stockée dans le HTML de la page, donc changer la règle plus tard met à jour chaque élément qui l’a.

Classes écrites par DXPR Builder

Votre propre classe est la cible la plus sûre. Ces classes sont aussi dans le HTML enregistré :

Sélecteur Correspond à
.az-container l’enveloppe de chaque champ DXPR Builder ; il a aussi .dxpr-editor pendant qu’on le modifie
.az-section chaque Section ; à l’intérieur se trouve un .container, ou .container-fluid quand Full width est activé
.row chaque Row ; DXPR Builder utilise la classe propre de Bootstrap et n’ajoute pas az-row
.col-* chaque colonne, par exemple .col-12.col-md-6 ; il n’y a pas de az-column
.az-text, .az-image, .az-button, .az-card un type d’élément : az- plus le nom de l’élément, comme .az-separator pour le Divider
.az-element la plupart des éléments de contenu, mais pas Image, Icon ni Button

Le panneau Style écrit des attributs style en ligne, qui battent une règle de classe sur la même propriété. Les classes utilitaires Bootstrap sont marquées !important et battent les deux.

Si vous ne voyez pas le style

  • La classe est sur l’élément, mais rien ne change. La bibliothèque n’est pas chargée, ou le cache garde l’ancien CSS. Vérifiez que mytheme.info.yml liste la bibliothèque, puis videz les caches sous /admin/config/development/performance.
  • Seules certaines propriétés s’appliquent. Une valeur du panneau Style sur la même propriété gagne. Effacez cette valeur dans le panneau Style de l’élément, ou mettez tout l’aspect dans votre classe.
  • Le style s’affiche dans l’éditeur mais pas pour les visiteurs. Apply text format filters to frontend content est activé, et le format de texte du champ retire les attributs class. Désactivez-le sous Text Filters sous /admin/dxpr_studio/dxpr_builder/settings, ou autorisez les classes dans le format.
  • Une règle pour .az-row ou .az-column ne correspond jamais. DXPR Builder n’écrit pas ces classes. Ciblez .row, les classes .col-* ou votre propre classe.

Et ensuite ?