Branding


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.

Anchor point for Typography

fontFamilyThe CSS font-family that you'd like to use for the entire module.
fontSizeTitleThe CSS font-size that you'd like to use for the main panel title.
fontSizeHeadersThe CSS font-size that you'd like to use for the main panel's sub headings.
fontSizeThe CSS font-size that you'd like to use throughout the module for body text.

Anchor point for Colours

fontColorThe CSS color that you'd like to use for all text and icons.
backgroundColorThe CSS background-color that you'd like to use throughout the module.
alertTextThe CSS color that you'd like to use within the alert areas, such as to announce manual user actions for third party cookies.
alertBackgroundThe 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.

Anchor point for Buttons

acceptTextThe CSS color that you'd like to use for the text within the module's primary accept buttons.
acceptBackgroundThe CSS background-color that you'd like to use for the module's primary accept buttons.
rejectTextThe CSS color that you'd like to use for the text within the module's primary reject buttons.
rejectBackgroundThe CSS background-color that you'd like to use for the module's primary reject buttons.

Anchor point for Preference Controls

toggleTextThe CSS color that you'd like to use for the control toggle's text.
toggleBackgroundThe CSS background-color that you'd like to use for the control toggle's background.
toggleColorThe CSS background-color that you'd like to use for the changeable part of the control toggle slider.

Anchor point for Corner Button

buttonIconThe URL address of an image you'd like to use instead of the CIVIC C icon in the bottom corner.
buttonIconWidthIf buttonIcon exists, the CSS width that you'd like the image to be.
buttonIconHeightIf buttonIcon exists, the CSS height that you'd like the image to be.

Anchor point for CIVIC branding

removeIconExpects a boolean value to determine whether or not to remove the button icon entirely.
removeAboutExpects 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.

Anchor point for Default Values

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
    }
};