How to add custom CSS to Tasty Recipes

The Tasty Recipes WordPress plugin comes with a variety of recipe card templates that you can use on your website with just a click of a button. 

However, we recognize that those styles might not be exactly what you want, so we’ve tried to make it as easy as possible for you to customize. 

Making stylistic changes with CSS

If you’re happy with the overall layout and information presented on your recipe, then you may only need to make stylistic changes with CSS.

CSS stands for Cascading Stylesheets. It’s the language your website uses to communicate style and layout to the reader's browser. If your website was a house, then CSS would be the definition for wall paint color, ceiling height, or type of flooring.

We recommend adding custom styles to the Custom CSS area of the WordPress Dashboard. Navigate to Appearance → Customize → Additional CSS and add your styles there.

Alternatively, Tasty Recipes supports automatically importing a custom stylesheet file. All you’ll need to do is create a tasty-recipes.css file in your theme directory, and the plugin will render the contents of the file any time a recipe is displayed. Using a child theme? Make sure the CSS file is in your child theme directory, not the parent theme. Watch the video below (1 min) to see how to do this.

After you edit your stylesheet, you’ll need to refresh the page (and potentially clear the cache) in order to see the styles applied. If you don’t see your styles applied, you may need to make your style more specific (e.g. .tasty-recipes h3 may need to become .entry-content .tasty-recipes h3 ).

Ready to take your CSS to the next step? Try using the Inspector tool in Chrome, Safari or Firefox to see a real-time preview of your CSS changes.

Sample CSS Tricks

Once you’re in a good place to begin making style changes, here are a few examples of changes you might want to make.

Turn recipe details (e.g. author, yield, total cook time) into an inline list

Before:

CSS:

.tasty-recipes-details ul {
  list-style-type: none;
  margin: 0;
}
.tasty-recipes-details ul li {
  display: inline-block;
  margin-right: 15px;
}

 

After:

 

 

Add a background color to the recipe header

Before:

CSS:

.tasty-recipes h2 {
  background-color: #b12707;
  padding: 10px;
  color: #FFF;
}

After:

Add a border around the recipe

Before:

CSS:

.tasty-recipes {
  border: 1px solid #EFEEFE;
  padding-left: 25px;
  padding-right: 25px;
  margin-bottom: 15px;
}

After:

Modifying the PHP recipe template

If you want to substantially change the layout of the recipe, you’ll need to modify the PHP recipe template. It can be a bit tricky, and potentially take down your site, so we encourage you to try to make your changes with CSS first, which is much less destructive. Check out this support article for more about using custom PHP recipe templates: Can I use a custom PHP recipe template?