# Privacy Settings: how to style?

**URL:** <https://community.piwik.pro/t/privacy-settings-how-to-style/970>\
**Category:** Privacy\
**Created:** [September 7, 2022, 2:56pm UTC](https://community.piwik.pro/t/privacy-settings-how-to-style/970 "2022-09-07T14:56:27Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![michiel](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/michiel/32/236_2.png) [@michiel](https://community.piwik.pro/u/michiel)\
**Post date:** [September 7, 2022, 2:56pm UTC](https://community.piwik.pro/t/privacy-settings-how-to-style/970/1 "2022-09-07T14:56:27Z")

</div>

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:

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/1X/42446c95410de2bf6a4b2d23abd0001a811826e4.png)

---

<div class="post-metadata">

**Author:** ![Admin](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@Admin](https://community.piwik.pro/u/Admin)\
**Post date:** [September 7, 2022, 3:05pm UTC](https://community.piwik.pro/t/privacy-settings-how-to-style/970/2 "2022-09-07T15:05:13Z")

</div>

Hi. There’s a visual editor for that:

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/1X/98837d6aa1e394e68cff932678634b126acdabbc.png)

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.

---

<div class="post-metadata">

**Author:** ![michiel](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/michiel/32/236_2.png) [@michiel](https://community.piwik.pro/u/michiel)\
**Post date:** [September 8, 2022, 7:15am UTC](https://community.piwik.pro/t/privacy-settings-how-to-style/970/3 "2022-09-08T07:15:16Z")

</div>

Hi @Admin,  
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:

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

```

This doesn’t:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Admin](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@Admin](https://community.piwik.pro/u/Admin)\
**Post date:** [September 8, 2022, 3:30pm UTC](https://community.piwik.pro/t/privacy-settings-how-to-style/970/4 "2022-09-08T15:30:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![michiel](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/michiel/32/236_2.png) [@michiel](https://community.piwik.pro/u/michiel)\
**Post date:** [September 8, 2022, 6:30pm UTC](https://community.piwik.pro/t/privacy-settings-how-to-style/970/5 "2022-09-08T18:30:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Admin](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@Admin](https://community.piwik.pro/u/Admin)\
**Post date:** [September 9, 2022, 10:17am UTC](https://community.piwik.pro/t/privacy-settings-how-to-style/970/6 "2022-09-09T10:17:50Z")

</div>

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.

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/1X/e829f065744d17d12497f94b6aa5aecdc73b85ed.png)

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).

---

<div class="post-metadata">

**Author:** ![michiel](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/michiel/32/236_2.png) [@michiel](https://community.piwik.pro/u/michiel)\
**Post date:** [September 9, 2022, 5:26pm UTC](https://community.piwik.pro/t/privacy-settings-how-to-style/970/7 "2022-09-09T17:26:52Z")

</div>

Hi @Admin,  
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! 😉
