Google AdSense Yellow Background Box (Change to White / Transparent / Blank)

Home»Cloud & Internet»Advertising»Google AdSense Yellow Background Box (Change to White / Transparent / Blank)

On web pages that are added with Google AdSense ad codes, the background color of the ads appears as yellow (or another other color), instead of white or transparent (which will show the color of web page background).

The yellow blocks of Google AdSense ads normally appear before the ads actually loaded as the ads space is allocated once the web page is rendered. If you have just created a new ad and place its ad code on the web page, or are still waiting for approval to join Google AdSense, the yellow ad blocks are even more glaring. Supposedly Google AdSense would display ‘blank ad’ which shows nothing (i.e. empty with white background or transparent background) that blends with background color of the web page seamlessly.

Google AdSense Yellow Box

To make matter worse, changing the color of the Google AdSense ads background does not fix the yellow box that appears.

The reason the yellow box appears on the Google AdSense ads space is likely due to custom CSS that changes the color of Google AdSense ads block. Google AdSense uses “ins” tag to inject ads through JavaScript. Some themes or templates have CSS (Cascading Style Sheets) that formats that “ins” tag, making it yellow. For example, the following CSS code will make Google AdSense ads have yellow background:

ins { background: #ffc; text-decoration: none; }

The CSS code can appears inline on the HTML of the web page, or import via external CSS, such as style.css in the case of WordPress. However, you no need to find the where exactly is that code that you need to change in the CSS, as CSS can be overridden.

To resolve the yellow box issue and revert the Google AdSense background back to white or transparent, add the following code just before the Google AdSense ad code:

For white background:

<style>
.adsbg { background: #fff; }
</style>

For transparent background:

<style>
.adsbg { background: transparent; }
</style>
You can also put the above CSS code in an external CSS but make sure that it’s loading last.

Then, modify the following line of Google AdSense ad code to add in the CSS class:

Before:

<ins class="adsbygoogle"

After:

<ins class="adsbygoogle adsbg"
Note
You can change the class name to one you prefer.
Note
If you don’t like to modify the Google AdSense ad code, you can change the style of “ins” tag directly:

ins{background: #fff}

This method may affect the design of elements that use the “ins” tag.

About the Author:

LK is a technology writer for Tech Journey with background of system and network administrator. He has be documenting his experiences in digital and technology world for over 15 years.Connect with LK through Tech Journey on Facebook, Twitter or Google+.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!