Styling the Cookies plugin by CookiesYes

/* Styling the Cookies plugin by CookiesYes 

 * Authored by John Foliot - Foliot Digital Accessibility Services (https://fdas.ca)  */

/* 

 * This plugin is a bugger to style - why I don't know and I never bothered to investigate. The CSS !important

 * declaration to the rescue. This snippet modifies the related CSS for all of the elements that are displayed

 * throughout the plugin's usage so that you can provide some thematic support to that page element. 

 * Sick of White on Blue? No more.

 * 

 * This Snippet currently changes the color theme to White (#fff) on Maroon (#800000), but the whole point is 

 * to allow you to better align their button with YOUR theme color(s), so modify away! 

 *

 * INSTRUCTIONS TO IMPLEMENT

 * The developers of this plugin haven't made it easy to style, and it takes a few steps to get it all working as

 * desired.

 * 

 * The problem is that the actual icon is a SVG file that is hosted by 'CookiesYes' (hard coded into the plugin's code

 * base - we don't want to mess with that now do we?), which is then overlayed on the round 'button' that we're going to

 * restyle using this Snippet. That SVG file is white; but what if your background color is light (yellow? turquoise?) 

 * and you need a dark SVG file instead? The W3C's WCAG 2.2 insists on a minimum color contrast of 3:1 for button icons:

 * (https://www.w3.org/WAI/WCAG22/Techniques/general/G207.html) 

 * 

 * Unfortunately 'CookiesYes' currently doesn't allow for that (because they don't expect you to style their white on

 * blue buttons), so you'll need to host a modified SVG file that changes the stroke color when 'white' is insufficient.

 *  

 * I tried to do this all in one place, but it's too complicated to try and restyle their hosted SVG icon, so this task

 * is split into two activities: modify and host the SVG file locally, and THEN modify the CSS. It's not hard.

 * 

 * ----- STEPS TO ADD THE LOCAL SVG FILE FOR THE COOKIE CONSENT BUTTON ------- 

 * 

 * 1. Prepare Your Modified SVG File:

 * * This presumes you DON'T want a white icon on your newly styled button. If white is OK, you can skip the next 2

 * * steps.

 * * Open the original SVG file in a text editor like Notepad++.

 * *   (source: https://cdn-cookieyes.com/assets/images/revisit.svg)

 * * Make the color modifications to the SVG code (i.e., do a find and replace on: fill="white" and change 'white' 

 * * to your prefered color as either a named value (i.e., black) or hex value (i.e., #000). There should be 6 changes

 * * made).

 * * Save the modified SVG file.

 * * If you haven't done so already, you have to first allow WP to accept SVG files:  

 *  (https://library.wpcode.com/snippet/r5plmlo8/)

 * * Upload the SVG to YOUR SITE'S WordPress Media Library. 

 * 

 * 2. Go to your WordPress Admin Dashboard.

 * * Navigate to Media > Add New.

 * * Upload your modified SVG file.

 * * Once the upload is complete, click on the uploaded SVG file to view its Attachment Details.

 * * Copy the URL of the uploaded SVG file. You will need this URL in the next step as well as in the code block itself.

 * 

 * ----- STEPS TO MODIFY THE ACTUAL BUTTON AND ASSOCIATED DIALOG BOX ------- 

 * 1. Modify the Customization Variables

 * * Come back to the code snippet in your local Snippets library (i.e., this file)

 * * Change the CSS color variables to match your site's theme. 

 * * Add the URL for your modified SVG icon where noted.

 * * Click the "Activate" toggle to enable the snippet.

 * * Click "Save Snippets".

 * 

 * 2. Test to ensure it is all working

 * * Clear Caches: Clear all website caches (WordPress caching plugins, server-level caching, and your browser cache)

 * * to ensure the changes are visible. 

 * * If everything is working as expected, you can delete these notes from Line 3 to Line 61 - kindly leave Line 2 to

 * * recognize my work. Thanks! */

/* ------------- BEGIN CUSTOMIZATION HERE ----------------- */

// Customizable Settings for Cookie Consent Styles. 

// Modify as needed: this snippet currently supports a Maroon background.

$primary_color             = '#800000'; // Maroon

$text_color_light          = '#fff';     // White

$text_color_dark           = '#000';     // Black

$border_color_light        = '#fff';

$link_underline_color     = '#fff';

$link_hover_color         = '#fff';

$customize_text_color     = '#800000';

$customize_border_color   = '#800000';

$customize_bg_color_hover = '#800000';

$always_active_bg_color   = '#800000';

$always_active_border     = '2px solid #fff';

$switch_inactive_color    = '#d0d0d0';     // Silver Gray

$table_row_bg_color       = '#fff';

$table_row_font_weight    = '500';       // Default font weight for table cells

$revisit_svg_url          = 'YOUR_SVG_MEDIA_LIBRARY_URL_HERE';     // Button SVG URL

/* ------------- END OF CUSTOMIZATION ----------------- */

add_action('wp_head', function() use (

    $primary_color,

    $text_color_light,

    $text_color_dark,

    $border_color_light,

    $link_underline_color,

    $link_hover_color,

    $customize_text_color,

    $customize_border_color,

    $customize_bg_color_hover,

    $always_active_bg_color,

    $always_active_border,

    $switch_inactive_color,

    $table_row_bg_color,

    $table_row_font_weight

) {

    ?>

    <style type="text/css">

        .cky-btn-revisit-wrapper {

            background-color: <?php echo esc_attr( $primary_color ); ?> !important;

        }

        button.cky-btn.cky-btn-reject,

        button.cky-btn.cky-btn-preferences {

            background-color:<?php echo esc_attr( $text_color_light ); ?> !important;

            border-color: <?php echo esc_attr( $primary_color ); ?> !important;

            color:<?php echo esc_attr( $text_color_dark ); ?> !important;

        }

        button.cky-btn.cky-btn-accept {

            background-color: <?php echo esc_attr( $primary_color ); ?> !important;

            border-color: <?php echo esc_attr( $text_color_dark ); ?> !important;

            color:<?php echo esc_attr( $text_color_light ); ?> !important;

        }

        button.cky-show-desc-btn:not(:hover):not(:active) {

            color: <?php echo esc_attr( $text_color_light ); ?> !important;

            text-decoration: underline;

        }

        button.cky-show-desc-btn:hover,

        button.cky-show-desc-btn:focus {

            color: <?php echo esc_attr( $link_hover_color ); ?> !important;

            text-decoration: none;

        }

        button.cky-btn.cky-btn-customize {

            color: <?php echo esc_attr( $customize_text_color ); ?>;

            border-color: <?php echo esc_attr( $customize_border_color ); ?>;

            background-color: transparent;

        }

        button.cky-btn.cky-btn-customize:hover,

        button.cky-btn.cky-btn-customize:focus {

            color: <?php echo esc_attr( $text_color_light ); ?>;

            border-color: <?php echo esc_attr( $primary_color ); ?>;

            background-color: <?php echo esc_attr( $customize_bg_color_hover ); ?>;

        }

        span.cky-always-active {

            color: <?php echo esc_attr( $text_color_dark ); ?> !important;

            background-color: <?php echo esc_attr( $always_active_bg_color ); ?> !important;

            border: <?php echo esc_attr( $always_active_border ); ?> !important;

            border-radius: 3px;

            padding: 5px;

        }

        input#ckySwitchother {

            color: <?php echo esc_attr( $switch_inactive_color ); ?> !important;

        }

        #ckySwitchother:checked {

            background-color: <?php echo esc_attr( $primary_color ); ?> !important;

        }

        input#ckySwitchanalytics,

        input#ckySwitchadvertisement,

        input#ckySwitchother {

            background: <?php echo esc_attr( $switch_inactive_color ); ?> !important;

        }

        input#ckySwitchanalytics:checked,

        input#ckySwitchadvertisement:checked,

        input#ckySwitchother:checked {

            background: <?php echo esc_attr( $primary_color ); ?> !important;

        }

    </style>

    <?php

}, 10, 0);

add_action('wp_footer', function() use ($revisit_svg_url) {

    ?>

    <script type="text/javascript">

        document.addEventListener('DOMContentLoaded', function() {

            setTimeout(function() {

                const revisitButton = document.querySelector('.cky-btn-revisit');

                if (revisitButton && '<?php echo esc_url($revisit_svg_url); ?>' !== '') {

                    const revisitImage = revisitButton.querySelector('img');

                    if (revisitImage) {

                        revisitImage.src = '<?php echo esc_url($revisit_svg_url); ?>';

                        revisitImage.alt = 'Adjust your Cookie Preferences';

                        revisitImage.style.width = '36px'; // Force width

                        revisitImage.style.height = '36px'; // Force height

                    }

                }

            }, 1000); // Increased delay to 1 second

        });

    </script>

    <?php

}, 10, 0);

?>