13 replies [Last post]
rikcat
rikcat's picture
Offline
Regular
Charlotte
Last seen: 17 years 30 weeks ago
Charlotte
Joined: 2005-03-02
Posts: 19
Points: 0

Is there any way to style the google ads by using css. The clunky look of the ads makes me reluctant to ad them to my site. I've seen other sites do it, but i've tried to no avail.

any help would be great

Rik Catlow
http//www.rikcat.com
http//www.dontmeetyourheroes.com

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 38 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Re: Styling Google Adsense Ads

rikcat wrote:
Is there any way to style the google ads by using css. The clunky look of the ads makes me reluctant to ad them to my site. I've seen other sites do it, but i've tried to no avail.

any help would be great

What do you mean exactly? Google gives a handful of options to control the text-color, border, and shape of the adsense block, but you probably already knew that. Can you rephrase what you're looking for? On a totally different note, I like the look of your site very much.

- Antibland

rikcat
rikcat's picture
Offline
Regular
Charlotte
Last seen: 17 years 30 weeks ago
Charlotte
Joined: 2005-03-02
Posts: 19
Points: 0

Styling Google Adsense Ads

Thanks Anti

You can change color and borders but have no control over font size and style...line-height, letter-spacing etc...

if you look at technorati...they are able to style them like the rest of there site

http://www.technorati.com/pop/

Rik Catlow
http//www.rikcat.com
http//www.dontmeetyourheroes.com

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 38 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Styling Google Adsense Ads

But you said that you've seen other sites do it, so now I'm confused. When I first signed up for the program, I remember reading something to the effect that, if a site's adblock units got over a certain amount of clicks (not sure what this number is, but it was extremely high), custom adblocks were available. A google representative would work with you to this end. I went to the adsense website and looked around for this snippet, but couldn't find it.

I'm looking at the technoati code now to see what's happening. I'll post later.

- Antibland

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 38 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Styling Google Adsense Ads

This is their adsense block:

 <script  type="text/javascript" > 
  <!-- 
    // This script sets the attributes for requesting ads. 
    google_ad_client = "pub-4235192077789322"; 
    google_ad_channel ="8151503394"; 
    google_ad_output = "js"; 
    google_feedback = "on"; 
    google_max_num_ads = 4; 
    google_ad_type  = "text"; 
  --> 
  </script>


When I go into my own adsense account, I can't find the option to control google_ad_output or google_feedback anywhere. I suspect that this site could be one that receives custom attention from google. Has anyone else implemented adsense in the same way technorati has? How does one go about making adsense pretty?

- Antibland

rikcat
rikcat's picture
Offline
Regular
Charlotte
Last seen: 17 years 30 weeks ago
Charlotte
Joined: 2005-03-02
Posts: 19
Points: 0

Styling Google Adsense Ads

Yes that is the standard jscript code they give you to add to your site.. Even if you put a div around the script and try to style the text nothin happens...the script must pull in inline styles that overrides the style sheet

this site looks like they have fooled with the styleing..

http://www.dooce.com/about.html

Rik Catlow
http//www.rikcat.com
http//www.dontmeetyourheroes.com

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 16 years 6 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Styling Google Adsense Ads

Quote:
this site looks like they have fooled with the styleing..

late to the party - but it looks they have styled directly on the page:
<script type="text/javascript"><!--
google_ad_client = "pub-2716232239784024";
google_alternate_color = "FFFFFF";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as";
google_ad_channel ="";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "993300";
google_color_url = "993300";
google_color_text = "000000";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 38 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Styling Google Adsense Ads

rikcat wrote:
Yes that is the standard jscript code they give you to add to your site.. Even if you put a div around the script and try to style the text nothin happens...the script must pull in inline styles that overrides the style sheet


this site looks like they have fooled with the styleing..

http://www.dooce.com/about.html

I don't think they fooled with the styling at all. Inside the adsense control panel, you specify the text-color, border, etc..., and the code to paste into your page is spit out for you automatically. The adsense at dooce.com doesn't look extraordinary like the technorati adsense does. It just looks styled in the usual way. In fact, it reminds me of the adsense code on my site, a direct result of using the control panel editor google provides:

<script type="text/javascript"><!-- 
google_ad_client = "pub-2778324335693754"; 
google_ad_width = 468; 
google_ad_height = 60; 
google_ad_format = "468x60_as"; 
google_ad_channel =""; 
google_color_border = "F5F5F7"; 
google_color_bg = "FDFDFD"; 
google_color_link = "333333"; 
google_color_url = "FF7373"; 
google_color_text = "000000"; 
//--></script> 
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script>

So, the question still remains, how does technorati manage to create highlightable text and custom styles for their adblocks?

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 21 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Styling Google Adsense Ads

You can't tell anything really just by looking at the scripting - you have to view what is actually rendered. If you have downloaded Firefox and chose to do a custom install with all features you will be able to use the DOM inspector by chosing Tools|DOM Inspector or hitting Ctrl+Shift+I. In the inspector do a search (Ctrl-F) for iframe - it will take you down to the point where the embedding takes place. The iframe contains an external HTML page with its own styling and all that. So basically, you are absolutely SOL when it comes to doing any internal styling. However, if you have followed my suggestion, you will know how to use the DOM Inspector to peer deep in the rendered code of a page which is kinda fun in its own right.

(And by the way - that is one seriously kludgy bit of code that Google has there!)

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 38 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Styling Google Adsense Ads

DCElliott wrote:
You can't tell anything really just by looking at the scripting - you have to view what is actually rendered. If you have downloaded Firefox and chose to do a custom install with all features you will be able to use the DOM inspector by chosing Tools|DOM Inspector or hitting Ctrl+Shift+I. In the inspector do a search (Ctrl-F) for iframe - it will take you down to the point where the embedding takes place. The iframe contains an external HTML page with its own styling and all that. So basically, you are absolutely SOL when it comes to doing any internal styling. However, if you have followed my suggestion, you will know how to use the DOM Inspector to peer deep in the rendered code of a page which is kinda fun in its own right.

(And by the way - that is one seriously kludgy bit of code that Google has there!)

DE

I understand that you can't really see what's going on by looking at the adsense code in the source. The thing we're all trying to grasp here is how the technorati site, for example, manages to implement custom adsense blocks that aren't available from the standard options area inside of the adsense control panel. The ads on that page have highlightable text; most others I see have text that users cannot highlight. Why is this and how can we duplicate this feat? That is the trouble I'm having with all of this.

- Antibland

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 21 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Styling Google Adsense Ads

Well, by looking at the DOM, the Technorati site appears to have the ads served in a simple div with an id #extra that can subsequently be directly styled by the site's CSS, relevant code as follows:

/* Left Column, "Extras" 
==============================================================================================  */
#extra {float: left; width: 220px; margin-top: 1em; padding-bottom:2em;color: #333; font-size: 0.95em;}
#extra h2 {font-size: 1.1em; font-weight: bold; margin: 0 0 1em;}
#extra div {margin-top: 1em; padding: 10px 20px 10px 10px;}

/* ---= What's This Box =--- */
#whatsthis p {margin: 0 0 1em;}

/* ---= Sponsors Box styles =--- */
div#sponsors {display:none;font-size:1.05em;background: #F1F1F9; color: #000; border: 1px solid #E7E7F5; padding:0 0 1em 0;margin:20px 0 0 0;}
* html div#sponsors {width:210px;} /* IE Filter */
div#sponsors h2 {padding:10px 0 0 10px;margin-bottom:0;}
div#sponsors div {margin-top:0;width:170px;overflow:hidden;}
div#sponsors li  {padding-bottom:1em}
div#sponsors h3 {font-weight:bold}
div#sponsors a:hover {text-decoration:none}
div#sponsors a:hover h3 {text-decoration:underline}
div#sponsors a:hover p {text-decoration:none}
div#sponsors p {font-weight:normal;color:#000}
div#sponsors span {display:block;font-size:.95em;color: #0000C3;}
div#sponsors a.adsbygoogle:hover {text-decoration:underline}

Since they are passing different variables to the adsense engine one must assume they are receiving a different slug of code. I think the most telling parameter is: google_ad_type = "text"; which to me implies that they are getting a pretty simple feed. The iframe style ads are pretty gross with the iframe, html, table and such all being used to serve up what is only an clickable image - go figure.

Hope this helps.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

rikcat
rikcat's picture
Offline
Regular
Charlotte
Last seen: 17 years 30 weeks ago
Charlotte
Joined: 2005-03-02
Posts: 19
Points: 0

Styling Google Adsense Ads

I contacted Google about this. They said the altering the look of the ads are a violation of there User Agreement. Who reads the UA? Well i can only hope they ad the abiltity to change the fontstyle, size, letter-spacing, and line height in the future.

Rik Catlow
http//www.rikcat.com
http//www.dontmeetyourheroes.com

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 38 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Styling Google Adsense Ads

rikcat wrote:
I contacted Google about this. They said the altering the look of the ads are a violation of there User Agreement. Who reads the UA? Well i can only hope they ad the abiltity to change the fontstyle, size, letter-spacing, and line height in the future.

I know that changing their code is a violation, but I seriously doubt technorati has altered the code and broken the UA. I couldn't get my adsense units to look like theirs even if I was willing to violate the UA. I guess their slick adsense style will remain a mystery for now.

- Antibland

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 14 years 27 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

Styling Google Adsense Ads

Quote:
(And by the way - that is one seriously kludgy bit of code that Google has there!)

And in cases of Adsense on websites, I've noticed that it has some validation issues. I don't think they're major errors though, just a few warnings.

I am Dan, Dan I am.