Posts Tagged ‘color palette’

How to match AdSense colors with the WordPress theme?

February 9th, 2010 1 comment

Ever wondered how to display ads from Google Adsense that will blend in with your wordpress theme and colors, rather than having the standard white and blue that will shadow everything else you have on your site. I read articles from different bloggers, which suggested that a site with AdSense in matching theme would have a better click-rate compared to ones with the standard colors. I thought of trying this, and listed below are the steps I followed.

In order to change the colors, you have to generate the adsense ad units with colors that match your site. Go to Adsense Setup > Get Ads > Adsense for Content > Ad Unit > Colors

Google will allow you to edit each of the fields in this default color palette, but the trouble is to identify matching colors by looking at your stylesheet. All the colors and styles will be defined in “syle.css”, and you will be able to access this file by going to Dashboard > Appearance > Editor or download the theme and look for the style.css.  In the example below, I am trying to match adsense colors to the sidebar of wordpress theme “iNova”.

In syle.css search for “background:” look for the block were you want your ads to appear.
sidebar { background:#F7F7F7 url(img/sidebar_shadow.gif) top repeat-x;
This is just an example. Different themes will have different way of defining background colors.

Keep the color same as background so that border will be invisible.

Look for the style definition for anchor tags
a { color:#2970A6;

For the side panel, keep it the same color as the URL (varies for theme).

Look for the color definition for anchor tags
title a { color:#FFFFFF;

Look for font definitions like – “font-family:”
body {
font-family:Verdana,”BitStream vera Sans”,Tahoma,Helvetica,Sans-serif;

Here is the final color palette that match WordPress iNove theme sidebar.

If you know of any better ways to match colors please feel free to comment.