How to load overlay CSS only on specific pages

`Well, I could do that! 🙂 Just to make sure I understand correctly: Right now, we’re testing two versions of a category page. It’s exactly this one page where the overlay is used. Could I disable the default Nelio CSS and load it conditionally? Or would that interfere with the test in any way? Maybe it’s not even worth the effort. But you know: Customers are constantly sending AI reports with suggestions for “improvements.” Sometimes the AI has valid points.

Well, I would use a standard snippet for the category page like so:

add_action('wp_head', 'custom_css_photovoltaik_reinigungsmittel');
function custom_css_photovoltaik_reinigungsmittel() {
    if (is_category( 'photovoltaik-reinigungsmittel')) {
        ?>
<code><style id=&quot;nelio-ab-testing-overlay&quot; type=&quot;text/css&quot;>@keyframes nelio-ab-testing-overlay{to{width:0;height:0}}body:not(.nab-done)::before,body:not(.nab-done)::after{animation:1ms 3000ms linear nelio-ab-testing-overlay forwards!important;background:#fff!important;display:block!important;content:&quot;&quot;!important;position:fixed!important;top:0!important;left:0!important;width:100vw;height:120vh;pointer-events:none!important;z-index:999999998!important}html.nab-redirecting body::before,html.nab-redirecting body::after{animation:none!important}</style></code>
        <?php
    }
}

Shouldn’t that do the trick? I just need some snippet for deactivating the default CSS. This will probably not work?

add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'nelio-ab-testing-overlay' );
    wp_deregister_style( 'nelio-ab-testing-overlay' );
}, 100 );

• This reply was modified 1 month, 1 week ago by cutu234.