Customizing Menu and Review Appearance

Steuard can match the main colors and type of your restaurant website without custom CSS. The Appearance settings apply site-wide to Steuard menus and reviews, including blocks, shortcodes, classic-editor placements, and editor previews. Everything defaults to inheriting from your theme — nothing changes until you choose a value. Any Menu post can override these values for itself (see the end of this guide).

Go to Steuard → Menu Options → Display, then scroll to Appearance.

Choose the site-wide colors #

• Accent color changes menu headings, Featured-layout dividers, and the selected underline in tabbed menus. It also colors the review links ("See all", "Read full response"), the owner-reply border, and the Write-a-review button when your theme has no button style of its own. Clear the field to keep Steuard's existing palette and theme-provided heading colors.
• Heading colors override the accent for the menu title and section titles individually.
• Item text colors set the item name and item description colors.
• Price & calorie colors cover flat and multi-size prices, and the calorie note.
• Borders & size accents color section dividers, subgroup boxes, and the tab rail, and the Featured layout's size-price flourishes.
• Review-star color changes the stars in the average rating and every review card.
• Menu tag colors set the background and optional text color for labels such as Vegan or Gluten-Free. Clear the text color to inherit it from the site theme.

Every field except the star and tag-background colors can be cleared to inherit — a cleared field means your theme (or Steuard's existing palette) stays in charge of that element.

Typography #

Typography offers four choices for the body font:

• Inherit theme fonts (default) — usually the most natural result.
• System sans-serif / System serif — neutral stacks using fonts already on the visitor's device.
• Custom font stack — type a CSS font stack such as "Playfair Display", Georgia, serif. The fonts must already be loaded by your site (by the theme or a fonts plugin) — Steuard does not download fonts.

Heading font stack (optional) sets a separate display face for layouts that use one — Trattoria and Pub. Leave it blank to keep the body font. The same "already loaded by your site" rule applies.

The live preview #

The preview under the fields is the real menu renderer — the same markup and stylesheets your visitors see, switchable between the Basic, Featured, Trattoria, and Pub layouts. It updates live as you pick colors and fonts. Your theme still controls surrounding spacing and inherited typography, so click Save Changes and check a real page for the final result.

When both tag colors are selected, Steuard calculates their contrast. A warning appears below the fields when the pair is below the recommended 4.5:1 ratio for normal text. The warning does not block saving, because the final theme can still affect the result. Always inspect the published page.

The Manual and Composed menu editors' Preview windows also load your theme's stylesheet and global styles, so their type and colors match the live site closely. CSS added by page builders or extra theme stylesheets is not mirrored there — the published page remains the final check.

Restore the original design #

Click Reset to defaults to stage Steuard's original colors, inherited tag text, and inherited theme fonts. Reset does not immediately change the site. Click Save Changes to apply the restored values.

The defaults preserve the appearance used before these settings were added, so an existing site does not change just because Steuard was updated.

Override the design for one menu #

Every Toast, Manual, and Composed Menu post has an Appearance group on its Display tab with the same color and font fields. They show the effective site-wide defaults; set a value there and it applies only to that menu, everywhere it is placed. Clear a field to go back to following Menu Options. New Menu posts inherit everything, so one site-wide change keeps reaching them until you override a value.

For creating and consistently using dietary or custom labels, see Menu Item Tags and Dietary Labels.

Developer CSS properties #

Developers can override the same design tokens in theme CSS. Scope overrides to Steuard's wrappers so they do not affect unrelated content:

.steuard-menus,
.steuard-grid-layout,
.steuard-tabs,
.steuard-reviews {
	--steuard-accent-color: #005f73;
	--steuard-review-star-color: #ee9b00;
	--steuard-tag-background-color: #cae9ff;
	--steuard-tag-text-color: #001219;
	--steuard-font-family: Georgia, "Times New Roman", serif;
}

Available properties (all color/font properties are also editable in the settings screen; the rest are developer-only):

A class-scoped developer rule overrides the low-specificity values generated by the settings screen. Keep text/background pairs readable and test both desktop and narrow layouts. In Windows forced-colors and similar high-contrast modes, Steuard yields these decorative colors to the visitor's system colors.