Skip to content

Developer reference

Style PressFlow with scoped CSS and appearance tokens

Keep custom presentation compatible with selected states, user colours and responsive layout.

PressFlow 1.25.3 · 2 min read

Guide source reviewed for PressFlow 1.25.1.

Use the welcome appearance controls before adding CSS. They validate hex colours, provide independent front/admin palettes and correct unsafe foreground/background pairings. Do not replace those controls with a site-wide button rule.

Core tokens

TokenPurpose
--pfw-accent, --pfw-accent-hoverContrast-corrected filled actions.
--pfw-on-accentForeground text/icons on filled actions.
--pfw-linkReadable accent link colour.
--pfw-ink, --pfw-mutedMain and secondary text.
--pfw-paper, --pfw-surfaceNeutral backdrop and white component surface.
--pfw-border, --pfw-control-borderDividers and form controls.
--pfw-selectedSubtle selected surface.
--pfw-focus, --pfw-focus-softKeyboard-focus indication.
--pfw-success, --pfw-warning, --pfw-dangerSemantic states, with companion soft colours.

--pfw-brand-cobalt represents the chosen raw accent; it need not equal the corrected action colour. Despite its name, it is not always blue.

Scoped changes

.pfw-configurator {
  --pfw-font: system-ui, sans-serif;
}

.pfw-from-price small {
  line-height: 1.5;
}

Place CSS in your child theme/site integration and load it after the relevant components. The appearance layer writes protected palette tokens on high-specificity plugin roots with !important. A casual :root override may therefore have no effect. Prefer saved palette settings; when a deeper override is necessary, inspect the rendered selector and keep it tightly scoped.

Use the existing .pfw-configurator, .pfw-from-price, .pfw-cart-item-tools, .pfw-job-workspace, .pfw-admin-page and .pfw-production roots as appropriate. Component selectors and internal classes are version-bound; review them on updates.

Template overrides

The main configurator template is directly required from the plugin's templates/configurator.php. This release does not offer a generic child-theme override loader for that template. Do not tell users to copy it into a WooCommerce theme folder and expect it to replace the original.

Use shortcodes/hooks and scoped CSS for product layout. Customer email templates are different: they use wc_get_template() and can be overridden through the normal theme email paths. See Developer emails.

Acceptance checks

Check selected/unselected cards, filled/outlined controls, active matrix cells, hover/focus, disabled state, validation errors, long labels, VAT text and a narrow screen. Keep text/icon colour readable on the chosen accent. Preserve semantic state, focus visibility, selected markers and accessible labels rather than using colour alone.

Do not globally recolour warnings, success or errors to the brand accent. Do not hide an error because it disrupts the layout. Check mobile scrolling and fixed/sticky summary behavior with the actual theme's containers.

Related: Colours and layouts, Shortcodes, Testing.

Example screen

A narrow-screen product layout with the main description following the configurator.

Illustrative screen using sample shop content. Your products, prices and available controls depend on the shop configuration.

Example files

Reference examples for adapting to your shop. PHP examples are not plugin installers; review the guide and replace sample IDs before using them.

Need a hand?

Contact the PressFlow team with details of what you are trying to do.

Keep exploring