Styling and appearance

← All documentation

VolunteerPress has no appearance settings, because it does not need any: everything it puts on your site — opportunity lists, shift sheets, the calendar, signup forms — picks up your theme’s look automatically. This page explains what is inherited and what you can adjust.

What the plugin takes from your theme

Text is set in your theme’s font. Buttons, links, and highlights use your theme’s accent color (its “primary”, “accent”, or “link” color, whichever it defines). Spacing follows your theme’s block spacing, and surfaces and borders derive from the text color itself, so they stay legible on light and dark backgrounds alike. Change your theme — or restyle it under Appearance → Editor → Styles — and VolunteerPress follows without any steps on your part.

Two things are deliberately not inherited: VolunteerPress keeps its own compact text sizes so schedules stay dense and readable under any theme, and its status colors (available, nearly full, closed) mean the same thing everywhere rather than shifting with the theme’s palette.

What you can adjust

There is no settings page for colors or typography — plainly: nothing under VolunteerPress → Settings controls appearance. The levers are the standard WordPress ones:

  • Block settings. Select a VolunteerPress block in the editor to see its options — the Opportunities List block chooses its number of columns, how many opportunities to show per page, and whether to include only opportunities with upcoming shifts, and an optional category filter; the calendar block chooses its default view. These are layout choices, not styling, and they are the only per-block settings.
  • Theme styles. Because the plugin reads your theme’s colors, restyling the theme restyles the plugin. Changing your theme’s accent color in the Styles editor is the supported way to re-tint VolunteerPress.
  • Custom CSS, if you want full control. Every VolunteerPress color, radius, and spacing value is a CSS custom property with a --vpress- prefix, declared at zero specificity — a theme or a few lines of additional CSS can override any of them. For example, .vpress-calendar { --vpress-accent: #7a1f3d; } re-tints the calendar alone.

If a change you make does not show up on the site, it is usually a caching layer, not the styling: see Changes don’t show on your site.