This article outlines how users with a pro licence may use the branding property to overwrite Cookie Control styling with specific rules to better compliment the colours and typography of your website.
Cookie Control expects the branding property to be a JavaScript Object, with at least one child property.
The number of child properties you wish to add is entirely up to you, as Cookie Control will simply use the fallback styling associated with your chosen theme for any properties not explicitly included. This means you only need to include those you wish to overwrite.
fontFamily | The CSS font-family that you'd like to use for the entire module. |
fontSizeTitle | The CSS font-size that you'd like to use for the main panel title. |
fontSizeHeaders | The CSS font-size that you'd like to use for the main panel's sub headings. |
fontSize | The CSS font-size that you'd like to use throughout the module for body text. |
fontColor | The CSS color that you'd like to use for all text and icons. |
backgroundColor | The CSS background-color that you'd like to use throughout the module. |
alertText | The CSS color that you'd like to use within the alert areas, such as to announce manual user actions for third party cookies. |
alertBackground | The CSS background-color that you'd like to use to highlight the alert areas, such as to announce manual user actions for third party cookies. |
acceptText | The CSS color that you'd like to use for the text within the module's primary accept buttons. |
acceptBackground | The CSS background-color that you'd like to use for the module's primary accept buttons. |
rejectText | The CSS color that you'd like to use for the text within the module's primary reject buttons. |
rejectBackground | The CSS background-color that you'd like to use for the module's primary reject buttons. |
toggleText | The CSS color that you'd like to use for the control toggle's text. |
toggleBackground | The CSS background-color that you'd like to use for the control toggle's background. |
toggleColor | The CSS background-color that you'd like to use for the changeable part of the control toggle slider. |
buttonIcon | The URL address of an image you'd like to use instead of the CIVIC C icon in the bottom corner. |
buttonIconWidth | If buttonIcon exists, the CSS width that you'd like the image to be. |
buttonIconHeight | If buttonIcon exists, the CSS height that you'd like the image to be. |
removeIcon | Expects a boolean value to determine whether or not to remove the button icon entirely. |
removeAbout | Expects a boolean value to determine whether or not to remove the link About this tool at the bottom of the module. |
If you choose to use the property removeIcon, then please be aware you are taking on extra responsibility for protecting people’s rights and interests; and must make alternative provisions for making your users aware of the cookies you intend to use.
For convenience, you may extend your configuration with all of the properties discussed on this page and their default values by adding the following snippet:
const config = {
// apiKey and other settings...
branding : {
fontFamily: "Arial, sans-serif",
fontSizeTitle: "1.2em",
fontSizeHeaders: "1em",
fontSize: "0.8em",
fontColor: "#fff", // "#333" for light theme
backgroundColor: '#313147', // "#f4f4f4" for light theme
alertText: "#fff", // "000" for light theme
alertBackground: "#111125", // "#eaeaea" for light theme
acceptText: "#fff", // "#000" for light theme
acceptBackground: "transparent",
rejectText: "#fff", // "#000" for light theme
rejectBackground: "transparent",
toggleText: "#fff", // "#333" for light theme
toggleBackground: "#111125", // "#555" for light theme
toggleColor: "#2f2f5f", // "#000" for light theme
buttonIcon: null,
buttonIconWidth: 64,
buttonIconHeight: 64,
removeIcon: false,
removeAbout: false
}
};
