How to Customize Recipe Card Blocks

1. From the Settings page & Block Settings

Recipe Card Blocks PRO includes multiple color options both in the Settings page and in the Block settings, so make sure to check those sections if you want to make some changes.

Color Options in the Settings page

In the Appearance tab, you can change global colors, which will be applied to future recipes or recipes in which the Style wasn’t changed.

In the Ratings tab you can change the rating stars color:

When editing a recipe, you will find that some color options are also available in the Block settings:

Please keep in mind that making changes to individual blocks will not affect other recipes on your website. Colors added in the Block settings will override any color changes made in the future in the plugin’s Settings page.

2. By adding Custom CSS code

If you want to make more changes to the recipe blocks, like changing the fonts or additional colors, you can do that by applying custom CSS code.

Using this method you’ll be able to customize elements that can’t be modified using the built-in styling options from your plugin.

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

In WordPress you can add Custom CSS code directly from Customizer > Additional CSS:

By adding custom CSS code you can easily change fonts, colors, background, margins and paddings of any element on your website, including the recipe blocks:

CSS code to customize the Jump to Recipe buttons

After adding this CSS code in the Customizer, the buttons will look like this:

How to Find CSS Selectors in Google Chrome

CSS selectors can be found by using your browser’s web inspector tools. This is the preferred way to view CSS because it’s more comprehensive and will show you all the CSS that applies rather than just a subset of it.

These three basic steps will work in most current browsers to open the web inspector:

1. Right-click on a web page element
   In Safari, go to Preferences > Advanced and enable the Develop menu first.
   In Internet Explorer 10, go to Tools > F12 Developer Tools instead.
2. Select the “Inspect Element” option
3. Look for a panel at the bottom of the screen

The panel will show the HTML for the element you clicked and all the CSS that applies to it. You can click on different HTML elements in the panel and then look at the CSS on the right to figure out what CSS can be copied into your Custom CSS panel to make design customizations on CSS.

Here is a video walkthrough showing how the web inspector works in Google Chrome:

Once you find the needed selectors to modify, copy your CSS code with the changes you need and insert it in the Customizer > Additional CSS.

Other resources:
CSS Basics
How to Inspect Element on Chrome: Easy Ways to Edit a Web Page

[Video] How to add Custom CSS to WordPress
[Video] Using Custom CSS Plugins to Edit WordPress