CSS styling options
Here is a detailed guide for how to style various aspects of the consent collecting widget.
The text in our widget inherits the color value from higher up in the cascade. This will default to black or what the default value set by the browser is, if a specific value is not defined. This will apply to all elements except when an error occurs. Error-related text will use our default error-color.
If your styles are not applied as you expect, it is likely due to the selector specificity not being high enough. Increasing the specificity will make your styles be applied, instead of our default ones. The following resources cover this in more detail: CSS Specificity (MDN) and the "Specifishity" cheat-sheet.
You are able to control the font-sizing and line-spacing of our widget. In practice, our widget inherits both font-sizing and line-spacing higher up in the cascade if defined. If no values are defined for font-sizing and line-spacing, both will use our default values.
You can style the border-color of the checkboxes and the color of the checkmark in our widget. To do this, add rules like the following to your stylesheet:
.lm-base .lm-checkbox {
/* set the color of the checkbox border */
border-color: #abc123;
}
.lm-base .lm-checkbox::after {
/* set the color of the checkmark; inherits from checkbox border if not specified */
border-color: #abc123;
}
You are free to choose if you want to control both the border-color and checkmark color. If you do not set a value, both will default to use our standard border-color.
To change the color of error-related text in the widget, add a rule like this to your stylesheet:
.lm-base .lm-error {
/* set the color of error-related text, and of invalid/unchecked required fields */
color: #abc123;
}
If you have set the
markRequiredFields: true option in legal.widget() , you can style the color of the asterisks that are shown after required fields. Add the following rule to your stylesheet:.lm-base .lm-required-field {
/* set the color of the asterisks shown after required fields */
color: #abc123;
}
If you do not specify a color, it will be inherited from our default error-color. If you have overridden that, your specified error-color will be used.
Last modified 3yr ago