Home / Widgets / Styling the Icon button for “Cookies by Yes Cookies”
Duplicate Snippet

Embed Snippet on Your Site

Styling the Icon button for “Cookies by Yes Cookies”

Note that the actual icon is an overlay SVG that is hosted by them, and trying to over-ride that would involve hacking the core plugin - uh, no thanks.
But this CSS will style all of the elements that are displayed throughout its usage so that you can at least provide some thematic support to that element. Blue? No more.
This Snippet changes the color theme to Maroon (#800000) - do a find and replace and you're set.

Code Preview
css
/* Cookies by Yes Cookies */
/* 
This plugin was a bugger to style - why I don't know and never bothered to investigate. The !important
declaration to the rescue. Note that the actual icon is an overlay SVG that is hosted by them, and again 
trying to over-ride that would involve hacking the core plugin - uh, no thanks. 
But this CSS will style all of the elements that are displayed throughout its usage so that you can at least
provide some thematic support to that element. Blue? No more.
This Snippet changes the color theme to Maroon (#800000) - do a find and replace and you're set.
*/
.cky-btn-revisit-wrapper 
   {background-color: #800000!important;}
button.cky-btn.cky-btn-reject, button.cky-btn.cky-btn-accept, button.cky-btn.cky-btn-preferences 
   {color: #fff!important; border-color:#fff!important; background-color: #800000!important;}
button.cky-show-desc-btn:not(:hover):not(:active)
   {color:#fff!important; text-decoration:underline;}
button.cky-show-desc-btn:hover, button.cky-show-desc-btn:focus 
   {color:#fff!important; text-decoration:none;}
button.cky-btn.cky-btn-customize {color: #800000; border-color: #800000; background-color: transparent;}
button.cky-btn.cky-btn-customize:hover, button.cky-btn.cky-btn-customize:focus {color:#fff; border-color:#800000; background-color:#800000}
span.cky-always-active 
   {color:#000!important; background-color:#800000; border:2px solid #fff!important; border-radius:3px; padding:5px;}
input#ckySwitchother
   {color:#d0d0d0!important;}
#ckySwitchother:checked 
   {background-color: #800000!important;}
.cky-btn-revisit img path {
  fill: #fff!important;
	stroke: #fff!important;
}
 table.cky-cookie-audit-table tbody tr td {background:#fff!important; font-weight:normal!important;}

Comments

Add a Comment