Your consent preferences font-size

  • Resolved Samuel

    (@samuelmedina)


    2 years, 2 months ago

    The banner is very easily customizable, but when we clic the button “Learn more and customize” the pop-up/iframe with the preferences doesn′t change with the banner customization.

    Specifically the title “Your consent preferences” appears with a font-size: 48px!important, which is way too big:

    #purposes-content-container .purposes-header .purposes-header-title {
    font-size: 48px!important;
}

    How can it be reduced?

    I tried heavily with CSS and reading, but maybe because all the CSS in yuor code has “!iimportant” on it, it doesn′t make change.
    Also tried to apply the Advanced guide https://www.iubenda.com/en/help/1205-how-to-configure-your-cookie-solution-advanced-guide didn′t find the way.

    • This topic was modified 2 years, 2 months ago by Samuel.

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

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

    (@iubenda)

    Hi Samuel,

    you may want to create your own custom CSS.

    You can do this, using the applyStyles:false parameter (it excludes our default CSS) and add your own <style> tag to the page with the CSS you want for your banner.

    You can find a guide here: https://www.iubenda.com/en/help/1205-how-to-configure-your-cookie-solution-advanced-guide

    Here is an excerpt from our guide:

    applyStyles (boolean, default true) – By setting this parameter to false, no styling/CSS is applied to the banner; it is useful to set applyStyles to false for example when you want to give the banner a different style than the default. As a starting point for modifying the CSS of the banner, we recommend using the default CSS available at this address, which reapplies the same styles excluded from this option but has the advantage of being editable once inserted in your own pages.

    At this address you will find the link to the standard CSS that you may want to modify: https://iubenda.link/banner-css

    Here you can find a demo: https://codepen.io/iubenda/pen/81fa9bf50d83e70251eb94aae3658970

    Hope this helps.

    Thread Starter Samuel

    (@samuelmedina)

    In the cookie solution embed code “applyStyles”:false has only worked for me inside “banner”:{ … }, where it erases the CSS successfully but inside the banner brackets only affects the banner, not the pop-up/iframe with the preferences for the user to choose.

    If I place “applyStyles”:false, outside “banner”: {} it doesn′t do anything.

    Is there a specific place to place it outside the “banner” or in a way that affects the preferences’ pop-up?

    • This reply was modified 2 years, 2 months ago by Samuel.
    • This reply was modified 2 years, 2 months ago by Samuel.
    Plugin Author iubenda

    (@iubenda)

    Hi,
    please try to paste in the <head> tag of your website the following:

    <style>
    #purposes-content-container .purposes-header h1.purposes-header-title {
    font-size: 20px !important;
    }
    </style>

    This should override the default CSS for the PerPurpose layer.

    Hope this helps.

    Thread Starter Samuel

    (@samuelmedina)

    Thank you,

    I just pasted in the WordPress CSS editor the following, from the code you suggested:

    #purposes-content-container .purposes-header h1.purposes-header-title {
font-size: 20px !important;
}

    and it worked a charm!

    Maybe you should add this somehow to the advanced guide. Thanks again.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Your consent preferences font-size’ is closed to new replies.