PDA

View Full Version : Changing CSS colour in RSS Feed



steve74
12-05-2010, 12:26 AM
1) Script Title: RSS Displayer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex18/gajaxrssdisplayer.htm

3) Describe problem: Where is the css to change the colour ?, having no luck whatsoever !

jscheuer1
12-05-2010, 03:03 AM
In Step 1, more or less. The color of what?

Let's break it down a little. When you setup your feed - say:


<script type="text/javascript">

var newsfeed=new gfeedfetcher("example3", "example3class", "_new")
newsfeed.addFeed("BBC", "http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml") //Specify "label" plus URL to RSS feed
newsfeed.addFeed("MSNBC", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml") //Specify "label" plus URL to RSS feed
newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/topstories") //Specify "label" plus URL to RSS feed
newsfeed.displayoptions("datetime snippet") //show the specified additional fields
newsfeed.setentrycontainer("p") //Display each entry as a paragraph
newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date
newsfeed.init() //Always call this last

</script>

It's created with the two style hooks highlighted and red in the above, plus the container element for each feed entry (also highlighted and red), plus the default style hook classes for some of the fields used. This one uses:


titlefield
datefield


I don't see these last ones specifically documented anywhere. They can be seen with any decent DOM inspector.

Anyways, the above code produced at the time of this typing this markup:


<div id="example3" class="example3class"><p><a href="http://www.bbc.co.uk/go/rss/int/news/-/news/uk-11920548" target="_new" class="titlefield">UK growth tipped to slow in 2011</a> <span class="datefield">Saturday, December 04, 2010 7:46:35 PM</span>
<br>The UK economy will will grow by less than expected next year, a report by the British Chambers of Commerce predicts.</p>

<p><a href="http://pheedo.msnbc.msn.com/click.phdo?i=cb2d1effdd4577e13163785a6cd8f32c" target="_new" class="titlefield">Obama eyes tax deal — with jobless extension</a> <span class="datefield">Saturday, December 04, 2010 7:17:02 PM</span>
<br>President Barack Obama told Democratic leaders he was open to compromise on Bush-era tax cuts, but would oppose even a ...</p>

<p><a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20101205/ap_on_sc/climate" target="_new" class="titlefield">Plodding climate talks stepping up to higher level
(AP)</a> <span class="datefield">Saturday, December 04, 2010 7:03:54 PM</span>
<br>AP - The slow-moving U.N. talks on combating global warming took a step forward Saturday with revised proposals for a $100 ...</p>

<p><a href="http://pheedo.msnbc.msn.com/click.phdo?i=7956b33339f5f126fb2d941422083d56" target="_new" class="titlefield">Video: Obama eyes tax deal as Senate bid fails</a> <span class="datefield">Saturday, December 04, 2010 6:40:38 PM</span>

<br>With rates for all Americans set to go up at the end of the month, the fight in Congress spilled over into the weekend. NBC’s ...</p>

<p><a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20101204/ap_on_bi_ge/us_tax_cuts" target="_new" class="titlefield">Senate showdown may pave way for year-end tax deal
(AP)</a> <span class="datefield">Saturday, December 04, 2010 6:29:42 PM</span>
<br>AP - Senate Republicans derailed legislation Saturday to extend expiring tax cuts at all but the highest income levels in a ...</p>

<p><a href="http://www.bbc.co.uk/go/rss/int/news/-/news/uk-11269112" target="_new" class="titlefield">Tycoon Nadir freed after arrest</a> <span class="datefield">Saturday, December 04, 2010 3:51:38 PM</span>
<br>Former Polly Peck tycoon Asil Nadir says he is to sue for wrongful arrest after being released from custody for allegedly ...</p>

<p><a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20101204/ap_on_hi_te/wikileaks" target="_new" class="titlefield">WikiLeaks loses major source of revenue
(AP)</a> <span class="datefield">Saturday, December 04, 2010 3:14:50 PM</span>
<br>AP - WikiLeaks has lost a major source of revenue after the online payment service provider PayPal cut off its account used to ...</p>

<p><a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20101204/ap_on_bi_ge/us_us_skorea_trade_talks" target="_new" class="titlefield">Obama hails SKorea trade as victory for US workers
(AP)</a> <span class="datefield">Saturday, December 04, 2010 2:07:32 PM</span>
<br>AP - President Barack Obama on Saturday praised a newly sealed trade deal with South Korea as a landmark agreement that ...</p>

</div>

We have a div container with the id and class from the init. Each item is a p and each p has a titlefield and a datefield class in it.

To make all the datefield entries red put this in your stylsheet:


.datefield{ /*CSS for date field in general*/
color: red;
}

If you have more than one of these on a page and you only want that for this one:


#example3 .datefield{ /*CSS for date field in example3*/
color: red;
}

To color just the text is a little complicated, but follows standard css rules:


#example3 p { /*CSS for p elements in example3*/
color: red;
}

But that would get the titlefiled and datefield as well, so you would have to have separate entries for those if you wanted them different.

If you want more help, please be specific about what you want to color and what color you want it to be and post a link to a page on your site that contains the problematic code so we can check it out.

steve74
12-05-2010, 10:06 AM
Thanks for all your help John, the link to the page is :

northernlights2011.org.uk
and it's the blog that I am trying to correct,

changing the blue to #4D2177

jscheuer1
12-05-2010, 10:31 AM
OK, in your on page stylesheet, change:


.labelfield{ /*CSS for label field in general*/
color:#4D2177;
font-size: 90%;
}

to:


.titlefield { /* CSS for title field in general */
color: #4d2177;
}

steve74
12-05-2010, 10:33 AM
Thanks John,

Very grateful for your help