How to style this Javascript RSS feed

I just added this code to my website to add an RSS feed. If i alter the CSS to change the fontsize or color nothing happens. The CSS works fine on the width and margins. I want to style the “titles CIO, US-CERT, TechRepublic, and The Latest and most reliable news.” Any ideas on how to make this look more appealing? I followed the instructions from here: http://www.developerdrive.com/2012/05/a-simple-way-to-add-free-news-content-to-your-website-part-2/
As you can see it is ugly. Any reason why I cant change the font color and size? Any help is appreciated.
Heres the code for my site:

<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 1000px;
font-size: 25px;
color: #000000;

</style>

<script src="https://www.google.com/jsapi/" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>

<script type="text/javascript">
function showControl() {
var feeds = [
{title:'CIO',
url:'http://feeds.cio.com/cio/feed/drilldowntopic/3089?format=xml'},
{title:'US-Cert',
url:'http://www.us-cert.gov/ncas/current-activity.xml'},
{title:'TechRepublic',
url:'http://www.techrepublic.com/rssfeeds/topic/security/'}];

new GFdynamicFeedControl(feeds, 'feedControl',
{numResults : 3, stacked : true,
title: "The Latest Security News from the Most Reliable Sources"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showControl);
</script>

Hi,

The html will look like this once the page has loaded:


<div id="feedControl">
		<div class="gfg-root">
				<div class="gfg-title">The Latest Security News from the Most Reliable Sources</div>
				<div class="gfg-entry">
						<div class="gf-result" style="top: 0px;">
								<div class="gf-title"><a href="http://www.techrepublic.com/article/security-could-be-a-casualty-of-the-new-azure-portal/#ftag=RSS56d97e7" class="gf-title" target="_blank">Security could be a casualty of the new Azure portal</a></div>
								<div class="gf-author">by&nbsp;Tony Bradley</div>
								<div class="gf-spacer">-</div>
								<div class="gf-relativePublishedDate">8 hours ago</div>
								<div class="gf-snippet">Microsoft has lowered the bar for development and made it easier to create custom apps in Azure, but that simplicity may come ...</div>
						</div>
						<div class="gfg-entry" style="position: absolute; top: 0px; left: 0px; visibility: hidden; opacity: 0;"></div>
				</div>
				<div class="gfg-subtitle"><a target="_blank" href="http://www.us-cert.gov/ncas/current-activity.xml" class="gfg-collapse-href">US-Cert</a>
						<div class="clearFloat"></div>
				</div>
				<div class="gfg-list">
						<div class="gfg-listentry gfg-listentry-odd"><a href="http://www.us-cert.gov/ncas/current-activity/2014/04/09/Easter-Holiday-Phishing-Scams-and-Malware-Campaigns" target="_blank">Easter Holiday Phishing Scams and Malware Campaigns</a></div>
						<div class="gfg-listentry gfg-listentry-even"><a href="http://www.us-cert.gov/ncas/current-activity/2014/04/09/Adobe-Releases-Security-Updates-Flash-Player-and-AIR" target="_blank">Adobe Releases Security Updates for Flash Player and AIR</a></div>
						<div class="gfg-listentry gfg-listentry-odd"><a href="http://www.us-cert.gov/ncas/current-activity/2014/04/08/Microsoft-Releases-April-2014-Security-Bulletin" target="_blank">Microsoft Releases April 2014 Security Bulletin</a></div>
				</div>
				<div class="gfg-subtitle"><a target="_blank" href="http://www.cio.com/" class="gfg-collapse-href">CIO</a>
						<div class="clearFloat"></div>
				</div>
				<div class="gfg-list">
						<div class="gfg-listentry gfg-listentry-odd"><a href="http://feeds.cio.com/~r/cio/feed/drilldowntopic/3089/~3/8ZH-vDRrbBg/Windows_XP_is_Still_Running_Thousands_of_Websites_Worldwide" target="_blank">Windows XP is Still Running Thousands of Websites Worldwide</a></div>
						<div class="gfg-listentry gfg-listentry-even"><a href="http://feeds.cio.com/~r/cio/feed/drilldowntopic/3089/~3/ArRhi29zwjY/What_You_Need_to_Know_About_Heartbleed_and_OpenSSL" target="_blank">What You Need to Know About Heartbleed and OpenSSL</a></div>
						<div class="gfg-listentry gfg-listentry-odd"><a href="http://feeds.cio.com/~r/cio/feed/drilldowntopic/3089/~3/P4USTtMr0Ps/The_Critical_Widespread_Heartbleed_Bug_and_You_How_to_Keep_Your_Private_Info_Safe" target="_blank">The Critical, Widespread Heartbleed Bug and You: How to Keep Your Private Info Safe</a></div>
				</div>
				<div class="gfg-subtitle"><a target="_blank" href="" class="gfg-collapse-href">TechRepublic</a>
						<div class="clearFloat"></div>
				</div>
				<div class="gfg-list">
						<div class="gfg-listentry gfg-listentry-highlight gfg-listentry-odd"><a href="http://www.techrepublic.com/article/security-could-be-a-casualty-of-the-new-azure-portal/#ftag=RSS56d97e7" target="_blank">Security could be a casualty of the new Azure portal</a></div>
						<div class="gfg-listentry gfg-listentry-even"><a href="http://www.techrepublic.com/article/how-to-stop-a-zombie-horde-of-botnets/#ftag=RSS56d97e7" target="_blank">How to stop a zombie horde of botnets</a></div>
						<div class="gfg-listentry gfg-listentry-odd"><a href="http://www.techrepublic.com/article/its-call-to-action-be-a-trusted-and-innovative-tech-advisor-or-risk-irrelevance/#ftag=RSS56d97e7" target="_blank">IT's call to action: Be a trusted and innovative tech advisor or risk irrelevance</a></div>
				</div>
		</div>
</div>


Just over-ride the specific styles you need using the classes in that html.

e.g.


.gfg-subtitle {font-size:24px;background:red;padding:10px;}
.gfg-subtitle a{text-decoration:none}

To over-ride any of the inline styling then add !important to the rule.

I add the code to the style section right? Sorry for my lack of understanding, I’m a security major not a web developer. Specifically I add the code like this:


<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}

.gfg-subtitle {font-size:24px;background:red;padding:10px;}
.gfg-subtitle a{text-decoration:none}

</style>

Yes that’s right.

Just add your new rules in that style block making sure the rules follow the initial css and then they will win out (apart from any inline styling that you may need to over-ride as mentioned above).

If you have Firebug (in Firefox) or the chrome developer tools you can simply point to the element and you can see where the styles are coming from and what rules are applied which makes it easier to over-ride them.

A quick search for “GFdynamicFeedControl” yielded this documentation for styling the feed output.

http://uds.googleusercontent.com/uds/solutions/dynamicfeed/reference.html#_css

So thanks to you guys I got it styled up a little bit. I am now wondering why does the last news feed the “Tech-Republic” feed link back to my own site? Heres the code:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:regular,bold' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>

<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 1000px;
font-size: 25px;
color: #000000;
}
.gfg-subtitle {font-size:18px; background:#94000; padding:5px;}
.gfg-subtitle a{text-decoration:none; color:#666666; }
.gfg-title {font-size: 30px; color:#000000; text-shadow:#336699 2px 2px 3px;}
</style>
<script src="https://www.google.com/jsapi/" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>

<script type="text/javascript">
function showControl() {
var feeds = [
{title:'CIO - CIO magazine has a circulation of 140,000 CIOs and high-level IT executive readers.',
url:'http://feeds.cio.com/cio/feed/drilldowntopic/3089?format=xml'},
{title:'US-Cert - strives for a safer, stronger Internet for all Americans.',
url:'http://www.us-cert.gov/ncas/current-activity.xml'},
{title:'TechRepublic -  Offers a vast library of professional resources from the leading vendors in the IT industry.',
url:'http://www.techrepublic.com/rssfeeds/topic/security/'}];

new GFdynamicFeedControl(feeds, 'feedControl',
{numResults : 3, stacked : true,
title: "The Latest Security News from the Most Reliable Sources"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showControl);
</script>

Further more the CIO link takes you to CIO.com and not the link specified in the code above. I know the links in the code above are probably the RSS feed links but where are the links for the titles if these are the feeds and how do I change them?

Anybody have any idea why the link for Tech Republic is not linking to the proper address? Thanks

Hi,

This doesn’t seem to be a CSS question any more and RSS feeds are not something I am familiar with. I tried your code and it does indeed link the title header back to the local site. It must be something to do with the feed link form techRepublic I would think but that’s just a guess.

I can move the thread to JS if you think that’s more appropriate?

My guess is that the CIO and TechRepublic feed don’t follow the exact interface for the title link. The title link being used in the HTML is the one specified in the feed via the link element in the RSS feed. I would think there is a way to override that using a callback or something but can’t say for certain since I’m not familiar with google feeds api.

Ex. The US-Cert feed contains a link attribute as a child of channel.

http://www.us-cert.gov/ncas/current-activity.xml

However, the TechRepublic feeds have atom:link with some attributes that look to be preventing the inclusion of the link in the HTML.

http://feeds.cio.com/cio/feed/drilldowntopic/3089?format=xml
http://www.techrepublic.com/rssfeeds/topic/security/

Add a feed load callback to the feed options and reset the title from the feedUrl. That seems to solve the problem.


new GFdynamicFeedControl(feeds, 'feedControl',
{numResults : 3, stacked : true, feedLoadCallback: function(data) { data.feed.link = data.feed.feedUrl; },
title: "The Latest Security News from the Most Reliable Sources"});
}

I arrived at that solution by reading this.

Glad you stepped in :slight_smile: