Embedded paragraph for privacy settings

[heisner]

The code around the embedded paragraph for “Privacy settings on your page” (Content Manager > Privacy Policy) might need a little attention.
Not sure if you prefer a topic per findings or like this.

I’ve found a couple of bugs like:

1. If I select another language than English and try to edit the font color, the color doesn’t change accordingly on the website.

Same for button text color and more.

2. I can’t get padding styles for the button to work.
   
   

Suggestions for improved usability:

a) I would suggest the styling is the same no matter what language you choose. (So, for future upgrades, styling and translations could be two different entries in the Piwik Pro tool - or at the least work as ‘one setting’ no matter what language you have chosen.)

b) In general, I would suggest not using the !important keyword in styling. Piwik uses very specific class names, so it shouldn’t be necessary. As the CSS for the embedded paragraph is loaded last it gets a bit cumbersome to fix styling issues and overwrite with customized styling.

c) The available snippet suggests using the < h1 > tag. I would suggest a div instead as h1 is usually used as the main header for a page, not a paragraph and it isn’t a SEO-friendly approach. (I’ve happily just left out that h1 tag without any issues).

d) There is a min-size on the paragraph at 480px. It isn’t really needed and it’s too large for small screens to be truly responsive. If needed, it could be set to 200px. That leaves room for margins, padding, etc. (A workaround is possible with a more specific style declaration if anyone needs that).

pseudo-code:
.entry-content > div.piwikbox {
min-width: 200px !important;
}

[heisner]

@heisner

d) There is a min-size on the paragraph at 480px. It isn’t really needed and it’s too large for small screens to be truly responsive. If needed, it could be set to 200px. That leaves room for margins, padding, etc. (A workaround is possible with a more specific style declaration if anyone needs that).

pseudo-code:
.entry-content > div.piwikbox {
min-width: 200px !important;
}

Oh, I just now saw it is possible to change the min-width to ‘auto’. Looks like this works well

[Maciej_Kowcun]

Hi,

Thank you for your suggestions.

@heisner

If I select another language than English and try to edit the font color, the color doesn’t change accordingly on the website.

It seems like a bug, but I can’t reproduce it. Styles should be the same for all languages.

@heisner

I can’t get padding styles for the button to work.

Could you be more specific? I can’t reproduce it.

@heisner

a) I would suggest the styling is the same no matter what language you choose. (So, for future upgrades, styling and translations could be two different entries in the Piwik Pro tool - or at the least work as ‘one setting’ no matter what language you have chosen.)

It should already work that way.

@heisner

b) In general, I would suggest not using the !important keyword in styling. Piwik uses very specific class names, so it shouldn’t be necessary. As the CSS for the embedded paragraph is loaded last it gets a bit cumbersome to fix styling issues and overwrite with customized styling.

c) The available snippet suggests using the < h1 > tag. I would suggest a div instead as h1 is usually used as the main header for a page, not a paragraph and it isn’t a SEO-friendly approach. (I’ve happily just left out that h1 tag without any issues).

We will take it into consideration (especially using a div instead of h1).

@heisner

d) There is a min-size on the paragraph at 480px. It isn’t really needed and it’s too large for small screens to be truly responsive. If needed, it could be set to 200px. That leaves room for margins, padding, etc. (A workaround is possible with a more specific style declaration if anyone needs that).

It seems you have already found a solution