Customizing Jump to Recipe Button

  • Resolved manzez

    (@manzez)


    3 years, 2 months ago

    I am using the recipe card plug in on Gutenberg. I love that the Jump to Recipe and Print Recipe buttons self-populate, but how can I customize them?

    Thanks in advance for your help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Ina

    (@inamoro)

    Hi, @manzez

    What exactly do you want to customize? If it’s about color, font and shape, then it’s only possible with custom CSS code.

    Plugin Author WPZOOM

    (@wpzoom)

    @manzez Here’s some CSS code to help you customize those buttons:

    .wpzoom-recipe-card-buttons a.wpzoom-recipe-snippet-button {
    font-size: 14px;
    padding: 14px 20px;
    color: #fff;
    background-color: #e1581a;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
}

    You can add it in Customizer > Additional CSS.

    For additional steps, look here:
    https://recipecard.io/documentation/how-to-customize-recipe-card-blocks/

    • This reply was modified 3 years, 2 months ago by WPZOOM.
    Thread Starter manzez

    (@manzez)

    Thank you! That is exactly what I needed.

    @wpzoom thanks for the details. I’ve followed your CSS instructions and it works well for the buttons. However, the other CSS code on your page doesn’t seem to work to customize the orange in the recipe block. Any additional input?

    Plugin Author Ina

    (@inamoro)

    @manouapple what section are you trying to customize? Can you share a screenshot?

    Hi Ina,
    I don’t see an image option here. Please see the link. I’d like to change the orange to match the style of the site. https://healthcollective.life/nutrition/golden-milk-reduce-inflammation/

    I tried using this, but color stayed orange: 

    .wp-block-wpzoom-recipe-card-block-recipe-card.is-style-default .recipe-card-ingredients {
    color: #736458;
    background-color: #FBF9E7;
    border-radius: 3px;
    margin: 0 0 30px;
    padding: 25px 25px 5px;
    text-align: left;
}

    Thanks!

    Plugin Author Ina

    (@inamoro)

    @manouapple the code you are trying to add refers to another style of the recipe card.

    Use the following code:

    .wp-block-wpzoom-recipe-card-block-recipe-card.is-style-newdesign .details-items .detail-item .detail-item-icon {
    color: #9ad093 !important;
}

.wp-block-wpzoom-recipe-card-block-recipe-card.is-style-newdesign .ingredients-list>li .tick-circle {
    content: '';
    float: left;
    width: 18px;
    height: 18px;
    margin: 6px 10px 0 0;
    border-radius: 50%;
    border: 2px solid #9ad093 !important;
    cursor: pointer;
    position: relative;
}

    Please note that further customizations are available only if you use the PRO version of the plugin.

    @inamoro Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Customizing Jump to Recipe Button’ is closed to new replies.