How to remove the light yellow background from AdSense ads and change it to a different color

How to remove the light yellow background from AdSense ads and change it to a different color

When you place an AdSense ad on your website, Google uses the ‘ins’ tag to wrap the ad. Many themes, including many of the WordPress themes, use a light yellow background color for the ‘ins’ tag by default… specifically the color #FF9900. Armed with this knowledge, the solution is quite simple. One way is to update the existing CSS, changing the background-color: #FF9900 to whichever color you choose, like white or #FFFFFF.

Edit CSS Menu Item in WordPress

Click on the Edit CSS menu item in WordPress

Another way, for WordPress specifically, would be to go to the ‘Appearance -> Edit CSS’ menu, and, put the following code into the custom CSS stylesheet:

The above code will override the background-color with whichever color you choose.

~~~~ UPDATE ~~~~
Thank you to Breach (see comments below) for figuring out how to handle Google’s new responsive ads. Instead of the code above, use the code below:

97 Comments

  1. Thank you! Nice little trick!

  2. Thanks for the solution, i was getting the exception on my handmade card store.

    Thanks once again for the solution.

    Megha

    • Good to hear it worked for you!

  3. It works!!!! Thank you so much.

    • No problem Max, glad it worked for you!

  4. In my stylesheet it looks like this:

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

    What do I do here?

    • I think you just need to add !important, like this:
      ins {
      background: #FFFFCC !important;
      text-decoration: none;
      }

  5. Thanks John–did the trick for a beginner like me. No more yellow background!–I will have to check out more of this CSS stuff. Craig http://analyze6.com

    • Hi Craig! Just shout if you have any questions along your journey, always glad to lend a hand! πŸ™‚

  6. You have no idea how good it is to find your solution. Thank you so much.

    I’ve used this code a few times on several different websites … editing my custom css file. However, how do I change the background colour to two different background colours (one in the header, one in the body content) both on the same website?

    • Hi Elizabeth, you’re most welcome!

      One way to isolate the different areas would be to wrap the code inside of another div tag, and assign each div an id. For example:

      <div id="headerdiv">
      [[[ google code here ]]]
      </div>

      Then, in your styles, you could do something like this:

      #headerdiv ins {
      ... styles here ...
      }

      Let me know if that helps! πŸ™‚

      • I tried this and it doesn’t seem to work. Mine looks like this:

        mark, ins {
        background: #FFFFFF!important;
        text-decoration: none;
        }

        • Hi Will,

          I know it’s been a while but I didn’t see your comment. The thing that jumps out to me is that you have no separation between the color and the !important.

          Your code looks like:
          background: #FFFFFF!important;

          and it should look like:
          background: #FFFFFF !important;

          … note the space between the final “F” and the “!”.

          Hope this helps!

  7. Ah! It worked. Thank you so much. I am very clueless when it comes to html. It was so nice to find your site.

    • Awesome! Nice to have you here! πŸ™‚

  8. I added the missing space but it still doesn’t work

    mark, ins {
    background: #FFFFFF !important;
    text-decoration: none;
    }

    • Hey Will!

      If you could, please send me a link to the site (see my contact page) and I’ll take a look! Thanks! πŸ™‚

  9. Tahnk you!!! It worked and I am so pleased!! Finally no more unprofessional yellow looking blocks behind my ads.

    • Hi! Glad it’s working for you! I never liked the ugly yellow color either. πŸ˜‰

  10. I am having a problem with the background-color as well. I want white, but I get grey all the time… Even if the settings are white. I have a white background and responsive ad.

    • Hi Henk!

      Can you send me a link to the page in question? If you don’t have a link, can you send me the file? I’d be happy to take a look! (see my contact page for my contact info)

  11. Well, my theme doesn’t has an Edit CSS option, but still using the code, I managed it fix it out. Thanks anyways!

    • Hi Pingal!

      Yes, some themes don’t have that, you’re right. I’m glad you figured out where to put the code anyway! πŸ™‚

  12. Hi John, I tried it and it solved the yellow problem but only within the scope of the ad size…the bottom/ excess space still shows yellow…my url is in my info…and I am using adsense unit type “responsive”

    thanks a lot for your help, looking forward
    appreciate your response πŸ™‚

    • Hi! When you have a sec, can you email your code to me? You’ll find my email address on my contact page (http://johnshipp.com/contact/). I haven’t tested this with Google’s responsive ad type yet. Thanks for the note!! πŸ™‚

      • Hey John, thank you very much. I have emailed you.

        • Oh John I figured it out:

          For AdSense using responsive ad unit, this is what i did..changed the color code into transparent and it worked

          ins {
          background: transparent;
          text-decoration: none;
          }

          • Hey Breach!

            Good work! I’ve provided an update in the post above as well. Thank you! πŸ™‚

          • This doesn’t seem to work for me. Still yellow. Any ideas?

          • Hi Joel,

            Can you send me a link to my email (see my contact page) and I’ll take a look.

            Thanks!

    • Hi Giel! Simple is GOOD! πŸ™‚

  13. Hi John, I have trouble finding the ins { tag in my css style sheet. Sounds easy to change the yellow background but I can’t even find the ins { tag listed in my theme…Do you have any idea where I might find it? I use a child theme if that helps.. I also looked in the original version of my theme and couldn’t find it.

    Thanks a lot for any help in advance!
    – Victoria

    • Hi Victoria, You can *add* the ins {} code to your stylesheet if you can’t find it. Just copy and paste the code into your stylesheet and it should work!

      • It worked! Thank you so much for your reply. I’m new to CSS / Coding so I’m always scared to mess with any of it πŸ™‚

        • Awesome! Feel free to reach out any time, glad to help! πŸ™‚

  14. Hi Jhonshipp I am having the same issue you have written about, Presently I am using Human theme on my website. I couldn’t fix this issue as per your method. The add placed below after post title & in sidebar widget are working fine, but rest of the adds are showing same yellow background. Please help me regarding that

    • Hi! If you have time, can you send me a link to the site in question and I’ll take a look! πŸ™‚ Thanks!

  15. Hi John! I’m not finding anything in my site’s stylesheet that looks like what you’ve posted. I’m completely ignorant when it comes to CSS stuff. Would you mind taking a look at http://www.parentingaces.com and letting me know very specifically how to get rid of the greenish-yellow background on the ads? Thanks so much!

    • Hi Lisa,

      On your site, first I would suggest you look for any css page the site is using and ADD the code to that css file. If you can’t find the code it just means it doesn’t exist, so, you’ll have to add it to the stylesheet. Let me know if that helps, if not, please reach out to me via my contact page.

      Thanks! πŸ™‚

      • I added the code in the CSS style sheet (there was no code at all like the one you posted) but the ads still have the greenish background. Any other suggestions???? Thanks!

  16. That has been bugging me for ages – thanks for the quick fix! Worked like a charm.

    • Hi Mike… you’re welcome! Happy you’re not bugged anymore! πŸ™‚

  17. Tried this, but what maybe happening to some is that their cookies donΒ΄t let them observe the changes. So just switch to a new browser (if u are using chrome just open a new window in the incognito mode) and you will the changes reflected.

  18. Works fantastic! Thanks a lot!

    • Awesome! πŸ™‚

  19. Thanks John for explanation. I done this on my blog and wrote short post how to do this trick.

  20. Hi,
    How to remove the light yellow background from adsense ads

    kindly guide me and do the needful.

    • Hi Sri… have you tried the steps above? It seems to work for most.

  21. thanks, it worked..

    • Nice!

    • Hi Phil, I looked at your site, try this:
      code {
      background-color: none !important;
      }

  22. Small code, but very helpful.
    Thank’s for sharing.

    • You’re welcome! πŸ™‚

  23. Hey, still not working for me. Would you mind checking this out?http://www.puzzzy.com/

    Its the link ad just above the facebook like widget! Tia πŸ™‚

    • Hi MuBa! … Looks good from my end, can you shoot me a screenshot to my email address? (see my contact page for my email).

  24. Thanks! very great trick πŸ™‚

    • Glad it worked! πŸ™‚

  25. Worked fine!

    • Nice! πŸ™‚

    • Super! πŸ™‚

  26. Hi John, despite change the color code i don’t see any change. Please help me out.

    • Hi Raghav, please send me a link so I can take a look!

  27. Wo!! Trick worked thank u very much broo

    • You’re welcome!

  28. Thank you, This code worked for me. Thank you for sharing this trick.

    • You bet! πŸ™‚

  29. @JohnShipp

    Thank you so much. your post gave good idea for solution of Yellow Space in adsense. there is another Way which is working every wordpress themes. Go to the style.css, find this fff9c0, change it #fff to remove the yellow background behind your ads.

    Example

    ins {
    background: #fff9c0 (change it #fff);
    text-decoration: none;
    color: #000;
    }

  30. Hi I’ve tried the code in stylesheet and the yellow background is still there when the page loads.

    • Hi Nicole, feel free to send your code or URL to me and I’ll take a look!

  31. I am having a hard time fixing that annoying yellow background on my site. I did everything but still can’t fix it πŸ™

    • Hi Hadem! Sorry to hear you’re having trouble. Can you send me your code or URL for my review?

      • Thanks man it works, my site doesn’t show the changes at first but it did work after an hour or two. Perhaps because of my site uses caching. Now there’s no more yellow background on my ads. A million thanks to you.

        • Sweet! Good to know it’s working! πŸ™‚

  32. fanstatic finally serach and sort out , thnx

  33. Thank you very much for sharing this. I was having this problem on all the responsive ads from AdSense on my website. Now it’s fixed πŸ™‚

  34. I resolved this by adding it straight into the adsense tag like below in the style=”:

    (adsbygoogle = window.adsbygoogle || []).push({});

    Save you having to mess around with your themes code.

    Worked for me, hope this helps!

    Neil

  35. John – This worked for my responsive Ad’s in the content section (embedded adsense code into template), but in my sidebar (code embedded via widget html/txt) I still see the yellow. Any suggestions? Thanks!

    • Hey Jay… shoot me a quick note using the info on my contact page with the URL and I’ll take a look. Thanks!

  36. Hello John,

    Hope you are doing good.

    I have modified the CSS as you have mentioned but its still not working. Please assit.

    URL:-http://musafiryaar.com

    Thanks,

    • Hey Milind!

      For your blog, try using the background-color: #FFFFFF !important instead of “transparent”… should work. The “transparent” trick is only for Google’s responsive ads.

  37. Thanks a lot for the trick, I normally don’t comment, you made it simple. Hats off good work

  38. Thank you, The second code really helped me to remove yellow colour in my pep magazine theme.

  39. Thank you! I was doing everything to fix this and this little tweak made my day.

  40. THANK YOU VERY VERY VERY MUCH !!!

    For my latest WordPress site, Celebrity Harpy, that yellow background was annoying the living daylights out of me.

    I honestly thought that something was wrong with my theme and I started checking the theme’s CSS for the problem.

    Glad to see that I was not going crazy – lol

    Thanks πŸ™‚

  41. Tried changing the CSS style and it really worked for me. Thanks for the great article.

  42. Thank you for simple trick. Work prefectly on my blog. πŸ™‚

Submit a Comment

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