Free CSS Templates

This is a nice simple tutorial. It is a guide to using css to customize the look of you google adsense. Later I will release a variety of examples for you to use on your own website. Customizing the look of the google ads can be very good as it can make the ads blend into your site’s design and cause it to look less cumbersome and gaudy.

When I first think of customizing my ads I first need to work out what type of ads I am going to use. For m example I will be using the banner ads which are 468px x 60px. I chose these as they are easy to fit into site designs and for different widths of screen. I will also be showing this tutorial through adobe photoshop. If you use a different image editing program it shouldn’t be too difficult to see what I am doing at each stage.

Designing The Ad Background

Okay so this will be simple. Open up photoshop and select a page of width 468px and height 90px (greater than the height of the ads so we can can add gradients at top and bottom). When we start designing we must keep in mind one important thing – the background of the ads must be a solid colour. So with photoshop open create a new layer and fill the whole working area a background colour. For this example I am going to use #FEF1F9 as it blends in with this site but you can use any colour of your chose. The will be the background for the ads. Next is to create the gradient at the top. To do this open the marquee tool and chose fixed size of 468px wide and 15px high. Create a new layer and fill it with any colour as it will be getting changed. Change the layer properties for this layer as:

Fill Opacity: 0%
Gradient Overlay: Overlay - 100%, Linear, 90 degress, From base background colour with opacity set to 0 to black set to 100%.

This is a rather over complicated sounding explanation but in essence all you do is apply a gradient overlay on the top area which blends into the image and looks right. Try fiddling around with the setting for different effects.

Slicing The Image

This is also pretty easy. Save the psd as a jpg image and reopen in photoshop. Then select the marquee tool and select fixed size and width 1px height 15px and press CTRL and C. This will copy the gradient image. Click file then new to create a new document which should be of size identical to the gradient area selected. Press CTRL and V to paste it into the page. Save this as adtopbg.jpg. Then click edit and flip vertically and save as adbottom.jpg.

Writing The CSS

This is very simple. All you need to do is create two divs. One to have the gradient at the top repeating and one to be inside that and have the background at the bottomn repeating. For the example code below I have done the ads for a fluid designing meaning the ads will be 100% the width of the screen or div they are contained in. This is purely one example. In this example I have an ad banner and a gradient repeated and the top and a gradient repeated at the bottom. You could alternatively have gradients on the sides of a vertical coloumn or have them only on one side. The choice is up to you. Whatever you think blends best with your site. You could even if you have a grungy site have a google ad with torn edges or a rough side to it. This is possible as long as you keep the main area where the google ad is a solid colour. Google does not offer ads with image backgrounds therefore it is impossible to do ads with a gradient background. Having said this the use of the gradients at the top and bottom give the illusion that the actual ad has a gradient for a background.

CSS Example

.adbanner{
width:100%;
text-align:center;
padding-top:15x;
background:url(images/adstop.jpg) top repeat-x #FEF1F9(color of base bg);
}
.adbannerbottom{
padding-bottom:15px;
width:100%;
text-align:center;
background:url(images/adsbottom.jpg) repeat-x bottom;
}

You should change this to suite your site. The only thing you have left to do is to add it into your webpage. This is simple done by:

XHTML Example

<div class="adbanner"><div class="adbannerbottom">
(google ads here)
</div></div> 

The outcome of this should be similar to the ads at the top of this site. If you need to ask for further clarification or help please post a comment. I will releasing a few examples soon so hopefully you can take aspects from them if you don’t have photoshop or quite understand what I have done. From this tutorial you should end up with a similar ad to the top banner on this site. If you liked this please digg it.

1. Rosina says:

   November 14, 2008 at 8:43 pm

   Nice site its very interesting site! your site is fantastic..

   Reply