Styling an RSS feed?

[deronsizemore]

After over a year of blogging, I just realized that my RSS feed is basically unstyled. The <h2> tags are just regular text and do not stand out, the images in the articles are simply located at the very top of the article rather than floated left with the text wrapped around them (like I want). From what I understand RSS feeds can't use CSS to be styled but need to use XSL? Can anyone point me in the direction of this answer? Seems like every feed that I subscribe too is formatted and styled properly so it must be pretty common knowledge I would guess?

Here is my feed right now (just ignore the EE tags):

{exp:rss:feed weblog="articles"}

<?xml version="1.0" encoding="{encoding}"?>
<rss version="2.0"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:admin="http://webns.net/mvcb/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:content="http://purl.org/rss/1.0/modules/content/">

<channel>

<title>{exp:xml_encode}Random Jabber{/exp:xml_encode}</title>
<link>{weblog_url}</link>
<description>{weblog_description}</description>
<dc:language>{weblog_language}</dc:language>
<dc:creator>Deron Sizemore</dc:creator>
<dc:rights>Copyright {gmt_date format="%Y"}</dc:rights>
<dc:date>{gmt_date format="%Y-%m-%dT%H:%i:%s%Q"}</dc:date>
<admin:generatorAgent rdf:resource="http://expressionengine.com/" />
<atom:link href="http://www.randomjabber.com/rss" rel="self" type="application/rss+xml" />

{exp:weblog:entries weblog="articles" limit="10" rdf="off" dynamic_start="on" disable="member_data|trackbacks"}
<item>
<title>{exp:xml_encode}{title}{/exp:xml_encode}</title>
<dc:creator>By Deron</dc:creator>
<link>{title_permalink=blog/article}</link>
<guid>{title_permalink=blog/article}#When:{gmt_entry_date format="%H:%i:%sZ"}</guid>
<dc:subject>{exp:xml_encode}{categories backspace="1"}{category_name}, {/categories}{/exp:xml_encode}</dc:subject>
<description>
<![CDATA[{if article_image != ""}<img src="{article_image}" alt="{image_description}" title="{image_description}" class="{class}" />{/if}{article_summary}{article_body}]]>
</description>
<dc:date>{gmt_entry_date format="%Y-%m-%dT%H:%i:%s%Q"}</dc:date>
</item>
{/exp:weblog:entries}

</channel>
</rss>

{/exp:rss:feed}

[davemcnally]

I have not come across this before. I subscribe to quite a few web design feeds and haven't noticed much difference in reading within a feed reader.

I would personally rather have feeds appear in the standard format I'm used to. Afterall, that's one of the reasons of using a feed reader - just having the content delivered to me without the need for the presentational side of things.

Just my opinion anyway, and I can't help much with the styling either way ;)

[deronsizemore]

I have not come across this before. I subscribe to quite a few web design feeds and haven't noticed much difference in reading within a feed reader.

I would personally rather have feeds appear in the standard format I'm used to. Afterall, that's one of the reasons of using a feed reader - just having the content delivered to me without the need for the presentational side of things.

Just my opinion anyway, and I can't help much with the styling either way ;)


Well what I'm talking about I guess isn't styling a feed per say... as in, all kinds of designs and background images, etc., all done with CSS. My RSS feed in Google reader when I subscribe to it, the <h2> tags are not any different than the regular text in the article so it makes it hard to read the article when you can't go through sections easily. Also, my images in my articles are always floated left with the text set to wrap around the image and in Google reader, they are not floated left. They are just stuck at the top of the article like a bad '90's design. :)

I see everyone else's feed in Google reader that subscribe too doesn't have a problem floating images so that text properly wraps around them and they heading tags stand out, so I thought I must be doing something wrong here?

[davemcnally]

Ah, ok. I thought you meant you were just getting default styling to your heading tags but I presume now you're getting no styling at all with headings being the same size & color as body text?

I came across this page which explains a mixture of CSS and XSL within a feed - not sure if it will help much:

Beginning to Style Your RSS Feed - Monday By Noon (http://mondaybynoon.com/2006/08/14/beginning-to-style-your-rss-feed/)

P.S - I haven't styled my own feed yet taking a look at my articles in my feedreader, the images are floated with text wrapping around it so not sure if this is just down to my reader, I'm using feedDemon

[deronsizemore]

Ah, ok. I thought you meant you were just getting default styling to your heading tags but I presume now you're getting no styling at all with headings being the same size & color as body text?


Yep, you got it. I'll check out that link tonight and see what I can see.

I may end up just having to email some folks that I know that use EE and see what they say about this subject as I'm sure they're using the same RSS template as I am which came from EE's site.

[davemcnally]

Let me know what you come up with, I would be interested in finding out a bit more about styling feeds, particularly about the process and any problems.

[SarahG]

Deron, your feed in Google for me shows the headings up (the h2s presumably). Although yes your image sits above the content. But that said, my own images are set up to float in a similar method and mine are displayed with the image and just one line of text inline with the bottom of the image as opposed to the image neatly floating left of the text.

Whether it's down to how you use your CSS, or whether some of the feeds you've looked at are using align instead of floats. Still, as Vertexity said, let us know how it goes as I don't think many people even know about styling RSS feeds (I didn't!).

[Dan Schulz]

I knew it was possible to style them, but it's generally a real royal pain in the neck, and when done improperly can cause the feed to fail validation. It becomes even worse for RSS feed parsing scripts that convert the feed to HTML because some attributes can become stripped out, the inlined styles could override the site's styles, and all sorts of havoc could break loose.

[deronsizemore]

Deron, your feed in Google for me shows the headings up (the h2s presumably). Although yes your image sits above the content. But that said, my own images are set up to float in a similar method and mine are displayed with the image and just one line of text inline with the bottom of the image as opposed to the image neatly floating left of the text.

Whether it's down to how you use your CSS, or whether some of the feeds you've looked at are using align instead of floats. Still, as Vertexity said, let us know how it goes as I don't think many people even know about styling RSS feeds (I didn't!).


Weird, they are showing for me now as well. Just noticed another thing too... my lists are showing up with bullets. It's just one thing after another with this damn feed. I know it doesn't have to be perfect but I'd at least like the default styling to be applied to list elements and others like it.

[deronsizemore]

I knew it was possible to style them, but it's generally a real royal pain in the neck, and when done improperly can cause the feed to fail validation. It becomes even worse for RSS feed parsing scripts that convert the feed to HTML because some attributes can become stripped out, the inlined styles could override the site's styles, and all sorts of havoc could break loose.

Yeah I tried yesterday to style it using some kind of premade xsl document that called in a CSS file into it and styled your feed, but that failed miserably.

[deronsizemore]

Well, as a follow up to this post, I think (key work here) I've figured out how to get the images styled like I wanted. Came down to simply styling the image with css inline rather than expecting my CSS file to pick up the slack (which it doesn't work like that). If you're one of the few that subscribes to my feed, maybe you can confirm this on your end? The first image in the article (if there is one) should be floated left with the text wrapping around instead of setting atop the article?

Thanks

[davemcnally]

Well, as a follow up to this post, I think (key work here) I've figured out how to get the images styled like I wanted. Came down to simply styling the image with css inline rather than expecting my CSS file to pick up the slack (which it doesn't work like that). If you're one of the few that subscribes to my feed, maybe you can confirm this on your end? The first image in the article (if there is one) should be floated left with the text wrapping around instead of setting atop the article?

Thanks

I just subscribed to check it out for you. Looking at the articles in feedDemon, the first image of any article that has one is still sitting at the top of the article with text clearing and starting underneath. Not sure if that's a feed reader specific problem though as some other feeds I read have wrapping text/floating images that show up ok.

[deronsizemore]

I just subscribed to check it out for you. Looking at the articles in feedDemon, the first image of any article that has one is still sitting at the top of the article with text clearing and starting underneath. Not sure if that's a feed reader specific problem though as some other feeds I read have wrapping text/floating images that show up ok.

Thanks for checking it out for me Dave. I thought I had fixed it but like you say, every feed reader is different and I just don't know enough about RSS design to style one like I want.

Oh well, I'll just live with it how it is. It's still readable, but more than anything just ticks me off because I can't figure out how to style it correctly when it seems to be common knowledge as a lot of the other feeds I subscribe too have the images and such styled just fine. I, for whatever reason can't figure the puzzle out though.