Lesson 1 / 4 / 22 doesn’t work for me

Hi @r3qlzz,

For lesson 1, some more specific classes:

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {}
or
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {}
if you want to target a specific button.

The other lessons seem correct and CSS seems to work; https://designcmplz.us.instawp.xyz/

If you can tell me what you want, and on which URL I can have a look.

regards Aert

For the lesson 4 i just add

.cmplz-soft-cookiewall {
background-color: rgba(0, 0, 0, 0.62);
}

On my code but did nothing … I will try with https://www.hexcolortool.com/ but nope …

In lesson 22 i try blur effect but don’t work.
I want to block scroll like your lesson , but here , yes i understand nothing lol.
Maybe now with update there is a easiest way ?

My code :

.cmplz-soft-cookiewall {
background-color: rgba(0, 0, 0, 0.62);
}
.cmplz-cookiebanner .cmplz-header {
    display: flex;
    justify-content: center;
}
.cmplz-cookiebanner .cmplz-body {
    grid-column: span 3;
    justify-content: center;
    }
.cmplz-cookiebanner .cmplz-buttons {
    grid-row-start: revert;
    grid-column-start: 1;
    margin:auto;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    font-size:30px;
    font-family: 'Handlee';
}
.cmplz-cookiebanner {
    grid-template-columns: 1fr;
}
.cmplz-cookiebanner .cmplz-message {
    text-align: center;
}
.cmplz-cookiebanner.cmplz-categories-type-view-preferences.cmplz-categories-visible .cmplz-buttons, 
.cmplz-cookiebanner.cmplz-categories-type-no.cmplz-categories-visible .cmplz-buttons {
    flex-direction: initial;
}

@media only screen and (min-width: 768px) {
.cmplz-cookiebanner .cmplz-logo img {
    max-height: 150px;
    width: inherit;
}
.cmplz-cookiebanner {
margin: 0px;
width: 100%;
}
.cmplz-cookiebanner .cmplz-title {
font-size:22px;
}
.cmplz-cookiebanner .cmplz-body {
    padding: 0 30% 0 30%;
}
}

https://organizalpha.com/particulier
my website ??

Cya @aahulsebos have a nice day.

• This reply was modified 2 years, 8 months ago by r3qlzz.

Hi @r3qlzz,

CSS for the Soft Cookiewall
Concerning CSS Lessons 4 and 22: to be able to apply styles to the Soft Cookiewall, it must be enabled first.

Could you check if the Soft Cookiewall option has already been enabled, under Complianz > Cookie Banner > Appearance > “Show as soft Cookie Wall”?

After which you can apply styles to it, such as the blur effect.

No Scroll
This can’t be achieved with just CSS, some additional JavaScript is necessary for this to work.

You can copy the provided code in CSS Lesson 22 under “No Scroll on Body” to a PHP file and upload it to the folder /wp-content/mu-plugins/ on your server for it to take effect.

For step by step instructions on installing MU Plugins on your website, please refer to our earlier article on how to create & install MU Plugins.

Kind regards,
Jarno

Hello @jarnovos how are you ?

Lesson 4
settings

I don’t see your settings in french language
There is no settings like this “Show as soft Cookie Wall”? in french.

For No scroll
ok i will try to do it with mu plugins

For the lesson 1
I try to custom my buttons , with Colours, and HOVER colours but i don’t find the way .

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    font-size:30px;
    font-family: 'Handlee';
}

This not applied to third button ( preferences )

Thank you

HI again ,

Just finish to work & dentist lol :////

I did noscroll.php , i add him via ftp to xxxx/wp-content/mu-plugins/ ( chmod 644 )

When i go to my website , not have a scroll locked when banner cookies appear .

Hi @r3qlzz,

Hope you’re doing well.

The “Soft Cookiewall” option in your case should be called “Afficher en tant que modale de cookies allégée”. After enabling that, I think that CSS Lesson 4, 22 (& the no Scroll MU-Plugin) will work as expected.

For the button CSS classes, you can use the lines attached below. The ones on the bottom will only apply when the buttons are being hovered over with the mouse. As an example, the accept button will change color when hovered over (you can do the same for the other buttons).

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {background-color: #666677;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {background-color: #333333;}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover {}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {}

Hope it helps!
Kind regards,
Jarno

• This reply was modified 2 years, 8 months ago by jarnovos.

HIiiiiiiiiiiiiiiiiiiiiiii

All finished now !

You can try my website here for cookies banner.
my web site

.cmplz-soft-cookiewall {
background-color: rgba(0, 0, 0, 0.62);
}
.cmplz-cookiebanner .cmplz-header {
    display: flex;
    justify-content: center;
}
.cmplz-cookiebanner .cmplz-body {
    grid-column: span 3;
    justify-content: center;
    }
.cmplz-cookiebanner .cmplz-buttons {
    grid-row-start: revert;
    grid-column-start: 1;
    margin:auto;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    font-size:20px;
    font-family: 'Handlee';
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
    color: #fff;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {background-color: #007976;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {background-color: #007976;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {background-color: #007976;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {background-color: #007976;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {background-color: #B63355;}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {background-color: #B63355;}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover {background-color: #B63355;}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {background-color: #B63355;}
.cmplz-cookiebanner {
    grid-template-columns: 1fr;
}
.cmplz-cookiebanner .cmplz-message {
    text-align: center;
}
.cmplz-cookiebanner.cmplz-categories-type-view-preferences.cmplz-categories-visible .cmplz-buttons, 
.cmplz-cookiebanner.cmplz-categories-type-no.cmplz-categories-visible .cmplz-buttons {
    flex-direction: initial;
}

@media only screen and (min-width: 768px) {
.cmplz-cookiebanner .cmplz-logo img {
    max-height: 150px;
    width: inherit;
}
.cmplz-cookiebanner {
margin: 0px;
border-radius: 0px;
width: 100%;
}
.cmplz-cookiebanner .cmplz-title {
font-size:22px;
}
.cmplz-cookiebanner .cmplz-body {
    padding: 0 30% 0 30%;
}
}

Be careful about your translate in french , because you said : “Afficher en tant que modale de cookies allégée” Its meaning , show a very small cookies but its very not this.

“Afficher une superposition d’arrière plan” will be better

Thank you a lot ??
@aahulsebos @jarnovos glad to your help everyday. ??

Edit : NEW CODE i hope we can share this to people want a banner already OK ??

.cmplz-soft-cookiewall {
background-color: rgba(0, 0, 0, 0.62);
}
.cmplz-cookiebanner .cmplz-header {
    display: flex;
    justify-content: center;
}
.cmplz-cookiebanner .cmplz-body {
     justify-content: center;
     grid-column: span 3;
}
.cmplz-cookiebanner .cmplz-buttons {
    grid-row-start: revert;
    grid-column-start: 1;
    margin:auto;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    font-size:20px;
    font-family: 'Handlee';
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
    background-color: #007976;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
    background-color: #007976;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
    background-color: #007976;
    color: #fff;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
    background-color: #007976;
    color: #fff;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
    background-color: #B63355;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
    background-color: #B63355;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover {
background-color: #B63355;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
background-color: #B63355;
}
.cmplz-cookiebanner {
    grid-template-columns: 1fr;
}
.cmplz-cookiebanner .cmplz-message {
    text-align: center;
}
.cmplz-cookiebanner.cmplz-categories-type-view-preferences.cmplz-categories-visible .cmplz-buttons, 
.cmplz-cookiebanner.cmplz-categories-type-no.cmplz-categories-visible .cmplz-buttons {
    flex-direction: initial;
}

Now for completly finish the cookies banner , we have to do it responsive for everyone.

Somethings wrong with this code ,

@media only screen and (max-width: 768px) {
    .cmplz-cookiebanner .cmplz-logo img {
    max-height: 100px;
     width: inherit;
    justify-content:center;
}
.cmplz-cookiebanner {
margin: 0px;
border-radius: 0px;
width: 100%;
}
.cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row;
}
#cmplz-manage-consent .cmplz-manage-consent {
    display: unset;
    bottom: -5px!important;
}
.cmplz-cookiebanner .cmplz-body {
    padding: 0 5% 100% 0;
}
}

1) Because when we go to view preferences its not the same responsive design…
2) When we scroll in the text , its scroll to the website behind.
3) If i don’t put 100% in padding i don’t see all the text ( just miss one line )

What do you think with your phone ?
test with your phone