Styling fields on edit screens

CAFE fields on posts, pages, custom post types and terms use their own stylesheet (assets/build/fields.css). Every color, radius and spacing in it comes from a CSS custom property, so you can change the look without rewriting any rules.

#1. Appearance settings (no code)

CAFE → Settings → Appearance sets the main values for the whole site:

A field group can also have its own Box color (group settings). It adds a colored top border to the meta box and uses that color as the accent inside it.

#2. Override variables with CSS

All other variables have defaults on :root. Override them in any admin stylesheet, or with the cafe_edit_screen_css filter:

add_filter( 'cafe_edit_screen_css', function ( string $css ) {
	return $css . '
		:root { --cafe-input-height: 42px; --cafe-label-size: 14px; }
		.cafe-scope { --cafe-input-radius: 4px; }
	';
} );

--cafe-input-radius, --cafe-accent-soft and --cafe-focus-ring are derived from other variables on .cafe-scope. To change them, set them on .cafe-scope (or a more specific selector), not on :root.

#Useful selectors

Example: give one group a green accent and square inputs.

#cafe-group-group_hero {
	--cafe-accent: #16a34a;
	--cafe-input-radius: 0;
}

The class names and variables listed here are part of CAFE's public surface and are kept stable between minor versions.