Change ad_thread_first_post_content CSS?

[RedTurtle]

I am trying to get some code to show up when a user is using adblocker on my site.

The problem is that the vBulletin CSS for the template ad_thread_first_post_content keeps getting blocked by the adblock extension itself.

I am trying to rename the <div id="ad_thread_first_post_content"> to remove the word 'ad' (so that it does not get blocked by adblock) but when I rename that div ID and then make the changes to the css in vbulletin-chrome.css and in showthread.css (renaming all instances of #ad_thread_first_post_content in both files) and what ends up happening is that the entire template no longer loads on the showthread page.

Is there any correct way to rename this div and all the css references to it?

Thank you!

[tbworld]

1. The ad blocking software manipulates the DOM via java script. It looks for key identifiers in your page and manipulates the code accordingly.

2. Since that is an #ID you are dealing with, vbulletin might also be doing something dynamically with it.

Just hoping to give you something to look at. Unfortunately, I have never messed with the 'Ad' code in vbulletin. I would have to see exactly what you are trying to do, to be of any more assistance.

[RedTurtle]

Thanks tbworld.

So you're right, adblock does find the div ID ad_thread_first_post_content and hides it dynamically.

However, if I was able to rename that ID to another one that did not include the word "ad" in it, then this would not be blocked (I have tested this theory with changing the ID in firebug).

So what I am trying to do now is make it so that I can change that ID permanently (versus just temporarily editing it with firebug). I am not sure what I need to do to make this happen.

Once I have the div renamed, I will then be able to have an alternate image show up in place of the ad that adblocker blocks.

Hope that makes sense... :)

Thank you.

[tbworld]

I will take a look at the ad-block code when I have a chance. Although they might target the word 'Ad' the determination to hide the block would not just rest on that trigger and would primarily be triggered by the 'content': the code would then manipulate the DOM by either finding a block element to hide or adding a block element as needed. Your test in firebug might not be accurate as the page has already been rendered via the browser.

I would be creating my own test page, place an ad on it and step through the 'ad-block' JavaScript.

I am pretty busy right now, but if you run into trouble let me know and I will try to make some time to get you back on track. :)

[RedTurtle]

Although they might target the word 'Ad' the determination to hide the block would not just rest on that trigger and would primarily be triggered by the 'content: then manipulate the DOM by either finding a block element to hide or adding a block element as needed.

Thanks for the response again. I'm sorry but I don't know what this means. :(

To show you what I am trying to do though here is my ad code that goes in the Manage Ads section of vB and is showing in the first post of a thread:

<div id="wrap">
<div class="ad">
<!--- GOOGLE AD CODE GOES HERE -->
</div>

<div id="test"></div>
</div>


What I am doing is that when the adblocker blocks the google ad, I then have some jQuery check to see if the ad class is visible or not. If the ad class is not visible (meaning adblocker has blocked the ad), I then append a css class to the div id "test". Making "test" into #test .adblocked instead.

The CSS class for .adblocked is set to display an alternate image asking the user to help support the site and disable adblock.

So <div id="test"></div> becomes <div id="test" class="adblocked"></div> when an adblocker is running.

Now this part works great, except for the fact that all this is happening inside the div id ad_thread_first_post_content. Because of the name of that div, everything inside it is being hidden by the adblocker and therefore my test div does not show up properly when an adblocker is being detected.

If I can change the name of <div id="ad_thread_first_post_content"> somehow, then I would be able to have my code work.

Thanks for your time. :)

[tbworld]

PM me your jquery code or if you have a link to your site with the code already on a page, that will do to. I will take a look at it later this evening. :)

[RedTurtle]

Thanks tbworld. I will PM it to you. Really appreciate the help.

[Guest200915]

Have you got solution of this problem?

[webmastersun]

Is there any correct way to rename this div and all the css references to it?

There are 2 ways:
- Search and replace.
- create a new div and copying styles from ad_thread_first_post_content to paste into another css file that you can control.

[noypiscripter]

Why not just dynamically create the test div outside the ad_thread_first_post_content div using Javascript/jQuery? Since it is outside the ad div, then it will not be hidden. No need to rename the id.

[GHRake]

An example that is working for me, I just copy and paste the original css below and rename them

In vbulletin-chrome.css:

#ad_global_above_footer {
width:100%;
padding:{vb:stylevar ad_padding};
margin:{vb:stylevar ad_margin};
text-align:{vb:stylevar left};
clear:both;
}
#avt_global_above_footer {
width:100%;
padding:{vb:stylevar ad_padding};
margin:{vb:stylevar ad_margin};
text-align:{vb:stylevar left};
clear:both;
}

And then in ad_global_above_footer I change the div id to match:
<div id="avt_global_above_footer">

aggresive adblock filters will filter by common ad image size so you can change the image sizes by 1 pixel length and width to bypass