Classes utilitaires.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

Chaque élément a un champ HTML classes avec une liste de classes nommées. Les utilitaires Bootstrap 5 et les ombres portées sont intégrés. Votre thème peut ajouter son propre groupe via son .info.yml, et un module via un hook de modification. Cette page explique ce que la liste contient et comment enregistrer vos propres classes, pour que les contributeurs choisissent un aspect de marque par son nom au lieu de saisir des noms de classe.

Appliquer une classe

  1. Ouvrez les réglages de l’élément et trouvez HTML classes en bas du panneau General.
  2. Cliquez sur la zone et choisissez une classe dans la liste. Saisir dans la zone filtre la liste.
  3. Pour saisir une classe hors liste, cliquez sur Edit as text et saisissez-la.
  4. Cliquez sur Save dans le dialogue, puis sur Save sur la barre d’outils du builder.

Les classes entrent dans l’attribut class de l’élément dans le HTML enregistré. HTML ID and classes guide les contributeurs dans les usages courants.

Ce que la liste contient

L’éditeur construit la liste à son démarrage. Il fusionne trois sources dans cet ordre :

  1. La liste intégrée. Elle contient un groupe Drop shadows, un court groupe Bootstrap classes et les utilitaires Bootstrap 5, regroupés par fonction : Display & Visibility, Responsive Visibility, Margins, Padding, Text Colors et autres.
  2. Un groupe pour chaque thème installé dont le .info.yml a une clé dxpr_builder_classes. Le groupe porte le nom du thème.
  3. Les changements des modules, voir Enregistrer des classes depuis un module.

La liste HTML classes ouverte dans le panneau General d’un élément Text, défilée jusqu’au groupe nommé DXPR Theme avec des entrées comme Inline Form et Background color: DXPR Theme accent1

Chaque site a donc des classes d’espacement, comme mt-3 et px-4, d’affichage, comme d-none, et de texte, comme text-center et fw-bold. Vous ne configurez rien pour elles.

Enregistrer des classes dans un thème

Ajoutez un mapping dxpr_builder_classes au .info.yml du thème. Chaque clé est un nom de classe, ou plusieurs séparés par des espaces ; chaque valeur est le libellé vu par les contributeurs. DXPR Theme enregistre ses classes ainsi :

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. Ajoutez le mapping à themes/custom/mytheme/mytheme.info.yml :

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

  2. Écrivez le CSS des classes dans une bibliothèque chargée par le thème sur chaque page ; voir CSS personnalisé.

  3. Videz les caches avec drush cr, pour que Drupal relise le fichier info.

  4. Ouvrez les réglages d’un élément et vérifiez que HTML classes montre un groupe au nom de votre thème avec les deux entrées.

Chaque thème installé avec la clé ajoute son groupe, pas seulement le thème par défaut. Le groupe porte toujours le nom du thème ; le fichier info ne peut pas le renommer.

Enregistrer des classes depuis un module

Un module personnalisé peut ajouter des classes, ou retirer des classes enregistrées par un thème, avec un hook de modification. Il ne peut pas retirer les entrées Bootstrap intégrées, car l’éditeur les ajoute dans le navigateur. Le code est sur Référence de l’API des hooks.

Version de Bootstrap

La liste intégrée est en Bootstrap 5. Si votre thème ne charge pas Bootstrap 5, réglez Sideload Bootstrap files sur Bootstrap 5 sous Bootstrap sous DXPR Studio > DXPR Builder > General Settings, pour que les classes aient du CSS derrière elles. Voir Performance pour ce que cela charge.

Si vous ne voyez pas vos classes

  • Le groupe de votre thème manque dans HTML classes. Drupal utilise toujours l’ancienne copie du fichier info du thème. Cliquez sur Clear all caches sous Configuration > Development > Performance (/admin/config/development/performance), ou exécutez drush cr.
  • Un thème avec la clé n’ajoute aucun groupe. Seuls les thèmes installés comptent. Installez le thème sous Appearance (/admin/appearance) ; il n’a pas besoin d’être le thème par défaut.
  • L’élément semble pareil après avoir choisi une classe. Aucun CSS pour cette classe ne se charge sur la page. Ajoutez les règles à une bibliothèque chargée par votre thème, voir CSS personnalisé. Pour les classes Bootstrap, voir Version de Bootstrap.

Et ensuite ?