How to Remove Yellow Border Around Adsense Ads

By Posted 2013 Updated   BloggingTutorials

Have you noticed a yellow border box around Adsense Ads? We all know that Google can insert smaller size ads in bigger ad units if the Adsense smart algorithm decides that it will be a  higher paying ad.

We advised that it is in fact better to use 336×280 ad units than a 300×250 ad units as it will lead to higher paying ads. But when the smaller rectangle units display in the larger ad units, a clear area should appear around the smaller ads, but users of popular themes like 2013 get a yellow border, which reduces the Adsense CTR and earns lesser money.

Why Adsense Yellow Border?

adsense yellow borders

As you see the screenshot, we use the default Twenty Thirteen theme and notice a yellow border around the Adsense ads. If you use the aynchronous Adsense code, then you will note that the tags are inserted in the ‘ins’ code.

<ins class="adsbygoogle responsive-a"
style="display:inline-block"
data-ad-client="ca-pub-123445"
data-ad-slot="12345"></ins>

And if you see the Twenty Thirteen default CSS file, they put a yellow background (color fff9c0 to be more exact) to style the ins tags.

ins {
	background: #fff9c0;
	border: none;
	color: #333;
	text-decoration:none;
} 

So while the yellow border does not display when the ad unit shows full size, but whenever a smaller ad unit displays, the yellow box appears. I am not sure where else the ins tags appear, but is a design element that the theme designers will need to fix, possibly in a later version.

Remove Adsense Yellow Border

Its easy to remove the yellow border with a simple addition to the CSS file in your theme.

.adsbygoogle {
background: #FFF;
}

We basically add a white background (#FFF) here and style the class .adsbygoogle rather than the ins tags which might actually need that yellow background color somewhere. You can change the background to whatever color your background is.

Reload the page, empty the cache and your Adsense yellow border is gone!


17 comments on “How to Remove Yellow Border Around Adsense Ads

  1. Sagar Rai says:

    Hi Chandra,

    Great Post as always.

    Really helpful for bloggers those who making money from adsense.

    • P. Chandra says:

      My CTR improved with this single CSS tweak. Strangely did not see this border in Firefox, but always in Chrome.

  2. laura says:

    In my theme it shows a gray box – thanks for showing me this style sheet tweak!

    Ciao,

    L

  3. nisatoseef says:

    Really helpful for bloggers those who making money from adsense.

  4. Dev pandey says:

    Hi Chandra,

    Nice post.
    I think there is one more option to remove this border. If you have an premium adsense account, you can edit the ad formats as well.

    • P. Chandra says:

      This border is more of a theme styling issue. Premium adsense accounts can get custom Adsense sizes as per their site design.

  5. Monna says:

    Thanks for the info. It is worth readily

  6. Andrew Weiers says:

    hi chandra i would like to say you did very well and i was looking same problem answer but finally i got it.

  7. spookseo says:

    Whoa! Thanks for this one. Before, I had trusted YouTube videos for this kind of work. This task, on the other hand, is just too much for a video. You cannot really document the codes that you will have to put in the boxes. Your article nailed it for everyone who is into AdSense.

  8. Radha Krishna says:

    That’s a nice CSS trick Chandra. I haven’t noticed the yellow border until I read your post since I’ve been using Adblock extension on my browser. It looks a bit odd. Will remove it for sure and see if it improves the CTR. Thanks for the trick.

  9. Abdul says:

    Great trick to remove those yellow border which been little annoying to have them on our ads hope to remove them from my blog

  10. Sahil says:

    Thanks for sharing this tip, Yellow border does look a little annoying and Now I know how to get rid of it.

  11. Nancy Badillo says:

    Hi Chandra,

    Very cool post! Thank you for sharing with us how to remove the yellow border in Google Adsense. I will go ahead and give it a try! :-)

  12. Rifat Rahn says:

    Thanks for this tips i was just looking for this tips. I don’t like this yellow background.

  13. Eli says:

    Weird, it didn’t work for me.

  14. Melody says:

    I noticed that the code slightly delays the page load time even though I use a host with very quick page call times. I’ll keep the code over the next week or so and see if the couple second delay impacts traffic.

  15. ValutaTutto says:

    One of those rare moments where the web delivers something back of value and with such clarity!

    Great job!

Leave a Reply

Your email address will not be published. Required fields are marked *




css.php