Highlighting Ads In Google Search Results
Google would never be evil, of course, but they would over the years make it harder and harder to tell ads from the organic search results. Under certain light and at certain screen angles, I can tell the ads from the organic results, but more often than not, I can’t.
If you did with your own site what Google does with its search results, you would be banned from AdSense. There was a time, when the ads had a nice colored background and stood out from the organic search results. These days, the background color is so close to the foreground color that on most monitors it is indistinguishable. The solution? Create a custom user stylesheet for each browser that let’s you force whatever background you want on the ads. Here’s how this looks in Chrome after updating the user stylesheet:
Chrome with user stylesheet to style Google Ads
These instructions are for Windows 7. Vista will be similar or the same, but in XP the data will be in a slightly different location. In all cases, you’ll have to substitute your actual username for [USERNAME]
Highlight Google Ads in Firefox
In Firefox, your user stylesheet is in C:\Users\[USERNAME]\AppData\Roaming\Mozilla\Firefox\Profiles\[DEFAULT PROFILE]\chrome\userContent.css
By default, neither the \chrome directory nor the userContent.css file exist. You’ll have to create them. Firefox has a feature that lets you specify a style rule for only a specific domain, so we’ll do that here and add the following code to userContent.css
@-moz-document domain(google.com) {
div#center_col span#taw div#tads,
div#rhscol div#rhs div#rhs_block,
div#rhscol div#rhs div#rhs_block div.c
{background-color: #7c7 !important;}
}
Note that Firefox has to be restarted for that code to take effect.
Highlight Google Ads in Chrome
Your Chrome user stylesheet will usually be at C:\Users\[USERNAME]\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css. In your CSS file, insert the following lines:
div#center_col span#taw div#tads,
div#rhscol div#rhs div#rhs_block,
div#rhscol div#rhs div#rhs_block div.c
{background-color: #7c7 !important;}
Note that I’ve used fairly specific selectors (for example #center_col #taw #tads) so that I won’t get too many false positives and mess up some other site that uses #tads as a selector.
Filed under: Consumer Chronicles • Web Fun
Like this post? Subscribe to my RSS feed and get loads more!
Happened upon this post doing an odd query. This is an interesting trick that I have to try. We use projectors at the office and set them as bright as possible and sure enough, we can’t see the ad backgrounds at all.