Modifying Google NewsShow

The problem: Recently I had to use Google’s NewsShow widget, but there was a fundamental problem with this news show; it only allowed for two size options, 728×90 and 300×250. I have no clue why there was this restriction, but it was frustrating, having to design a page around the widget, instead of the widget being designed around the page. Google NewsShow is created, through JavaScript, something like this “var newsShow = new google.elements.NewsShow(content, options);” with content being the target div it is to be contained in, and options to be an object literal, containing the options. The options are pretty useless once I show you how to actually modify the widget’s attributes, and take some real control. The JavaScript object does nothing but write html and css into the target div.

The solution: By using Firebug, you can select the divs, and transverse through the html, looking for the divs you want to modify, get their class or ids, and override them in your own css file. The only problem with this is css is cascading, and your css might be the one that is overridden. That is where you use the “!important” keyword. After your style declaration, add “!important”. This is an example from my modified css page:

.gns-sstitle, .gns-sstitle-link{
font-size:12px;
}

.gns-title-link, .gns-publisher-link, .gns-cluster-publishers, .gns-cluster-link, .gns-linktrackable, .gns-cluster, .gns-clearim, .gns-poweredby{
display:none !important;
}

.gns-basecanvas{
width:236px !important;
height:214px !important;
background-image:none !important;
}

My initial plan: I was going to take the source code for the widget, and hack in what I needed, but my colleague, boss, and professor David Humphrey mentioned using css and !important, pretty much saving hours of work. Although, it would of been fun ripping the widget code to bits 😛

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: