The Tasty Recipes plugin comes with minimal styling so as to keep it very lightweight and adaptable. The plugin automatically picks up the styles of your theme and makes the recipes blend into the rest of your site seamlessly.
However, some people are interested in a more "recipe card" look, or want to add custom styling for other reasons. This article goes over how to apply any provided CSS styles to Tasty Recipes.
If you are interested in creating your own styles for Tasty Recipes, we give some examples of how to do that in this help doc: How can I create custom CSS for Tasty Recipes?
If you are looking for pre-made recipe card styles, see this help doc: Where can I get recipe card styles?
If you downloaded a recipe card style from the WP Tasty website
Recipe card styles are downloaded from the WP Tasty website in a zipped file. After downloading this zipped file, unzip it on your computer. After unzipping, you should see a folder with the name of the card style (eg. elegant-recipe-card/). Inside that folder is a file with the name tasty-recipes.css.
Some recipe card templates may include multiple files. The Bold template, for example, has three: a tr-images/ folder containing icon images, a tasty-recipes.css file, and a tasty-recipes.php file. If the template comes with multiple files, you will need all the files for the template to work properly.
How to apply provided styles to Tasty Recipes
There are two ways to add styles to the Tasty Recipes plugin: 1) upload the stylesheet to your theme directory, and 2) add the styles to the customizer in your WordPress dashboard.
Uploading the stylesheet to your theme directory
This method requires that you have FTP access to your blog's files. It is also the only way to use templates that come with multiple files, such as the Bold template.
- Navigate via FTP to your current active theme files. The path to this probably looks something like wp-content/themes/your-theme-name. If there are multiple theme folders, select the one that is currently active on your site.
- Place your recipe card stylesheet in this folder. The stylesheet must be named tasty-recipes.css. Any other name will not work. If your template came with multiple files, place all the included files and folders into your theme folder. If the template had files included inside another folder (eg. /tr-images/), place the entire folder in your theme folder - do not place the images in your theme folder individually.
- View a Tasty Recipe to ensure the styles are being loaded (you may need to clear your cache).
That's it! The Tasty Recipes plugin will automatically recognize the file by the filename and will apply the styles whenever a Tasty Recipe is loaded.
You can also watch the quick video below (1 min) to see where to place your Tasty Recipes stylesheet:
Add the styles to the customizer in the WordPress dashboard
This method requires that you are running WordPress 4.7 or later, and that your theme supports custom CSS via the customizer. It also only works for templates that come with only a tasty-recipes.css file and no other files.
- Log in to your WordPress dashboard. Navigate to Appearance -> Customize -> Additional CSS (if you have the "Edit CSS" option, you can just click that).
2. Copy the contents of the provided stylesheet. Paste these styles into the box with numbered lines on the left-hand side.
3. Save the changes.
4. View a Tasty Recipe to ensure the styles are being loaded (you may need to clear your cache).