Green Checkboxes!!!

Comments

11 comments

  • Avatar
    Martin Iv. – vConnect

    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
    Comment actions Permalink
  • Avatar
    Yanick Belart

    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
    Comment actions Permalink
  • Avatar
    Scott Green

    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
    Comment actions Permalink
  • Avatar
    Yanick Belart

    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
    Comment actions Permalink
  • Avatar
    Scott Green

    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
    Comment actions Permalink
  • Avatar
    Yanick Belart

    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
    Comment actions Permalink
  • Avatar
    Yanick Belart

    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
    Comment actions Permalink
  • Avatar
    Scott Green

    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
    Comment actions Permalink
  • Avatar
    Yanick Belart

    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
    Comment actions Permalink
  • Avatar
    Scott Green

    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
    Comment actions Permalink
  • Avatar
    Yanick Belart

    Here we go: yanick.belart@franke.com

    0
    Comment actions Permalink

Please sign in to leave a comment.