Issues with custom CSS and Zaraz Consent modal

Original message was deleted

iris_•12/4/24, 4:01 PM

Hey, I am trying to switch from my old solution to Zaraz for consent management. I've set it all up so far, but now I want to style the modal with custom CSS, but I'm not quite sure how to do so. I've tried adding a rule for .cf_modal to the Custom CSS section, but it doesn't apply. Thanks for any ideas!

BadgeMan•12/4/24, 4:10 PM

Hi, I tweaked some CSS and it's all working as expected...
I paste the code here so you have something to play with...

.cf_button.cf_button--accept {
background-color: #8BC540;
float:right;
}
.cf_button.cf_button--save, .cf_button.cf_button--reject {
background-color: #d7093b;
}
.cf_button:hover {
opacity:0.8;
}
.cf_consent-buttons {
flex-flow: row-reverse;
justify-content: flex-start;
}
.cf_consent-element__checkbox-wrapper, input.cf-checkbox {
width:20px;
height:20px;
padding-top:0;
margin:0
}
input.cf-checkbox {
background-color: #b9a257;
}
.cf_consent-element {
grid-template-columns: 20px 1fr;
grid-column-gap: 8px;
}
.cf_consent-intro {
text-align: left;
}
.cf_consent-intro a:focus {
border:0;
outline: none;
}
div.title_container {
margin-bottom: 16px !important;
}
.cf_modal h2 {
font-weight: 900;
}

iris_•12/4/24, 4:18 PM

Thanks! That all works fine, but I want to style the modal itself (like background color, border-radius, etc.). If I use .cf_modal.cf_modal as CSS selector, I can't do that, even though that's the class name of the element. Do you know if I need to use a different selector or how I fix this another way?

BadgeMan•12/5/24, 8:16 AM

.cf_modal {
border-radius:12px;
background-color:#ccc;
}

BadgeMan•12/5/24, 8:16 AM

Will do the trick...

BadgeMan•12/5/24, 8:22 AM

Removing the annoying focus on the input fields:
.cf_modal *:focus {
outline: none;
}

Issues with custom CSS and Zaraz Consent modal

Similar Threads

Similar Threads

Similar Threads