Complianz How to style fonts etc of the cookie-policy page generated by

Hi @graincore,

You can disable our CSS under Settings, disable Document CSS. Your theme will take over.

You can also add custom CSS under settings, we have added classes for you to use.

If you disable CSS under settings, you can use the classes from your theme.

Hope this helps,

regards Aert

Hi @aahulsebos, thanks a lot for the quick reply ??

I see, thanks. Havent seen this option under settings. So I tried it, but now it looks even worse with my theme, haha.

You mentioned I could use CSS, ok I see. I am not an expert, so how can I use different font heading styles and paragraph text. Can I create more space between certain text blocks? I am a bit lost here. Are there any examples?

I basically need to adjust the text in a way I would normally do it with the wordpress editor/WP Bakery Builder. You know what I mean?

Thanks

Martin

• This reply was modified 4 years, 1 month ago by graincore.

Hi @graincore,

Could you enable Document CSS by Complianz and let me know which URL I should have a look at? I will write some custom CSS.

regards Aert

Hi @aahulsebos, that would be awesome, but the page: https://designsprints.studio/cookie-policy/ is not public yet. How could we proceed with that? I could provide a guest log in for my WP page.
Thanks,
Martin

• This reply was modified 4 years, 1 month ago by graincore.

Hi @graincore,

We would just need to see the front-end page and a page with the example styling that you would like to implement. We’ll then share some CSS that you can add under cookie banner -> custom CSS.

Kind regards,
Leon

Hi @leonwimmenhoeve
ok I see, but how?

I uploaded some pics from my homepage and the privacy page. I think the privacy page is a good example. But whats missing is the table and charts stuff. Its basically not there when I switch to my stlye. Theres also a pic of the font styles I am using if that helps. I also included the cookie policy page with its current state.

https://www.dropbox.com/sh/hefo9wtqb9y6wpz/AADORU1YGCL_BRCfB3iy-ypua?dl=0

This is the wordpress theme I am using as a basis, I changed some of the font styles.

https://bridge90.qodeinteractive.com/

Does that help? Please let me know!?

Thanks

Martin

Hi @graincore,

I’ll do my best to get you started without the possibility to inspect the current CSS :-).

– I see that the actual CSS is very similar to the rest of your site, so I assume that you have disabled Complianz document CSS via Complianz -> settings. Please verify that.
– When investigating your screenshots, I see that you have indicated a font-size of 80px for H2 headers. The headers in the legal documents are H2. I suspect that you are skipping H1 or H2 in your custom Privacy Policy, which you could reconsider. If you just want to overwrite the H2 CSS for the Cookie Policy headers, so that they appear just like the Privacy Policy (H3) headers, enable custom CSS via Complianz settings and add this CSS:

#cmplz-document h2 {
 font-size: 30px; 
 line-height: 42px;
 font-weight: 600;
}

#cmplz-document h3 {
 font-size: 23px; 
 line-height: 33px;
}

I am not sure why the table borders don’t show, possibly because the border color is the same as the background. I did not see a setting in your screenshot to adjust them, but you could try adding this CSS as well:

#cmplz-document table {
border-color: #4F4F4F;
}

Let me know if this works! You could also send your screenshots to support(at)complianz.io, to prevent having all these public links on the support forum.

Kind regards,
Leon

Hi @graincore,

Our next update will drop the table, please stand-by and enable your document CSS in the meantime.

We can adjust when you’re live, it will be much easier.

regards Aert

Hi, ok thanks guys. Will try it as soon as I am back at the Computer. I will also delete the Dropbox folder. Is there also a way to have more Space inbetween text blocks….empty lines, etc?

Sorry, the next update does what? No more tables in General you mean?

Talk later!

Thanks

Martin

@graincore The line-height CSSshould add the whitespace between the lines, similar to your other pages. You can increase the value if you want.

@aahulsebos reminded me that we will be releasing an update within a few days in which we have converted the tables to flexboxes. That will render the provided CSS for the tables useless. You can use it for now, or test the other CSS in the meantime to get the headers configured the way you want.

Let us know if you need any further assistance.

Regards,
Leon

Hi, I am back at the computer ??

The CSS works, thanks a lot. But I still can’t see the table. I also made them black, just to be sure, but without success.

I was talking about empty rows, not more spacing. Is that somehow possible? Probably not!? See here: https://imgur.com/a/jy6JA1F

I also have a problem with other fonts as seen in the pic too. I included this code to change p:

#cmplz-document p {
font-size:23px;
line-height:33px;
font-weight:300;
}

but it seems its not working because its not part of p (paragraph tet).

Thanks

Martin

Hi
@leonwimmenhoeve
@aahulsebos
Ok I see, I did the update and now all my styling work for the tables are gone. It took me hours to do it, for sure because I am not very experienced in that. Anyway, can I style this again? Because it looks unreadable again when I expand the Cookie Link, see here: https://imgur.com/3HH7cZs

And unfortunately, everything looks still very stacked, without any air in-between text blocks. https://imgur.com/4ZMnvEs
Is there a way to change that? Just some empty rows here and there would be great, in order to make the text more readable. Is that possible?

Thanks

Martin

Hi @graincore, Martin.

We are happy to assist you with CSS, but it will be better, and much faster if we have direct access to the page instead of screenshots.

I would suggest, when you’re live, leave us a message at complianz.io/contact/ and we will fix it an a couple of hours.

regards Aert