Styling an RSS Widget

webgurl · #1 Dec 23, 2010, 05:41 PM

I've been trying to solve this for hours. I have an RSS widget on my front page. I want to style every other line. There are so many classes and divs that lead up to the data:

Code:

<div id="front_page_widget_area" class="bfa_widget_area">
	<div id="rss-4" class="widget widget_rss">
	<div class="widget-title"><h3>
	 <a class='rsswidget' href='http://gruvr.com?city=greenville-nc-27834' title='7 performances within about 19 miles of Greenville Nc 27834 in the next 44 days , top  listed first'>Live Music in the Greenville, NC Area!</a>
</h3></div>
<ul><li>
<a class='rsswidget' href='http://gruvr.com/band/parmalee/Dec-31-10' title='Parmalee Greenville : ***All Shows Postponed Until Further Notice*** on 2010-12-31 [&hellip;]'>Fri Dec 31st: Parmalee at ***All Shows Postponed Until Further Notice***  Greenville</a>
<div class='rssSummary'>Parmalee Greenville : ***All Shows Postponed Until Further Notice*** on 2010-12-31 [&hellip;]</div></li>
<li>class='rssSummary'>Bimini Rd. Greenville :

I've tried quite a few combinations of divs and classes with the styling I want and added them to CSS/HTML inserts, but nothing works. What am I missing?

webgurl · #2 Dec 23, 2010, 05:42 PM

Sorry, I forgot: www.greenvilleconcerts.com and this is the last CSS I tried:

.rsswidget a { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 1.0em; font-weight: bold; color: #003399; background-color: #FFFF99; }

webgurl · #3 Dec 23, 2010, 06:25 PM

No, that didn't work. I was keeping my fingers crossed though!

webgurl · #4 Dec 23, 2010, 06:27 PM

It's funny that the things I try in Expression Web 4 don't work. Seems to be a piece of the puzzle I am missing...

webgurl · #5 Dec 24, 2010, 12:21 PM

Thanks for helping me. I tried this code

Code:

div.widget_rss ul li a.rsswidget {
font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 1.0em; font-weight: bold; color: #003399; background-color: #FFFF99;
}

in the Add HMTL/CSS option of atahualpa, and as you can see, http://greenvilleconcerts.com it idid not change the code in the RSS widget on the front page. I too, am using firefox. Did you go to my site and make the change that you said worked?

juggledad · #6 Dec 24, 2010, 01:58 PM

I'm not quite sure if you want to style every other rss feed or the second line of each rss feed. Anyway here it the CSS to change the RSS title, the first line of the feed and the second line (the rss summary). You should be able to pick out what you need

HTML Code:

.widget-title h3 a.rsswidget {color: red;}
div.widget_rss ul li a.rsswidget {color: yellow;}
div.widget_rss ul li .rssSummary {color: green;}

STB was only able to use firefox/firebug to change what he was seeing, not actually change your css. The only way to change your site is by going thru the backend and saving the option to the database.

Note: you can't change every other rss group because there is nothing unique for the lines. If they has a class of...say 'even' and 'odd', then you could have every other group a different color.

webgurl · #7 Dec 25, 2010, 04:02 AM

Juggledad, I might be seeing things, or not understanding you, but isn't the code that you just gave me the same code that I said I tried right before your answer to me?

Code:

div.widget_rss ul li a.rsswidget {
font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 1.0em; font-weight: bold; color: #003399; background-color: #FFFF99;
}

juggledad · #8 Dec 25, 2010, 06:17 AM

ok, are you trying to style the line

HTML Code:

Friday 31st: Parmalee at ***All Shows Postponed Until Further Notice*** Greenville

or

HTML Code:

Parmalee Greenville : ***All Shows Postponed Until Further Notice*** on 2010-12-31 […]

you are succeeding at the first, if you want to style
HTML]Parmalee Greenville : ***All Shows Postponed Until Further Notice*** on 2010-12-31 […][/html]the summary, you must use

HTML Code:

div.widget_rss ul li .rssSummary {color: green;}

webgurl · #9 Dec 25, 2010, 10:30 AM

Quote:

Originally Posted by juggledad

ok, are you trying to style the line

HTML Code:

Friday 31st: Parmalee at ***All Shows Postponed Until Further Notice*** Greenville

or

HTML Code:

Parmalee Greenville : ***All Shows Postponed Until Further Notice*** on 2010-12-31 […]

you are succeeding at the first, if you want to style
HTML]Parmalee Greenville : ***All Shows Postponed Until Further Notice*** on 2010-12-31 […][/html]the summary, you must use

HTML Code:

div.widget_rss ul li .rssSummary {color: green;}

I'm trying to style either one: the a.rsswidget, OR the .rssSummary, but I've tried the code you specified, and it still looks the same. I see that you wrapped the code in HTML tags. I entered it in the ATO> Add HTML/CSS inserts. If that is the correct place to enter the code, I can't figure out what I am missing. I pulled the HTML and CSS into Expression Web 4 and I can change the code there. Not sure why I can't do the same through ATO> HTML/CSS inserts.

juggledad · #10 Dec 25, 2010, 10:46 AM

I don't see the code for the rsssummary in your css - did you take it out?

do this. put the css in and then do an export and attach it to a reply and I'll take a look

webgurl · #11 Dec 25, 2010, 11:13 AM

I don't have the code for summary inserted, it is for the other: a.rsswidget ...

Code:

div.widget_rss ul li a.rsswidget {
font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 1.0em; font-weight: bold; color: #003399; background-color: #FFFF99;
}

I've attached the export... thanks.

juggledad · #12 Dec 25, 2010, 01:34 PM

Ok, I'm confused.
you have the following as the first two feeds
Fri Jan 7th: Bimini Rd. LIVE Greenville
Bimini Rd. Greenville : LIVE Bellfork Square (Firetower Rd) Greenville, NC 23456 UNITED STATES on 2011-01-07 […]
Sat Jan 8th: Bimini Rd. LIVE Greenville
Bimini Rd. Greenville : LIVE Bellfork Square (Firetower Rd) Greenville, NC 23456 UNITED STATES on 2011-01-08 […]
Do you want
1) all of
Fri Jan 7th: Bimini Rd. LIVE Greenville
Bimini Rd. Greenville : LIVE Bellfork Square (Firetower Rd) Greenville, NC 23456 UNITED STATES on 2011-01-07 […]
to be the same font/color etc
or
2) do you want
Fri Jan 7th: Bimini Rd. LIVE Greenville
Bimini Rd. Greenville : LIVE Bellfork Square (Firetower Rd) Greenville, NC 23456 UNITED STATES on 2011-01-07 […]
to be one color/style and
Sat Jan 8th: Bimini Rd. LIVE Greenville
Bimini Rd. Greenville : LIVE Bellfork Square (Firetower Rd) Greenville, NC 23456 UNITED STATES on 2011-01-08 […]
to be another?

webgurl · #13 Dec 25, 2010, 02:21 PM

Since each line is either one of two classes, rsswidget or rssSummary, and they alternate back and forth, I would like to be able to style one or the other or BOTH classes if that is whats needed to present the data in a pleasing style.
So that is what I am going for - finding the code that will affect those classes. I think we both have formulated the correct code, but for some reason it's being overwritten or ignored. Unless you have another idea???

juggledad · #14 Dec 25, 2010, 03:08 PM

please put this in at the bottom of the CSS inserts until I get a chance to look at it.

HTML Code:

div.widget_rss ul li .rssSummary {
font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 1.0em; font-weight: bold; color: #003399; background-color: #FFFF99;
}

webgurl · #15 Dec 26, 2010, 01:15 PM

Thank you for trying to solve this problem. The feed is down today for the RSS on the static front page, so I've decided to try and enter events manually through an events plug-in. It works on the home page "loop", so I have to replace the existing static front page. Thanks for your help.