{"id":39476,"date":"2013-11-26T17:14:22","date_gmt":"2013-11-26T11:44:22","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=39476"},"modified":"2020-05-24T11:05:14","modified_gmt":"2020-05-24T05:35:14","slug":"remove-yellow-border-around-adsense-ads","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2013\/11\/remove-yellow-border-around-adsense-ads\/","title":{"rendered":"How to Remove Yellow Border \/ Background Around Adsense Ads"},"content":{"rendered":"

Want to remove yellow border \/ background 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 \u00a0higher paying ad.<\/p>\n

We advised that it is in fact better to use 336×280 ad units<\/a> 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 Twenty Thirteen, you get a yellow border, which reduces the Adsense CTR and earns lesser money.<\/p>\n

Why Adsense Yellow Border?<\/h2>\n

\"adsense<\/p>\n

As you see the screenshot, we use the default Twenty Thirteen theme<\/a> and notice a yellow border around the Adsense ads.\u00a0If you use the aynchronous Adsense code<\/a>, then you will note that the tags are inserted in the ‘ins’<\/em><\/strong> code.<\/p>\n

<ins<\/strong> class=\"adsbygoogle responsive-a\"\r\nstyle=\"display:inline-block\"\r\ndata-ad-client=\"ca-pub-123445\"\r\ndata-ad-slot=\"12345\"><\/ins<\/strong>>\r\n<\/code><\/pre>\n
And if you see the Twenty Thirteen default CSS file<\/strong>, they put a yellow background (color #fff9c0<\/strong> to be more exact) to style the ins tags.<\/p>\n
ins<\/strong> {\r\n\tbackground: #fff9c0;\r\n\tborder: none;\r\n\tcolor: #333;\r\n\ttext-decoration:none;\r\n} <\/code><\/pre>\n
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.<\/p>\n
Remove Adsense Yellow Border<\/h2>\n
Its easy to remove the yellow border with a simple addition to the CSS file in your theme.<\/p>\n
.adsbygoogle {\r\nbackground: #FFF;\r\n}<\/code><\/pre>\n
We basically add a white background (#FFF) here and style the class .adsbygoogle<\/em><\/strong> rather than the ins<\/em> tags which might actually need that yellow background color somewhere. You can change the background to whatever color your background is.<\/p>\n
Reload the page, empty the cache and your Adsense yellow border is gone!<\/p>\n","protected":false},"excerpt":{"rendered":"
Want to remove yellow border \/ background around Adsense Ads? We all know that Google can insert smaller size ads…<\/p>\n","protected":false},"author":4,"featured_media":39477,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[13,49],"class_list":["post-39476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-adsense","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/39476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=39476"}],"version-history":[{"count":0,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/39476\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/39477"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=39476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=39476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=39476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}