Developers
Block styles
The built-in blocks come with a lightweight stylesheet, designed to be overridden by your theme with no effort.
How styles are loaded
Each built-in block loads, with its HTML, a shared stylesheet (base.css) and its own stylesheet, located in plugins/lucaspalomba/pagetree/assets/css/blocks/. On the website, each file is included only once per page. These styles therefore work with any layout, in the preview as well as on the website.
Zero specificity with :where()
All rules are written inside :where(). Their specificity is zero: any rule of your theme, even a simple class selector, wins.
/* In PageTree */
:where(.ptb-btn) { border-radius: var(--ptb-radius); }
/* In your theme: wins without !important */
.ptb-btn { border-radius: 0; }The --ptb-* variables
Colors and sizes come from CSS custom properties. Redefine them in your theme to adapt all blocks at once:
:root {
--ptb-primary: #0f766e; /* buttons, "Primary color" backgrounds */
--ptb-primary-contrast: #fff;
--ptb-secondary: #475569;
--ptb-light: #f3f4f6; /* light backgrounds */
--ptb-dark: #1f2937; /* dark backgrounds */
--ptb-radius: 0.5rem;
--ptb-gap: 1.5rem;
--ptb-space-s: 1rem; /* Small / Medium / Large / Extra large spacing */
--ptb-space-m: 2rem;
--ptb-space-l: 4rem;
--ptb-space-xl: 6rem;
--ptb-container: 1200px; /* width of a "Centered" section */
}Full list of variables and default values:
| Variable | Default | Usage |
|---|---|---|
--ptb-primary | #2563eb | Primary color (buttons, backgrounds) |
--ptb-primary-contrast | #ffffff | Text on the primary color |
--ptb-secondary | #475569 | Secondary color |
--ptb-secondary-contrast | #ffffff | Text on the secondary color |
--ptb-light | #f3f4f6 | "Light" background |
--ptb-light-contrast | inherit | Text on a light background |
--ptb-dark | #1f2937 | "Dark" background |
--ptb-dark-contrast | #ffffff | Text on a dark background |
--ptb-border | rgba(0, 0, 0, 0.12) | Borders |
--ptb-muted | rgba(0, 0, 0, 0.6) | Secondary text |
--ptb-radius | 0.5rem | Corner radius |
--ptb-gap | 1.5rem | Space between items |
--ptb-space-s to --ptb-space-xl | 1rem, 2rem, 4rem, 6rem | Spacing sizes |
--ptb-container | 1200px | Width of a "Centered" section |
The gallery also uses --ptb-gallery-columns and --ptb-gallery-gap.
The ptb-* classes
The block HTML uses classes prefixed with ptb-, following the block / element / modifier convention. You can target them directly:
| Class | Element |
|---|---|
.ptb | Shared block wrapper |
.ptb-btn, .ptb-btn--primary, .ptb-btn--secondary, .ptb-btn--outline, .ptb-btn--link | Buttons and their styles |
.ptb-btn--s, .ptb-btn--m, .ptb-btn--l | Button sizes |
.ptb-theme--light, .ptb-theme--dark, .ptb-theme--primary | Colored backgrounds |
.ptb-align--left, --center, --right | Text alignment |
.ptb-section, .ptb-section__inner, .ptb-section__grid, .ptb-section__cell | Section and its columns |
.ptb-hero, .ptb-hero__title, .ptb-hero__subtitle | Hero banner |
.ptb-card, .ptb-cards | Cards |
.ptb-gallery, .ptb-lightbox | Gallery and lightbox |
.ptb-accordion__item, .ptb-accordion__question | Questions / answers |
Each block has its own classes (.ptb-quote, .ptb-files__list, .ptb-mediatext, .ptb-video…). For the exact list, see the files in the plugin's assets/css/blocks/ folder.
Buttons are links. A theme rule such as a { color: … } wins over the block styles, which have zero specificity: the text of a button can then take the color of your links. Give .ptb-btn--primary and the other styles their own colors in your theme.
.ptb-btn--primary,
.ptb-btn--primary:hover {
color: var(--ptb-primary-contrast);
}Example: matching your brand guidelines
:root {
--ptb-primary: #b91c1c;
--ptb-radius: 0;
--ptb-container: 1080px;
}
.ptb-hero__title {
font-family: var(--font-display);
letter-spacing: -0.02em;
}