From 6.0 onward you can create any banner you’d like if you have some HTML & CSS knowledge. You can create amazing banners if you’re an expert! Below we will show you how to override the default Complianz banner with your own creation. You can choose 3 variants on how to add your own touch to Complianz.
- Add some Custom CSS with a WordPress filter
- Remove all default CSS and add your own styling
- Start from scratch, edit your custom HTML template and custom CSS
1. Add some Custom CSS with a WordPress hook
If you want to add some CSS to your current banner, and you rather use a action hook than our custom CSS block in the cookie banner settings, you can use the below snippet:
2. Remove all default CSS and add your own styling
If you want to override all current CSS and start from scratch with your own CSS, you can use the below snippet:
3. Start from scratch, edit your custom HTML template and custom CSS
You can also create the entire banner with HTML and custom CSS. We suggest using the base cookiebanner.php, as shown later to make sure javascript and the banner can communicate properly. You will need to do the following:
3.1 Add a filter to override the Cookie Banner
You can upload your HTML template based on the below base cookiebanner.php as an MU plugin. Make sure your MU plugin has the same name as the filename in this filter and you add it to a folder in mu-plugins called ‘cookiebanner’.;
3.2 Add your custom CSS
Add your custom CSS with the below filter.
3.3 Add your HTML template
We advise using this HTML template as the basis of your cookie banner, as some classes might be needed during your configuration. If you’re sure your configuration will not trigger these classes, you can safely remove them.
There are however classes dynamically populated that should be maintained to use full functionality, for example:
aria-describedby="cmplz-message-{id}-{consent_type}You can find the Cookie Banner template on Github as well.
