Privacy Settings: how to style?

Hi!
I’m working on implementing the consent manager, including the privacy settings code. I’d like to change the styling of the paragraph and button to match our brand, but as all styling is added by Piwik with a !important declaration, it’s impossible to overwrite the default styling.

I think the best solution would be to drop the !important declaration… In the meantime: is there a way to work around this issue?

Example of the styles currently being added by Piwik:

Hi. There’s a visual editor for that:

If you’re lacking some functionality here, you can add additional styles via custom tag in tag manager. Just remember to use !important there as well.

Hi @kuba,
Thanks! Yes, I know I can apply styling through the visual editor, but that doesn’t cover everything. For example: custom fonts or border-radius is not available. I was able to add those styles through a custom tag for the cookiebanner, but it doesn’t seem to work for the cookie-settings, even if I apply !important to the styles.

This works:

#ppms_cm_privacy_settings * { font-family: 'Montserrat', sans-serif !important; }

This doesn’t:

button.ppms_cm_privacy_settings_button_show { border-radius: 9999px !important }

When I load the page I can briefly see the border-radius applied, just before the default styling is loaded.

Can you share the website where it’s implemented? I’d like to play with it a bit.

Yes, sure! We’re currently developing, so you can only access the site with a login. I created a username and password for you that I’ll share through a private message.

Ok, I guess we found it. .ppms_cm_privacy_settings_button_show is a class name and your custom code used #ppms_cm_privacy_settings_button_show. The correct ID for this button is #ppms_cm_privacy_settings_button. I fixed the selector and it looks it’s working.

Btw. please also make sure you update the look&feel for the English language. Initially I was confused, because styles in my browser were different (it picked English instead of Dutch).

Hi @kuba,
Thanks for your help! I fixed the translation as well. Would be great if you could edit the styling globally and the text individually for each language! :wink:

1 Like