Green Checkboxes!!!

Yanick Belart

• August 29, 2018 07:32

Hi everbody

We have the problem that we always get these green checkmarks in the cookie-layer.

Does anybody else have this issue?

Thanks in advance.

Bests,
Yanick

0

• 

  Martin Iv. – vConnect

  • August 29, 2018 08:35
  • Edited

  Hey Yanick Belart,

  There is no option in the admin panel to change that checkmarks.
  You can do that with CSS: target the "label" with

  input[type="checkbox"].CybotCookiebotDialogBodyLevelButton:checked + label

  
  and change background image of your choice.

  Regards,
  Martin

  0
• 

  Yanick Belart

  • August 29, 2018 11:06

  Hi Martin
  
  Thanks for supporting me.

  That is a pity! I downloaded the base64 image, encoded it to png, exchange the color, saved the image as png, decoded the new png to base64 again and add it to my custom stylesheet. Then I realized that I have to add !important as well. Otherwise it will be overwritten by cookiebot. This workflow isn't really user friendly. If you have a better process, pls let the community know!
  
  Bests,
  Yanick

  1
• 

  Scott Green

  • November 09, 2018 22:03

  Hi Yanick, Martin,

  With that CSS change I'm also getting the "Necessary" checkbox in the new colour, is there a way to keep it grey as in your screenshot?

  Kind regards

  Scott

  0
• 

  Yanick Belart

  • November 13, 2018 10:55
  • Edited

  Hi Scott
  
  We have following in place:

  /*Cookiebot*/

  input[type=checkbox].CybotCookiebotDialogBodyLevelButton:checked+label {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gkMDzsNmcEZWAAAAORJREFUKM+NkrGtwjAQhj+HVOgVjMAIJ+iQCxjhbUAWQDACHR1ZAAETvBUorNdyG8AImQBTJAYnBMhJlny/7vP9Ptt47zHG0CnEToEpkJvOoNgBcAEGQJHQPfYVBFAYVfXfiJu/McoWsTRLAUTEfLA4BM5Rtxx1p6RRJF8sKupWAEkE7YEzYueRtqymGCILmzQa8/zRQWx5OmxD4f9uw2RsNeTJw0K5Ynt/Ua793k/NfwmqK4BZAx6G0QO/zYs/79gOA6xRd30P1uFDpZxQl7e9UvqilHCG2GNL9zrY5fcAeP8suwOnakgP/qNacAAAAABJRU5ErkJggg==') !important;
  }

  So we changed the color with Photoshop and then created a base64 image.

  Hope that helps.

  Bests,
  Yanick

  0
• 

  Scott Green

  • November 20, 2018 21:43
  • Edited

  Hi Yanick,

  I had the same CSS code, just with a different colour but it changes all the check boxes not just the coloured ones, see below, any ideas how to get around this?

  

  Want to keep the pre-selected one grey like original green tick one below.

  

  Kind regards

  Scott

  0
• 

  Yanick Belart

  • November 21, 2018 08:15

  Hi Scott

  The code snippet mentioned 8 days ago did the trick for us. In addition, we downloaded the icons (base64), converted it to png, then recolored it and then converted it back to base64. Hope that helps!

  E.g. we used https://www.base64-image.de/ to convert the icon.

  Bests,
  Yanick

  0
• 

  Yanick Belart

  • November 21, 2018 08:23

  Here we go:

  input[type=checkbox].CybotCookiebotDialogBodyLevelButton:checked+label {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gsVCBUPLlYsqAAAAPRJREFUKM+NkjFuwjAUhj8HpsoDR2CoWBOpW+WBnABxA9hR1V4gUj11zA1oL1COUAbvPHEBeoQMmXEXJzIWlDzJkv3Ln97/flt571FKMaTaysyBOVCroWBbmQlwAiZAkzG8tgECaJSI+HvE2Z+Z7V5iqRwDFEWh/rE4BQ5Rt1pbt8+SS8Udi6KtewPIImgLHNrKrCLtNaTY1brbKBHxj9+bEvhJLkiwCMBx8cHzk+lH6jpKWLG9XXSWh5G+8J8BaOsaoEzgaRc9sEwH72e8AQO8a+t+b4IJ/BmkvbauvvZM41QI8LqtzNeV7lykOvTP5Xnep/oHROBRAhYqv/cAAAAASUVORK5CYII=') !important;
  }
  

  I took the color HEX #f47e3c from your printscreen.

  0
• 

  Scott Green

  • November 21, 2018 22:33
  • Edited

  Hi Yanick,

   

  Appreciate your help, I already had an orange tick image base64 encoded, that's not my issue my issue is that the default checkbox is no longer grey. If you look at the original default cookiebot screenshot you shared the necessary checkbox is grey and the others are green.

  I wanted to keep the grey one and just change the green ones. The CSS change seems to change all the check boxes as per my screenshot. It might be something to do with me using a child theme in Wordpress to change the CSS. Wanted to confirm if you had the same problem?

   

  Kind regards

  Scott

  0
• 

  Yanick Belart

  • November 22, 2018 08:50

  Hi Scott

  Understand. Unfortunately, we didn't have this problem. If you like, you can share the link with me and I could have a look.

  Bests,
  Yanick

  0
• 

  Scott Green

  • November 22, 2018 18:36

  Hi Yanick, 

  Thanks for offering to have a look, it's on my dev site which is password protected, can I PM you the details? Is that you on LinkedIn?

  Kind regards

  Scott

  0
• 

  Yanick Belart

  • November 23, 2018 07:53

  Here we go: yanick.belart@franke.com

  0

Please sign in to leave a comment.