Font updates do not reach button text

  • Resolved Harm10

    (@harm10)


    7 months, 3 weeks ago

    I am using a font plugin to overrule fonts on the whole site. This works with inline adding of font-family: inherit.

    The effect of the changed default font does reach the text displayed witthin the elements of wpconsent plugin but does not for the text used within the buttons.

    I tried overruling with !important but that does not seem to work.

    I also tried to add html codes within the button texts but these are removed?

    So how to get my changed default font into button texts for wpconsent buttons?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Mircea Sandu

    (@gripgrip)

    7 months, 3 weeks ago

    Hi @harm10,

    The WPConsent banner is loaded using the Shadow DOM to avoid styles from the theme spilling into the banner, thus ensuring compatibility with any theme. This comes with some limits to what you can customize via regular CSS approaches.

    We added “part” parameters to all the important elements of the Banner and Preferences panel to make customization easier. These can be used to target specific elements.

    In your case, for the buttons you can use the following code to change the font family of all the buttons:

    ::part(wpconsent-button-preferences),
::part(wpconsent-button-cancel),
::part(wpconsent-button-accept) {
	font-family: Courier;
}

    Just replace Courier with your desired font family.

    We’ll look into making the buttons follow the same approach as the banner that inherits the styles for easier setup in a future version.

    Thanks,
    Mircea

    Thread Starter Harm10

    (@harm10)

    7 months, 2 weeks ago

    @gripgrip Thanks for your reply. Where do I put (or find) these part parameters?

    • This reply was modified 7 months, 2 weeks ago by Harm10.
    Plugin Author Mircea Sandu

    (@gripgrip)

    7 months, 2 weeks ago

    Hi @harm10,

    You can use the CSS code that I shared to change the styles for the buttons you indicated. You can find the part parameters by inspecting the banner in your browser using the browser Inspect Element option. If you want to read more about how that works please check this article: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

    Thread Starter Harm10

    (@harm10)

    7 months, 2 weeks ago

    @gripgrip I put the css code in the style.css of my child theme and then it works!

    I was too fast. It works on the buttons of the consent banner but not if I select the Settings pop-up. The buttons there are unchanged.

    Again too fast………… 🙁
    You need to add the parts of these 3 buttons as well:
    ::part(wpconsent-button-preferences),
    ::part(wpconsent-preferences-save-button),
    ::part(wpconsent-preferences-cancel-button),
    ::part(wpconsent-preferences-accept-button),
    ::part(wpconsent-button-cancel),
    ::part(wpconsent-button-accept) {
    font-family: Courier;
    }

    • This reply was modified 7 months, 2 weeks ago by Harm10.
    • This reply was modified 7 months, 2 weeks ago by Harm10.
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Font updates do not reach button text’ is closed to new replies.