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?
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.
