CSS personnalisée

Dernière mise à jour le 23 mars 2026

Le panneau Styles du builder couvre les besoins de mise en forme courants : couleurs, espacement, typographie et disposition. Quand vous avez besoin de quelque chose que les contrôles visuels n’offrent pas, l’éditeur CSS et les ressources externes vous permettent d’aller plus loin.

L’éditeur CSS

Cliquez sur le bouton Custom CSS dans la barre d’outils en haut du canevas pour ouvrir l’éditeur CSS global. Écrivez vos règles CSS et appuyez sur Ctrl+Entrée (ou Cmd+Entrée sur Mac) pour enregistrer.

L’éditeur CSS avec des exemples de styles

La CSS écrite ici s’applique globalement à l’ensemble du modèle. C’est particulièrement utile pour styliser les blocs HTML — qui ne disposent pas de contrôles visuels — et pour ajouter des effets que le panneau Styles ne prend pas en charge.

/* Styliser le contenu d'un bloc HTML */
.product-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Ajouter un soulignement décoratif aux titres */
h2 {
  border-bottom: 2px solid #db2777;
  padding-bottom: 8px;
}
Le builder génère des classes utilitaires Tailwind CSS pour ses styles visuels. Vos règles CSS personnalisées prennent effet aux côtés des utilitaires Tailwind. Si vous devez remplacer un style généré par Tailwind, augmentez la spécificité de votre sélecteur ou utilisez !important en dernier recours.

Styles arbitraires

Le panneau Styles comporte une section Custom en bas. Elle permet d’appliquer de la CSS arbitraire à des éléments individuels sans écrire de règles globales.

La section Custom en bas du panneau Styles

Les styles arbitraires utilisent la syntaxe entre crochets de Tailwind : [property:value]. Par exemple, ajouter [outline:2px_solid_purple] et [outline-offset:10px] trace un contour violet autour de cet élément spécifique.

C’est utile pour des ajustements ponctuels — un mix-blend-mode spécifique, un filter, ou n’importe quelle propriété CSS que les contrôles visuels n’exposent pas.

Polices web personnalisées

La section Text du panneau Styles inclut un sélecteur de famille de police avec accès à Google Fonts. Pour les polices provenant d’autres fournisseurs, utilisez @font-face ou @import dans l’éditeur CSS :

/* Police auto-hébergée ou tierce */
@font-face {
  font-family: 'Brand Sans';
  src: url('https://your-cdn.example.com/fonts/brand-sans.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

.brand-heading {
  font-family: 'Brand Sans', sans-serif;
}
Le chargement des polices web ajoute un peu de temps à la génération des documents. Limitez-vous à une ou deux familles de polices quand c’est possible pour garder un rendu rapide.

Feuilles de styles externes

Pour les bibliothèques ou frameworks CSS, utilisez le gestionnaire External Assets (Ressources externes). Cliquez sur le bouton External Assets dans la barre d’outils, puis ajoutez l’URL CDN de la feuille de styles que vous souhaitez inclure.

L’éditeur External Assets avec une URL CDN CSS

Les feuilles de styles externes sont chargées avant le rendu du modèle, donc toutes leurs classes et styles sont disponibles immédiatement. Les utilisations courantes incluent :

  • Bibliothèques d’icônes — Font Awesome, Material Icons, Bootstrap Icons
  • Outils spécialisés — feuilles de styles dédiées à l’impression, bibliothèques de graphiques CSS
Les ressources externes nécessitent une connexion internet active pendant la génération des documents. Assurez-vous que vos URL CDN sont fiables et accessibles publiquement. Si une URL est injoignable, les styles ne s’appliqueront pas.

Différence avec les modèles Code

Dans les modèles Code, vous écrivez la CSS dans un onglet CSS dédié. Le builder sépare les responsabilités différemment : les styles globaux vont dans l’éditeur CSS, les styles arbitraires par élément passent par la section Custom du panneau Styles, et les bibliothèques externes passent par le gestionnaire External Assets.

Pages associées

  • JS personnalisé — JavaScript global, scripts en ligne dans les blocs HTML et bibliothèques JS externes

Questions fréquentes

Comment ajouter de la CSS personnalisée à un modèle builder PDFMonkey ?
Cliquez sur le bouton Custom CSS dans la barre d’outils du builder pour ouvrir l’éditeur CSS global. Écrivez vos règles et appuyez sur Ctrl+Entrée (Cmd+Entrée sur Mac) pour enregistrer. La CSS s’applique globalement à l’ensemble du modèle, y compris à l’intérieur des blocs HTML.
Peut-on utiliser des polices web personnalisées dans les modèles builder PDFMonkey ?
Oui. Le panneau Styles inclut un sélecteur Google Fonts. Pour les polices d’autres fournisseurs, utilisez des règles @font-face ou @import dans l’éditeur CSS avec une URL pointant vers vos fichiers de polices hébergés.
Comment ajouter des bibliothèques CSS externes à un modèle PDFMonkey ?
Utilisez le gestionnaire External Assets dans la barre d’outils du builder et ajoutez l’URL CDN de la feuille de styles. Les feuilles de styles externes se chargent avant le rendu du modèle, toutes leurs classes sont donc immédiatement disponibles. Les utilisations courantes incluent les bibliothèques d’icônes comme Font Awesome.
Comment appliquer de la CSS arbitraire à un seul élément dans le builder PDFMonkey ?
Sélectionnez l’élément, ouvrez l’onglet Styles et descendez jusqu’à la section Custom en bas. Saisissez des valeurs en utilisant la syntaxe à crochets de Tailwind, comme [outline:2px_solid_purple], pour appliquer des propriétés CSS ponctuelles que les contrôles visuels n’exposent pas.
Navigation