Google Adsense and Where this Yellow Box Issue Occurs?
Google Adsense is one of the key monetizing platform used by the Website/Blog publishers which is authorized by Google. Advertisements will be placed on a website and based on the number of user clicks on a specific Ad block, Google will pay certain amount to the website owner.
Pricing is determined using various factors like Cost-Per-Click(CPC), Click-Through-Rate(CTR), etc.,
We can apply for Google Adsense once we have sufficient posts added in the blog(there is no minimum limit, but would be good if we have atleast 15-20 posts). Mainly quality of the content should be original and should not have any copyright issues.
Add Google AdUnits in Website
Once the adsense account is approved, we can create our desired Adsize unis and can add them to display the advertisement in header, footer,sidebar, etc.,
We can get more tips in the Google Adsense Academy Center.
Remove Yellow Box in Google Adsense Units
Once the Adunits are added, in certain websites, Google Ad sense units are shown in yellow background color during initial page load. This yellow box appears only for few seconds post which the Ad will start appear in the Ad Block.
Though it appears only for few seconds, it looks annoying and acts as a distraction to the user. This doesn’t happen in all the websites, it depends on the Styles used in the Activated WordPress Theme.
Also Read: Add Social Media ‘Follow US’ buttons for WordPress Blogs.
Identify the Root Cause
Reason for the yellow box is because of the changes set for the <ins> Tag in Theme’s style.css.
If the yellow box appears, we have to first open the style.css and search for <ins> entry in it. You can find something like below code.
ins {
background: #ffc;
text-decoration: none;
}
Note: Once the Ad-unit is defined in our Google Adsense account, we need to place the generated code in the website. This generated code contains <ins> tag and yellow color(#ffc) is inherited from the style.css causing the trouble.
Solution to Change Background
By default,<ins> tag is defined with yellow color in WordPress Themes. And most of the times, it is overlooked by WordPress Theme Developers and left as it is.
To fix this problem, lets redefine the <ins> tag with the background color in Child Theme’s style.css. Please don’t forget to add !important as this will override the entry defined in Parent theme’s style.css.
ins{
background: rgb(243, 243, 243) !important;
}
By correcting the CSS Style definition, we are able to remove Yellow Box in Google Adsense from appearing on page load.
More Tips: Enable PHP Code in Text Widget in WordPress.
ins {
background: #ffc;
text-decoration: none;
}
ins {
background: #ffc;
text-decoration: none;
}
ins {
background: #ffc;
text-decoration: none;
}