Customising the Recipe Plugin

thepatternedplate · Member · Jan 19, 2014 at 5:40 pm
Copy link

Add topic to favorites
Hi, I am really excited about the new Recipe Plugin. And it works a treat. My question is whether the plugin can be further customised. I have the CSS Customisation Upgrade and thought I could perhaps use it?

What I want to do is this; I would like to add my blog banner to the plug in as a header, so that when a reader prints it, the banner (or blog logo) will be printed above the recipe title and content.

Is this possible?

Thanks in advance
Caroline

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Jan 20, 2014 at 5:42 pm
Copy link
I’m so excited that you like the recipe shortcode. Yay! And yes, you can absolutely customize the design of it if you have the Custom Design upgrade—that’s exactly what it’s for.

The recipe titles have a class named “jetpack-recipe-title” that we can use as a selector. We’ll just add a background image and some extra padding and a minimum height to give the logo some space. Here’s a starter example I created using the a WordPress logo as the image:
```
.jetpack-recipe-title {
	background: url(http://s.w.org/about/images/logos/wordpress-logo-32-blue.png) no-repeat;
	padding-left: 40px;
	min-height: 32px;
}
```
To use this for your recipes, change the url() value to your own image and adjust the padding an height until it looks good.

One neat thing about this solution is that it should work well for any theme. :)
thepatternedplate · Member · Jan 21, 2014 at 3:05 pm
Copy link
Hi designsimply. Thanks for that. It worked perfectly! I noted that it doesn’t print with the logo. Is there any way to change that? If not, it’s no issue, just being pedantic!!!
designsimply · Member · Jan 22, 2014 at 10:35 pm
Copy link
Hey! So I tested a couple things, and tested some more, couldn’t get it to work, looked around at the global print stylesheet for WordPress.com, tested a little more, and figured out in the end that the print function inside the recipe shortcode is run through a jQuery plugin and because of that, we can’t hook into it using CSS only.

This means we can’t make the logo printable for now. However, I did forward a suggestion to the developers to add an option for that because I think it’s a great idea!
thepatternedplate · Member · Jan 23, 2014 at 2:55 pm
Copy link
Cracking! Thanks designsimply, really appreciate the trouble you went through and for forwarding the suggestion. In the meantime, I shall enjoy the plugin, it makes things so much better! :D
designsimply · Member · Jan 23, 2014 at 4:45 pm
Copy link
No problem! The printable logo option for recipes might be something we can add later. If we do, we’ll reply back here to let ya know. Until then, cheers. :)
kylenemichele · Member · Feb 4, 2014 at 6:51 pm
Copy link
I am actually having an issue with printing in general. When I hit the print button it will only print the title and the meta information underneath the title. Nothing I type into the actual recipe area will work. Is there a reason for that? Do I need to do something differently?
designsimply · Member · Feb 7, 2014 at 8:01 pm
Copy link
@kylenemichele, could you start a new help request for your issue since it’s separate from the original one mentioned in this thread and please include a link to an example page where the problem is happening?

No items found.