Changing Nutritional Label Styling

  • Resolved mukopu3a

    (@mukopu3a)


    4 years, 8 months ago

    Hi there, just installed your plugin to test (never been in a recipe niche, so it’s my trial attempt).

    I ‘ve searched the support forum and found something on nutritional label styling but it wasn’t helpful for my specific problem.

    I’d like to adjust #zrdn-nutrition-label
    .nutrition-facts__header in a way that it will be H4 instead of H2. (The phrase – “Nutrition Facts”)

    Otherwise, it keeps randomly popping out in my table of contents and it doesn’t look very good.

    Also is there a way to customize the fields? (as other vitamins and nutrients for instance – if using freemium?)

    Is there a way to do so?

    Also was looking into the premium version of your plugin – it looks quite promising with all the warnings fixing and automatic nutritional value generation however I’d def prefer lover version and not friend one. Since it’s my trial website that might fail and I am on a shoestring budget I’d love to join someone who’s willing to buy 5 license package to share. Is there any way to connect with such people? Maybe you have a Facebook group for that or you can sent a newsletter of some sort to call for all who would like to join?

    Many thanks in advance,
    Sincerely,
    Ana

Viewing 12 replies - 1 through 12 (of 12 total)
  • Thread Starter mukopu3a

    (@mukopu3a)

    4 years, 8 months ago

    Also was wondering if all the attributes (like description, tags, category, etc.) can be applied if one post includes several recipes.

    Thank you in advance!

    • This reply was modified 4 years, 8 months ago by mukopu3a.
    Plugin Author Rogier Lankhorst

    (@rogierlankhorst)

    4 years, 8 months ago

    Hi @mukopu3a,

    You can use the following css to change the size of the nutrition label header:

    #zrdn-nutrition-label h2.nutrition-facts__title {
    font-size: 14px;
}

    Please contact us at https://ziprecipes.net/support for your question on the premium plan: as this is the free forum I’m not allowed to discuss the premium plugin here.

    As for your last question: Each post should only contain one recipe. You can then show multiple posts on an archive page, or using the grid: https://demo.ziprecipes.net/recipe-gallery/

    Thread Starter mukopu3a

    (@mukopu3a)

    4 years, 8 months ago

    Thank you for the prompt response.

    I’ve tried the suggested CSS code but it doesn’t seem to be doing anything. And “Nutrition facts” are still pulled out by table of contents. (I cleared the cache and everything)

    Any other ideas on how to fix it?

    (And thank you for the advice to contact premium support – I ll do it in a bit).

    Plugin Author Rogier Lankhorst

    (@rogierlankhorst)

    4 years, 8 months ago

    I think we have to add a class to make sure it overrides the original style. I just tested this and it worked:

    #zrdn-nutrition-label .nutrition-container h2.nutrition-facts__title {
    font-size: 14px;
}

    Can you check if that works?

    Thread Starter mukopu3a

    (@mukopu3a)

    4 years, 8 months ago

    Well, it visually decreased the size of the font, but it’s still H2 as far as the source code is concerned, I guess – so it’s still getting pulled out by the table of contents 🙁

    Plugin Author Rogier Lankhorst

    (@rogierlankhorst)

    4 years, 8 months ago

    It’s only css, so the element will stay H2. But you can style it anyway you want with CSS. If you can share a link I can take a look. You might need some additional CSS. You can also send the link to support@ziprecipes.net

    Thread Starter mukopu3a

    (@mukopu3a)

    4 years, 8 months ago

    Hmm maybe it has to do something with #zlrecipe-title too.

    It pulls out the title and the nutrition facts.

    My table of contents only uses H2 and H3s in the text.

    And the funny thing is that #zlrecipe-title is reflected in that structure as H3 even though it doesn’t seem to be a headline at all.

    maybe looking it the page will help to explain what i mean https://vegketodiet.com/hemp-yogurt
    I’d prefer not to have recipes items in my table of contents at all (because the scroll doesn’t work properly)

    Hope there’s a way to do so?

    Mark

    (@markwolters)

    4 years, 8 months ago

    Could you post a link to your table of contents so we can see the issue? It’s currently not possible to change the element from an h2 into an h4, it is possible to change the appearance of the recipe specific h2’s by adding Rogier’s CSS.

    Thread Starter mukopu3a

    (@mukopu3a)

    4 years, 8 months ago

    I posted it in my previous message – just in case – https://vegketodiet.com/hemp-yogurt

    Well if there’s no way of changing H2s in the plugin I definitely won’t be able to use it… 🙁 what a shame…

    If there’s a chance you can come up with some solution – let me know please!

    Thread Starter mukopu3a

    (@mukopu3a)

    4 years, 8 months ago

    OK!! I found workaround myself :))) Thank you!!!

    Mark

    (@markwolters)

    4 years, 8 months ago

    Sorry, totally missed that was your table of contents. Glad to hear you managed to solve the issue! How did you manage to fix it?

    Thread Starter mukopu3a

    (@mukopu3a)

    4 years, 8 months ago

    I ‘ll be adding extra words in recipe titles in the card (Recipe Card) and thus I’ll be able to customize my table of content (not include *recipe card* and “nutrition facts”

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Changing Nutritional Label Styling’ is closed to new replies.