1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How would I go about showing a graphic where an adsense ad would be?

Discussion in 'Styling and Customization Questions' started by Jesepi, Jan 8, 2012.

  1. Jesepi

    Jesepi Well-Known Member

    What it comes down to is the need to have a filler graphic behind where an adsense ad would normally appear. Only people with some sort of adblock software enabled would see it.

    I've seen it on a few sites, but can't wrap my head around the css or js involved. An example of a xenforo based site would be http://8wayrun.com/

    If someone has a link to a guide somewhere, or even just a code example I would be very grateful.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I got this from their source code. Here is the HTML for use in the templates:

    Code:
    	<div class="premiumContainer" style="margin: -15px auto 12px;">
    		<div class="notice">
    			<a href="{xen:link account/upgrades}"><img src="PATH/TO/ADBLOCKIMAGE.GIF" border="0"></a>
    		</div>
    		<div class="adsense">
    			YOUR ADSENSE CODE HERE
    		</div>
    	</div>
    
    And here is the CSS which you can add to EXTRA.css. The dimensions of the container need to match the size of your adsense banner (as defined in your adsense code):

    Code:
    .premiumContainer
    {
    	position: relative;
    	overflow: hidden;
    	text-align: center;
    	width: 728px;
    	height: 90px;
    }
    
    .premiumContainer .notice
    {
    	position: absolute;
    }
    
    I tested this on my forum and it works.
     
    Jesepi and SchmitzIT like this.
  3. SchmitzIT

    SchmitzIT Well-Known Member

    Very helpful, Jake. Thanks for that :)
     
  4. DomainArchitect.com

    DomainArchitect.com Active Member

    Has anybody implemented this on a site that they can post as an example?
     
    Travis likes this.

Share This Page