If you would like to make any additional CSS changes to your CMP outside the customisation options presented on the Theme’s page, you can include the CSS code in the CSS Overrides section of the Theme’s page.
Note: This is an advanced feature and requires knowledge of using and programming CSS for HTML pages. You can find more CSS style names by looking through the styles of the CMP modal using the browser’s Element explorer.
Before saving your changes, please test your changes by launching the GDPR Preview on the Theme’s page.
Starting with Choice Version 2 we use a CSS reset within the CMP to have a consistent experience on all web sites. Therefore you need to prepend all of your rules with the id #qc-cmp2-ui. This will also eliminate the need to specify !important to all the rules.
Background color
#qc-cmp2-ui{
background: yellow;
}
Buttons
#qc-cmp2-ui button[mode="primary"] {
background: red;
color: white;
}
NOTE: You can target all of our different buttons separately using the mode property. You can use either “primary”, “secondary” or “link” and it will target different buttons of our CMP. Please note that link buttons shouldn’t have a background.
Headings
#qc-cmp2-ui h2 {
color: red;
font-size: 21px;
}
Texts
You can change the font-family and sizing of all of our texts by doing this:
#qc-cmp2-ui p {
font-family: Arial, sans-serif;
font-size: 15px;
}
NOTE: To avoid unexpected style behavior, it’s not recommended to change the color using this rule because it would change the text color for ALL text as well. Instead you would specify color per text block.
If you want to change the text styling of the main message of the summary page:
#qc-cmp2-ui .qc-cmp2-summary-info p {
color: red;
}
If you want to change the text styling of the main message of the purposes, vendors and legitimate pages:
#qc-cmp2-ui .qc-cmp2-consent-info p {
color: pink;
}
If you want to change the text styling of the list elements you should do it like this:
#qc-cmp2-ui .qc-cmp2-list-item-title {
color: red;
}
#qc-cmp2-ui .qc-cmp2-list-item-status {
color: blue;
}
If you want to change the text styling of the text INSIDE a list element you can do it like this:
Texts:
#qc-cmp2-ui .qc-cmp2-expandable-list p {
color: green;
}
Headers:
#qc-cmp2-ui .qc-cmp2-expandable-list li {
color: darkblue;
}
Persistent Link
.qc-cmp2-container .qc-cmp2-persistent-link {
background-color: red;
color: white;
padding: 10px;
}
NOTE: This is the only component that isn’t going to be prepended with the #qc-cmp2-ui id since it’s outside of the CMP UI itself. Instead we prepend it with the .qc-cmp2-container class. If you plan to change the padding but the height is not growing, you will also need to change the max-height rule (it’s 30px by default).