--- url: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/customization/custom-css' title: 'Styliser le contenu du builder avec le CSS de votre thème | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T10:59:30+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: '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.' tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T10:59:30+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Styliser le contenu du builder avec le CSS de votre thème' description: '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.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T10:59:30+0000' dateModified: '2026-10-24T10:59:30+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/customization/custom-css' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/customization/custom-css' description: '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.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Help Center](/fr/hc)/[Documentation](/fr/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # Styliser le contenu du builder avec le CSS de votre thème. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Classes utilitaires](/fr/hc/documentation/learn-dxpr-builder/customization/utility-classes) - [Utiliser vos polices de marque sur les pages du builder](/fr/hc/documentation/learn-dxpr-builder/customization/custom-fonts) - [Ajouter les styles de marque et les boutons à l’éditeur de texte](/fr/hc/documentation/learn-dxpr-builder/customization/text-editor) 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](/hc/documentation/learn-dxpr-builder/element-settings). ## 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` : ```yaml global-styling: css: theme: css/custom.css: {} ``` 3. Chargez la bibliothèque sur chaque page depuis `mytheme.info.yml` : ```yaml libraries: - mytheme/global-styling ``` 4. Écrivez une règle pour un nom de classe à vous : ```css .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](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) 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](/hc/documentation/learn-dxpr-builder/customization/utility-classes). ## 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 ? - [Classes utilitaires](/hc/documentation/learn-dxpr-builder/customization/utility-classes) : listez vos classes sous **HTML classes** pour que les contributeurs les choisissent. - [Polices personnalisées](/hc/documentation/learn-dxpr-builder/customization/custom-fonts) : charger des polices de marque de la même façon. - [Éditeur de texte](/hc/documentation/learn-dxpr-builder/customization/text-editor) : proposer des classes pour paragraphes et mots dans la liste **Styles**.