Disable CSS when user uses adblock

What CSS do you have in mind?

So I want it to be if someone activates AdBlock in their browser there will be a popup telling “the page is not loading properly because you enabled AdBlock”, so I want the “page not loading properly” by disabling CSS on that page. until the user deactivates their AdBlock

You can enable ad blocking detection and select Popup message as action:
https://adinserter.pro/documentation/ad-blocking-detection

It is not psosible to disable CSS as it is loaded by the theme before ad blocking detection runs. You could only override it.

However, if you mean to protect the content when ad blocking is used, then simply check Undismissable message. The overlay (below the message) will cover the page so the content will not be accessible.

You could only override it.

Yes, how do I overwrite it? And is there a way to get AdBlock detection loaded before CSS loads?

• This reply was modified 3 years, 9 months ago by Mushlih Almubarak.

You can define styles for the overlay and message:
https://adinserter.pro/documentation/ad-blocking-detection

Ad blocing detection code runs way after the styles and scripts have been loaded.
It needs to wait for the ads to be loaded.

Hi
Can I place custom CSS if the user has their AdBlock enabled? Is this feature in the free version of your plugin?
Thank you

You can insert any code you want.
If some user has enabled ad blockng this affect only his browser, not your settings or website.

Free Ad Inserter supports custom CSS:
https://adinserter.pro/documentation/alignments-and-styles

So I wanted users who enabled adblock can’t scroll the page until they deactivated the adblock, and this is the CSS I used:
html, body {margin: 0; height: 100%; overflow: hidden}
But I don’t know, where should I put the CSS?

Simply enable Undismissable message.

When the message is displayed the page is covered with an overlay and is inaccessible.

You can use any CSS for the message or overlay:
https://adinserter.pro/documentation/ad-blocking-detection

When the message is displayed the page is covered with an overlay and is inaccessible.

However, users can still scroll the page

You can use any CSS for the message or overlay:
https://adinserter.pro/documentation/ad-blocking-detection

How do I apply the CSS to the page? Not to the message

You can set any CSS for the overlay. You can make it opaque so the page below is not seen – set opacity to 1.

background: #000; opacity: 1;

I don’t want the page to be not seen, I just want it to be scrollable.
I’ve also included this CSS in the “CSS overlay” but it doesn’t work:
html, body {margin: 0; height: 100%; overflow: hidden}
Can I put that CSS in the shortcode?

This is not a valid inline style.

The plugin uses for the overlay this basic CSS:

position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99998; user-select: none; cursor: pointer;

+ your CSS code (default is background: #000; opacity: 0.85;)

So you can define / overwrite whatever overlay style you want.

However, in such case margin makes no sense as the overlay is fixed and full-screen.
Please note that you are defining the style for the overlay element, not for the page.

You don’t need a shortcode, you define the style on the Ad Blocking Detection tab.

The page is normally scrollable, so you only need to adjust the opacity for the content to be seen.

I’ve added the CSS you provided but the page is still scrollable

There is no way to prevent scrolling with CSS.