Machete’s cookie bar is simple on purpose, by default it only allows to enable or disable it, change the text and choose between a light or a dark skin. You can access it on the side menu of WordPress admin sidebar clicking on Machete > Cookie Law
But I want to customize my cookie bar!
As you can see, it’s just a container, #machete_cookie_container, and a inner box, #machete_cookie_bar
Let’s use Machete’s Analytics and Custom Code Module to inyect some custom CSS to it!
The process goes like this:
- On the side menu of WordPress admin sidebar click on Machete > Analytics & Code
- Add a new <style> block to the Custom header content text area
- Add CSS selectors for each of the HTML elements of the cookie bar
- Add your custom CSS rules for each element (as you might be overriding previous selectors, yo will need to use !important sometimes)
Once you have finished step 3, your custom header content text area will look like this:
Here is a code sample for making a dark themed cookie bar full-width width a 90% opacity back background and white text:
margin-bottom: 0 !important;
border-width: 0 !important;
background: transparent !important;
color: #fff !important;