There are 3 ways to add custom styles (CSS), depending on which features of Cookie Law Info you wish to use.

A) Standard Cookie Law Info Styles

Difficulty level: novice.

This is the simplest option and what most people choose.

In the plugin settings page, choose the “Style” tab, then choose the “Classic” template to get the default Cookie Law Info settings. If you want to change the style without writing the CSS yourself just make the changes using the settings available.

B) Customising Cookie Law Info Styles

Difficulty level: basic/intermediate.

If you want to use the Cookie Law Info Style Designer to design the majority of the styles (e.g. background colour, text colour, etc) and only want a couple of overrides, you just need to add some CSS to your theme’s CSS file.

Ideally you’ll have a child theme (so edit the child theme’s CSS file) but you can edit the parent theme’s CSS file if you must. If you haven’t set up a child theme, you should really try and do so. It’s a topic that has been written about a lot before: here’s a great article on how to set up a child theme.

The CSS you need is quite easy. Here’s an example:

#cookie-law-info-bar {
    background-color:rgba(0,0,0,0.5)!important;
    font-family:courier!important;
}
#cookie-law-info-again {
    background-color: red!important;
}

It’s really important to add the “!important” keyword after the CSS and before the semi colon. If you miss that off your custom CSS might not appear.

C) Completely Custom CSS

Difficulty level: intermediate/advanced.

In the plugin settings page, choose the “Style” tab, go to “Cookie Law Info Styling” and select “Custom”.

This is a blank canvas for you to develop your own CSS. Choosing this setting means that the plugin will not generate any CSS for Cookie Law Info, leaving you free to design your own from scratch.

This is stating the obvious a bit, but choosing this option means that until you write the CSS the cookie bar will not appear. This is not a bug. This is your blank canvas to display the cookie bar exactly as you wish.

Summary

This article showed you 3 different ways to customize Cookie Law Info from beginner to advanced.