Recipe plugin shortcodes
-
Hello,
I have some questions about the recipe shortcode which I hope you can help me with.
1. Can I change the colour of the line under the recipe title (currently red)?
2. Can I create a darker outline of the whole recipe or a background colour that defaults to white on a printout?
3. It would be great if the printout was exactly the same as the blog version. Currently, the thumbnail picture is in a different location and the font changes.
4. Is there a shortcode for adding a source at the end of the recipe?
5. Once I’ve sussed out the right shortcodes and any CSS, can I embed my preferences in a ‘1-click recipe button’ on my New Post page, otherwise I’m going to have to type it all out every time (and remember it!)
Thanks very much.The blog I need help with is: (visible only to logged in users)
-
Can you point me to a location where you have used the recipe shortcode in a post or page so I can take a look? I looked at several and the recipes are all just written in the post content.
-
I hadn’t wanted to activate any of the shortcodes on my recipes until I was happy with the format, but I understand that it would help to see what I’m talking about! I’ve just activated shortcodes on ‘Quinoa Kedgeree’ on the front page of my blog. I hope that hopes and thank you.
-
I’m going to reply to your questions in batches.
1. Can I change the colour of the line under the recipe title (currently red)?
Sure! Add this to your custom CSS:
.jetpack-recipe-title { border-bottom-color: #XXXXXX; }Replace the Xs with your colour code.
-
2. Can I create a darker outline of the whole recipe or a background colour that defaults to white on a printout?
You can add a background colour and/or darker outline to your recipe with:
.jetpack-recipe { background-color: #XXXXXX; /* include for background colour */ border-color: #XXXXXX; /* include for darker outline */ }The outline and any background colour you may add is not included in the print version.
-
3. It would be great if the printout was exactly the same as the blog version. Currently, the thumbnail picture is in a different location and the font changes.
The font in the print version is preset and can’t be changed.
I’ll see if anything can be done about the image position.
-
4. Is there a shortcode for adding a source at the end of the recipe?
Nothing special is needed to add a source at the end or anywhere else in the recipe and it isn’t part of the shortcode – the available options are listed here. You can just add it as another line of text, adding a link using the post editor.
-
5. Once I’ve sussed out the right shortcodes and any CSS, can I embed my preferences in a ‘1-click recipe button’ on my New Post page, otherwise I’m going to have to type it all out every time (and remember it!)
You won’t have to repeat any CSS. Once you add it to your CSS Editor, it will be applied automatically to all recipes you’ve displayed on your site via the shortcode.
-
To keep your images right-aligned in the print version of the recipe, add this to your custom CSS:
@media print { img { text-align: right; } } -
Regarding the print font, I’ve done some testing and it doesn’t look like it’s possible to override the Palatino font designated in the global print stylesheet.
-
You are amazing! All but one of the shortcodes is doing the trick. The only one I’m having trouble with is the image placement on the printout. It’s still printing out on the left in the middle of the text. Any ideas? Also, if I can’t override the font in the printout, am I able to change the size of the title in the printout or make it stand out more in any way? Thank you so much.
-
The only one I’m having trouble with is the image placement on the printout. It’s still printing out on the left in the middle of the text. Any ideas?
Apologies, the code I gave you was an older, incomplete version I’d been testing. Please try this instead:
@media print { .jetpack-recipe img { text-align: right; } } -
Actually, that’s no longer working anymore – let me do some more testing and get back to you!
-
We are going to make a few changes to the way recipe titles and images are displayed within the recipe shortcode when printed. I’ll keep you posted here when they go live!
-
Ok. That’s great. Out of interest, are we talking days or weeks? And thanks again for your help so far.
-
-
The changes have gone through – you will likely need to clear your browser’s cache to see the effect.
The printed recipe title is now larger (16pt instead of 14pt) and the image alignment should be preserved. I hope you like it. :)
-
That’s great. I’m not sure which shortcode to use though for the larger title etc.. Interested to see how it looks…
Any chance of a border around the printout, like this one? http://naturallyella.com/maple-pecan-granola/ Sorry, I feel like I’ve asked a lot of you!
-
You don’t need to change anything on your end to see the larger title – the change we made will affect the print style for all recipes. Try a print preview after clearing your browser cache and you should see how it looks.
Here’s how it looks in Firefox print preview, for example: https://cloudup.com/cRAcZt4wBJo
I think a border might be a bit too dramatic of a change to the print style. Since anything we change affects all users of the shortcode – some of whom might not want a border – we need to limit ourselves to small changes only.
-
Hello again. I’ve managed to implement all those changes and am much happier with the layout and colour on my blog. Thank you.
I’m still not entirely happy with the printout. I think it looks really old-fashioned. It would be great if WordPress could introduce some more custom design options for the printout, but I understand that it’s not possible at the moment.
My remaining bugbear is that when viewing the new recipe layout on my mbl, my name/link gets split in a strange place. Ideally, authorship of the recipe would be an option along with title, servings, time, difficulty at the top of the template. Is it possible to add ‘author’ to these options?
Thanks again for your help.
- The topic ‘Recipe plugin shortcodes’ is closed to new replies.
WordPress.com Forums 