Meta Box

How do I add a class to the favourite post button and icon?

Support › MB Favorite Posts › How do I add a class to the favourite post button and icon?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 10, 2024 at 10:42 PM #45632
    YasmineYasmine
    Participant

    I need to add an extra class to allow dynamic styling, thanks!

    June 11, 2024 at 8:43 PM #45633
    PeterPeter
    Moderator

    Hello Yasmine,

    You can use the shortcode to add your own custom class to the button

    [mbfp-button class="my-custom-class"]

    Please follow the documentation https://docs.metabox.io/extensions/mb-favorite-posts/#shortcodes

    June 11, 2024 at 9:01 PM #45635
    YasmineYasmine
    Participant

    Hi thanks - I did try that: [mbfp-button class="research--sdg" show_count="false" add="Save for later" Icon="star" added="Saved" ]

    But it still doesn't let me change the colour of the icon and text - I have some code to change the colour of certain elements depending on the blog type so I set a $custom_color to a shortcode [custom_link_color] - for all the other elements assigned theresearch--sdg - it sets them as $custom_color but it does not work for this button.

    June 11, 2024 at 10:43 PM #45637
    PeterPeter
    Moderator

    If you use the Inspect tool of the browser, do you see the custom class added to the button element? Please check this screenshot https://imgur.com/a/hnLxnkI

    If yes, then the issue lies in your custom CSS code, not in the class itself.

    June 20, 2024 at 6:06 PM #45672
    YasmineYasmine
    Participant

    The class is being added. I can successfully change the background colour using my custom code.

    But I still cannot change the text. In the inspector, I see that the correct colour is being applied:

    .research--sdg-mb, .research--sdg-mb a, .research--sdg-mb svg {
    color: #00689D !important;
    fill: #00689D !important;
    }

    How do I target the text? It is not in the inspector so I can't see how the text was targeted.

    June 20, 2024 at 6:12 PM #45673
    YasmineYasmine
    Participant

    Of course as soon as I write this I figure out its span

    June 20, 2024 at 6:36 PM #45675
    YasmineYasmine
    Participant

    Final request: Can you add the bookmark icon as an option to choose ?

    June 21, 2024 at 10:29 PM #45682
    PeterPeter
    Moderator

    You can change the favorite icon from the admin area > Settings > Favorite Posts > Icon tab.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.