How to Fix the Flash of Yellow Before an Adsense Ad

Yellow Flash Before AdsenseI just added an Adsense ad code to a new blog I’d created.  So far so good, the ads display as expected.

Except: upon loading each page, there is a momentary flash of pale yellow where the banner will shortly appear.  This is undesirable behavior, not only because it is a visual distraction, but because it calls out my advertising banner as a distinct block separate from the rest of the page, perhaps contributing to banner blindness.

After a bit of poking around, I solved this problem and eliminated the yellow flash.  It turns out that this was happening because I was using the Twenty Eleven theme for WordPress.  I think this problem might also afflict the Twenty Ten theme and others, and probably a colored flash will show up for those using certain themes for other CMSes like Drupal or Joomla. Update: The yellow flash also afflicts the new Twenty Twelve theme, which can be corrected the same way.

What’s going on is that the javascript Adsense code embeds an <ins> element into your page.  This box inherits the <ins> styling defined in the theme’s main stylesheet.  In the case of the 2011 theme for WordPress, the <ins> tag is styled to have a pale yellow background.  By removing this styling, I stopped the banner from showing yellow before the ads load.  Here’s how:

  1. From the WordPress admin interface choose the Editor under the Appearance menu.
  2. This should default to editing the theme’s main stylesheet, but if not, choose Stylesheet (style.css) on the right-hand menu.
  3. Find the portion of css that styles the <ins> element.   In my copy of the 2011 theme, it looked like this:

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

  4. Delete the line background: #fff9c0; which adds a pale yellow background color to the <ins> element.
  5. Click Update File to save the stylesheet. If you have a page caching plugin activated, such as WP Super Cache, you may need to go into the settings and delete the cache in order to immediately see that your changes have gone into effect.

That’s all!  This is certainly a somewhat obscure problem, but I thought it was worth writing up if it helps a couple people get on the road to blog success a little faster.

Leave a Reply

CommentLuv badge