How to Customize Recipe Cards

Recipe Card Blocks provides multiple built-in options for customizing colors, allowing you to match recipe cards to your theme and brand without using custom CSS in most cases.

Colors can be customized:

• globally, from the plugin’s Settings page
• per recipe, from the Recipe Card block settings
• per recipe template, from the Design settings

Fonts are typically inherited from your WordPress theme. Advanced visual changes can be made using custom CSS when needed.

Built-In Color Customization Options (Recommended)

Global Color Settings

Global color settings are available under Recipe Cards → Settings → Global Colors (All Skins)

These settings define default colors used by new recipes and across your site.

Design Tab: Global And Template-Specific Colors

The Design tab includes global color options and color options for each recipe template.

To adjust colors for a specific recipe template:

• click the gear icon next to the template name
• customize the colors used by that template independently

This allows you to use different color schemes for different recipe layouts while keeping a consistent structure.

Miscellaneous Tab: Button Colors

The Miscellaneous tab includes color options for the Jump to Recipe and Print Recipe buttons.

Use these options to ensure buttons match your site’s color scheme.

Ratings Tab: Star Color

The Ratings tab includes an option to customize the rating stars color.

This affects how recipe ratings are displayed on the front end and helps integrate them visually with your design.

Per-Recipe Color Overrides

Some color options are also available when editing an individual recipe in the Color Scheme section of the recipe card block options.

When a color is changed inside the Recipe Card block settings:

• that recipe will use the custom color
• global color changes may no longer affect that recipe for the overridden option

Per-recipe overrides are useful for special cases but should be used sparingly to keep designs consistent.

How Fonts Work In Recipe Card Blocks

Recipe Card Blocks does not include a dedicated font selector. Instead:

• fonts are inherited from your active WordPress theme
• this ensures visual consistency between recipe cards and the rest of your site

If you want to use different fonts specifically for recipe cards, custom CSS is required.

When To Use Custom CSS (Advanced)

Custom CSS is recommended only when:

• you want to override theme fonts for recipe cards
• you need styling not exposed in the plugin’s settings
• you want very specific visual adjustments

Many customizations that previously required CSS can now be done using built-in color options.

Looking for an easy way to customize your website?
Try YellowPencil Pro, a Visual Design Tool for WordPress.

You can add custom CSS from Appearance → Customize → Additional CSS.

CSS added here applies site-wide, including recipe cards.

Examples:

Change fonts, colors, background, margins, and paddings of the entire recipe block:

Customize Jump to Recipe and Print buttons: