Styling
For theme developers and site administrators customizing event appearance.
All plugin elements use CSS custom properties prefixed with --nte-. Override any of them in your theme’s stylesheet or in Appearance > Customize > Additional CSS to change how events look without touching plugin files.
CSS custom properties
Colors
| Variable | Default | Controls |
|---|---|---|
--nte-color-primary | #2563eb | Buttons and links |
--nte-color-primary-hover | #1d4ed8 | Button and link hover state |
--nte-color-text | #1f2937 | Main body text |
--nte-color-text-muted | #5a616e | Secondary labels and captions |
--nte-color-border | #82858c | Dividers and outlines |
--nte-color-background | #fff | Page background |
--nte-color-background-alt | #f9fafb | Card and panel backgrounds |
--nte-color-success | #10b981 | Confirmation states |
--nte-color-warning | #f59e0b | Warning indicators |
--nte-color-error | #ef4444 | Error states |
Spacing
| Variable | Default | Note |
|---|---|---|
--nte-spacing-xs | 0.25rem | Tight internal gaps |
--nte-spacing-sm | 0.5rem | Small component padding |
--nte-spacing-md | 1rem | Standard component spacing |
--nte-spacing-lg | 1.5rem | Section spacing |
--nte-spacing-xl | 2rem | Block-level vertical rhythm |
Typography
| Variable | Default | Note |
|---|---|---|
--nte-font-family | Theme body font | Falls back to inherit |
--nte-font-size-sm | 0.875em | Labels and metadata |
--nte-font-size-base | 1em | Body text |
--nte-font-size-lg | 1.125em | Subheadings |
--nte-font-size-xl | 1.25em | Headings |
No text renders below 0.75rem regardless of overrides – this floor is enforced for legibility.
Layout
| Variable | Default | Controls |
|---|---|---|
--nte-container-max-width | 1200px | Plugin container width |
--nte-container-wide-width | 1400px | Wide layout variant |
--nte-radius-sm | 0.25rem | Tag and badge corners |
--nte-radius-md | 0.375rem | Card corners |
--nte-radius-lg | 0.5rem | Modal and panel corners |
How to override
Add overrides to Appearance > Customize > Additional CSS, or in your theme’s style.css:
:root {
--nte-color-primary: #c0392b;
--nte-color-primary-hover: #922b21;
--nte-font-family: Georgia, serif;
}
Changes cascade to all plugin elements automatically. You do not need to target individual plugin classes for color or spacing changes.
Settings vs. CSS
Events > Settings > Display > Theme Colors auto-detects colors from your active theme’s palette and sets the --nte-* color variables at runtime. Enabling Customize colors on that tab lets you set each role manually.
CSS overrides you add here take precedence over the Settings values. The order of priority is:
- Your theme or Additional CSS
- Theme Colors settings (Events > Settings)
- Plugin defaults (the values in the table above)
The Date Badge Color setting (under Display > Image display) sets --nte-date-bg independently of the color role system.
Class naming
All plugin classes use the nte- prefix. Target them in your CSS if you need element-specific changes that custom properties cannot address:
/* Widen event cards */
.nte-event-card {
max-width: 400px;
}
Responsive behavior
The plugin uses mobile-first responsive breakpoints. Grids collapse from multi-column to single-column at 768px and 480px. Single event pages stack their layout at 640px. The calendar collapses its day columns at 768px and simplifies further at 480px. Container padding increases at 768px.