oce2

Maybe the problem is elsewhere: this is what I did , I don’t know how to well expose my problem, I wanted to put screenshoots but I can’t here. When I click on wordpress setting it is good, I have the 2 css files in the network and works. But when I submit Wooster style, it generated compagnon-wooster.css: so it is good but then I click on the switch button, it calls wp.css , ok but the style displayed is not good, it is a mixed of both css because the title is still purple (compagnon-wooster.css ) and the button blue ( wp.css ) but in the network , it is well written wp style.

<?php

/**
 * WoosterBanner class
 * It creates  a banner for the Wooster plugin
 *
 * @package Wooster
 */
class WoosterBanner
{
    public function __construct()
    {
        if (isset($_GET['page']) && in_array($_GET['page'], ['wooster', 'wooster-followup', 'wooster-licences', 'wooster-compagnon', 'wooster-customers', 'wooster-partner', 'wooster-settings', 'wooster-setup']) && is_admin()) {
            add_action('admin_enqueue_scripts', array($this, 'enqueue_styles'));
            //add_action('wp_enqueue_scripts', array($this, 'enqueue_styles'));
            add_action('in_admin_header', array($this, 'wooster_header_section'));
            add_action('admin_footer', array($this, 'add_switch_style_button'));
        }
        add_action('wp_enqueue_scripts', array($this, 'enqueue_styles')); // for the front page

    }
    /**
     * Adds the banner to the top of the Wooster plugin settings page
     *
     * @return void
     */
    public function wooster_header_section()
    {
?>
        <div id="top-bar-banner">
            <div class="wooster-banner">
                <div class="logo">
                    <img src="<?php echo plugins_url('assets/img/logo.png', __DIR__); ?>" alt="Logo">
                </div>
                <div class="actions">
                <div id="wooster-activity-panel" class="wooster-layout__activity-panel" aria-labelledby="activity-panel-header_73">

                <div role="tablist" aria-orientation="horizontal" class="wooster-layout__activity-panel-tabs">

                    <button type="button" aria-selected="false" aria-controls="activity-panel-previewStore" id="switch-style" class="components-button wooster-layout__activity-panel-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path d="M0 224c0 17.7 14.3 32 32 32s32-14.3 32-32c0-53 43-96 96-96H320v32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9S320 19.1 320 32V64H160C71.6 64 0 135.6 0 224zm512 64c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 53-43 96-96 96H192V352c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V448H352c88.4 0 160-71.6 160-160z" />
                        </svg>
                    </button>
                    <button type="button" aria-selected="false" aria-controls="activity-panel-previewStore" id="user-icon" class="components-button wooster-layout__activity-panel-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z" />
                        </svg>
                    </button>
                    <button type="button" aria-selected="false" aria-controls="activity-panel-help" id="help-icon" class="components-button wooster-layout__activity-panel-tab"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
                            <path d="M12 4.75a7.25 7.25 0 100 14.5 7.25 7.25 0 000-14.5zM3.25 12a8.75 8.75 0 1117.5 0 8.75 8.75 0 01-17.5 0zM12 8.75a1.5 1.5 0 01.167 2.99c-.465.052-.917.44-.917 1.01V14h1.5v-.845A3 3 0 109 10.25h1.5a1.5 1.5 0 011.5-1.5zM11.25 15v1.5h1.5V15h-1.5z"></path>
                        </svg>
                    </button>
    </div>
                    </div>

                </div>
            </div>
        </div>
    <?php
    }
    /**
     * Registers the setting for the Wooster plugin style switch button
     *
     * @return void
     */

    public function add_switch_style_button()
    {
    ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var toggleStyleBtn = document.getElementById('switch-style');
    var backendStyle = '<?php echo get_option('wooster_style', 'compagnon-wp.css'); ?>';
    var currentStyle = getCookie('wooster_style') || backendStyle;

    // Update cookie if the style has changed in the backend
    if (currentStyle !== backendStyle) {
        setCookie('wooster_style', backendStyle, 7);
        currentStyle = backendStyle;
    }

    toggleStyleBtn.addEventListener('click', function() {
        currentStyle = currentStyle === 'compagnon-wp.css' ? 'compagnon-wooster.css' : 'compagnon-wp.css';
        changeStyle(currentStyle);
    });

    function changeStyle(styleName) {
        var oldStyleElement = document.getElementById('wooster-custom-style');
        if (oldStyleElement) {
            oldStyleElement.parentNode.removeChild(oldStyleElement);
        }

        var styleElement = document.createElement('link');
        styleElement.id = 'wooster-custom-style';
        styleElement.rel = 'stylesheet';
        styleElement.href = '<?php echo plugins_url('wooster-partner/assets/css/'); ?>' + styleName + '?v=' + new Date().getTime();
        document.head.appendChild(styleElement);
        
        setCookie('wooster_style', styleName, 7);
    }

    // Load the initial style
    changeStyle(currentStyle);
});
function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
</script>
<?php
    }
    /**
     * Enqueues the selected style for Wooster plugin settings page
     *
     * @return void
     */
    public function enqueue_styles()

    {
         // Enqueue other necessary styles and scripts
         wp_enqueue_style('wooster-banner', plugins_url('assets/css/banner.css', __DIR__));
         wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', array(), '5.15.4');
         wp_enqueue_script('jquery'); // Js library
         // Enqueue your script
         wp_enqueue_script('switch-style');
     }
}

new WoosterBanner();

Thank you, it may be that. I tried to dequeue and enqueue but still in the front, when Wooster style is selected, It doesn’t change. I also add this which is specific for the front

 add_action('wp_enqueue_scripts', array($this, 'enqueue_styles')); // for the front page

     public function enqueue_styles()
     {
         // Register your script
         //wp_register_script('switch-style', plugins_url('wooster-partner/assets/js/switch-style.js'), array('jquery'), '1.0', true);

         $selected_style = get_option('wooster_style', 'compagnon-wp.css'); // default style

    if (!is_admin()) {
        if ($selected_style === 'compagnon-wooster.css') {
            wp_dequeue_style('compagnon-wp');
            wp_enqueue_style('wooster-custom-style', plugins_url('wooster-partner/assets/css/' . $selected_style));
        } else {
            wp_dequeue_style('wooster-custom-style');
            wp_enqueue_style('compagnon-wp', plugins_url('wooster-partner/assets/css/compagnon-wp.css'));
        }
    }

         // Enqueue other necessary styles and scripts
         wp_enqueue_style('wooster-banner', plugins_url('assets/css/banner.css', __DIR__));
         wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css', array(), '5.15.4');
         wp_enqueue_script('jquery'); // Js library

         // Localize your script
         wp_localize_script('switch-style', 'switch_style_vars', array(
             'wooster_style_url' => plugins_url("wooster-partner/assets/css/compagnon-wooster.css"),
             'wp_style_url' => plugins_url("wooster-partner/assets/css/compagnon-wp.css"),
         ));

         // Enqueue your script
         wp_enqueue_script('switch-style');
     }

• This reply was modified 2 years, 1 month ago by oce2.