Développeurs
Styles des blocs
Les blocs intégrés ont une feuille de style légère, conçue pour être surchargée par votre thème sans effort.
Comment les styles sont chargés
Chaque bloc intégré charge, avec son HTML, une feuille de style commune (base.css) et sa propre feuille, situées dans plugins/lucaspalomba/pagetree/assets/css/blocks/. Sur le site, chaque fichier n’est inclus qu’une fois par page. Ces styles fonctionnent donc avec n’importe quel layout, dans l’aperçu comme sur le site.
Une spécificité nulle avec :where()
Toutes les règles sont écrites dans :where(). Leur spécificité est nulle : n’importe quelle règle de votre thème, même un simple sélecteur de classe, l’emporte.
/* Dans PageTree */
:where(.ptb-btn) { border-radius: var(--ptb-radius); }
/* Dans votre thème : gagne sans !important */
.ptb-btn { border-radius: 0; }Les variables --ptb-*
Les couleurs et les tailles viennent de propriétés personnalisées CSS. Redéfinissez-les dans votre thème pour adapter tous les blocs d’un coup :
:root {
--ptb-primary: #0f766e; /* boutons, fonds « Couleur principale » */
--ptb-primary-contrast: #fff;
--ptb-secondary: #475569;
--ptb-light: #f3f4f6; /* fonds clairs */
--ptb-dark: #1f2937; /* fonds sombres */
--ptb-radius: 0.5rem;
--ptb-gap: 1.5rem;
--ptb-space-s: 1rem; /* espacements Petite / Moyenne / Grande / Très grande */
--ptb-space-m: 2rem;
--ptb-space-l: 4rem;
--ptb-space-xl: 6rem;
--ptb-container: 1200px; /* largeur d’une section « Centrée » */
}Liste complète des variables et valeurs par défaut :
| Variable | Défaut | Usage |
|---|---|---|
--ptb-primary | #2563eb | Couleur principale (boutons, fonds) |
--ptb-primary-contrast | #ffffff | Texte sur la couleur principale |
--ptb-secondary | #475569 | Couleur secondaire |
--ptb-secondary-contrast | #ffffff | Texte sur la couleur secondaire |
--ptb-light | #f3f4f6 | Fond « Clair » |
--ptb-light-contrast | inherit | Texte sur fond clair |
--ptb-dark | #1f2937 | Fond « Sombre » |
--ptb-dark-contrast | #ffffff | Texte sur fond sombre |
--ptb-border | rgba(0, 0, 0, 0.12) | Bordures |
--ptb-muted | rgba(0, 0, 0, 0.6) | Textes secondaires |
--ptb-radius | 0.5rem | Arrondi des angles |
--ptb-gap | 1.5rem | Espace entre éléments |
--ptb-space-s à --ptb-space-xl | 1rem, 2rem, 4rem, 6rem | Tailles d’espacement |
--ptb-container | 1200px | Largeur d’une section « Centrée » |
La galerie utilise en plus --ptb-gallery-columns et --ptb-gallery-gap.
Les classes ptb-*
Le HTML des blocs utilise des classes préfixées ptb-, au format bloc / élément / modificateur. Vous pouvez les cibler directement :
| Classe | Élément |
|---|---|
.ptb | Enveloppe commune des blocs |
.ptb-btn, .ptb-btn--primary, .ptb-btn--secondary, .ptb-btn--outline, .ptb-btn--link | Boutons et leurs styles |
.ptb-btn--s, .ptb-btn--m, .ptb-btn--l | Tailles de bouton |
.ptb-theme--light, .ptb-theme--dark, .ptb-theme--primary | Fonds colorés |
.ptb-align--left, --center, --right | Alignement du texte |
.ptb-section, .ptb-section__inner, .ptb-section__grid, .ptb-section__cell | Section et ses colonnes |
.ptb-hero, .ptb-hero__title, .ptb-hero__subtitle | Bannière |
.ptb-card, .ptb-cards | Cartes |
.ptb-gallery, .ptb-lightbox | Galerie et agrandissement |
.ptb-accordion__item, .ptb-accordion__question | Questions / réponses |
Chaque bloc a ses propres classes (.ptb-quote, .ptb-files__list, .ptb-mediatext, .ptb-video…). Pour la liste exacte, consultez les fichiers de assets/css/blocks/ du plugin.
Les boutons sont des liens. Une règle de votre thème comme a { color: … } l’emporte sur les styles des blocs, qui n’ont aucune spécificité : le texte d’un bouton peut alors prendre la couleur de vos liens. Donnez à .ptb-btn--primary et aux autres styles leurs propres couleurs dans le thème.
.ptb-btn--primary,
.ptb-btn--primary:hover {
color: var(--ptb-primary-contrast);
}Exemple : aligner les blocs sur la charte
:root {
--ptb-primary: #b91c1c;
--ptb-radius: 0;
--ptb-container: 1080px;
}
.ptb-hero__title {
font-family: var(--font-display);
letter-spacing: -0.02em;
}