How to Apply My CSS Stylesheet to an Rss Feed

How can I apply my CSS stylesheet to an RSS feed

The popular RSS readers WILL NOT bother downloading a style sheet, even if you provide one and link to it using <?xml-stylesheet?>.

Many RSS readers simply strip all inline style attributes from your tags. From testing today, I discovered that Outlook 2007 seems to strip out all styles, for example, even if they are inline.

Good RSS readers allow a limited set of inline style attributes. See, for example, this article at Bloglines about what CSS they won't strip. From experimentation, Google Reader seems to pass through certain styles unharmed.

The philosophy of RSS is indeed that the reader is responsible for presentation. Many people think that RSS should be plain text and that CSS in RSS feeds is inappropriate. It's probably not appropriate to impose a different font on your RSS feeds. However, certain types of content (for example, images floated on the left, with captions positioned carefully) require a minimal amount of styling in order to maintain their semantic meaning.

How do I add a CSS stylesheet to a WCF generated RSS feed?

Since your contract is going to return an instance of SyndicationFeedFormatter, which implements IXmlSerializable, I would have your method on the service contract get that instance, then call the methods on IXmlSerializable to serialize the output to XML. You can then add the processing instruction to the XML (XDocument, or XmlDocument) and then pass those contents back.

Is there a way to style RSS/ATOM feeds?

It depends on the feed reader, but yes, most will ignore CSS entirely. Some (like Google Reader) will pay attention to the style attribute if it's "simple" enough, so you could write:

<div style="float: right">Some right-float text!</div>
<p>Normal paragraph text.</p>

For security reasons (primarily XSS avoidance), CSS has to pass through a filter. Only "known safe" CSS is allowed through.

Inline styles in RSS feed?

RSS feed isn't really meant to be styled in any way, readers style them for themselves. They can contain HTML tags in places like titles or descriptions, however adding tags in other places might cause some issues.

See the W3 rss feed tutorial

django syndication feed framework: adding CSS to RSS

I believe the one way to do this would be to create a custom page view and point the URL to this page view (modifying the example from the Django syndication page):

(r'^beats/(?P<beat_id>\d+)/rss/$','yourapp_views_custompageview'),

Then in this page view, return <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?> + BeatFeed(), where BeatFeed is your FeedClass.

I'm not using the feed framework right now, so it is difficult for me to test. Please let me know if this works or if you run into difficulties.

You might also want to look at: https://code.djangoproject.com/browser/django/trunk/django/utils/feedgenerator.py.

How make an aesthetically pleasing rss feed?

RSS feeds are designed for feed readers to display, but it is possible to style feeds with CSS or XSLT. See also: How can I apply my CSS stylesheet to an RSS feed

How to Add CSS Reference to .NET SyndicationFeed?

I believe I need to add a stylesheet reference like

<?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>

But I do not see how to do this with the .NET 4.5 SyndicationFeed or
Atom10FeedFormatter classes.

Here is a complete code example how to do this:

using System;
using System.Collections.Generic;
using System.ServiceModel.Syndication;
using System.Xml;

namespace FeedProcessing
{
    class FeedProcessing
    {
        static void Main(string[] args)
        {
            FeedProcessing fp = new FeedProcessing();
            fp.CreateFeed();
        }
        public void CreateFeed()
        {
            SyndicationFeed feed = new SyndicationFeed("Feed Title", "Feed Description", new Uri("http://Feed/Alternate/Link"), "FeedID", DateTime.Now);
            // Add a custom attribute.
            XmlQualifiedName xqName = new XmlQualifiedName("CustomAttribute");
            feed.AttributeExtensions.Add(xqName, "Value");

            SyndicationPerson sp = new SyndicationPerson("jesper@contoso.com", "Jesper Aaberg", "http://Jesper/Aaberg");
            feed.Authors.Add(sp);

            SyndicationCategory category = new SyndicationCategory("FeedCategory", "CategoryScheme", "CategoryLabel");
            feed.Categories.Add(category);

            feed.Contributors.Add(new SyndicationPerson("lene@contoso.com", "Lene Aaling", "http://lene/aaling"));
            feed.Copyright = new TextSyndicationContent("Copyright 2007");
            feed.Description = new TextSyndicationContent("This is a sample feed");

            // Add a custom element.
            XmlDocument doc = new XmlDocument();
            XmlElement feedElement = doc.CreateElement("CustomElement");
            feedElement.InnerText = "Some text";
            feed.ElementExtensions.Add(feedElement);

            feed.Generator = "Sample Code";
            feed.Id = "FeedID";
            feed.ImageUrl = new Uri("http://server/image.jpg");

            TextSyndicationContent textContent = new TextSyndicationContent("Some text content");
            SyndicationItem item = new SyndicationItem("Item Title", textContent, new Uri("http://server/items"), "ItemID", DateTime.Now);

            List<SyndicationItem> items = new List<SyndicationItem>();
            items.Add(item);
            feed.Items = items;

            feed.Language = "en-us";
            feed.LastUpdatedTime = DateTime.Now;

            SyndicationLink link = new SyndicationLink(new Uri("http://server/link"), "alternate", "Link Title", "text/html", 1000);
            feed.Links.Add(link);

            XmlWriter atomWriter = XmlWriter.Create("atom.xml");
            atomWriter.WriteProcessingInstruction("xml-stylesheet", 
                                                  "type='text/css' href='http://you.com/rss.css'");
            Atom10FeedFormatter atomFormatter = new Atom10FeedFormatter(feed);
            atomFormatter.WriteTo(atomWriter);
            atomWriter.Close();

            XmlWriter rssWriter = XmlWriter.Create("rss.xml");
            rssWriter.WriteProcessingInstruction("xml-stylesheet",
                                                 "type='text/css' href='http://you.com/rss.css'");
            Rss20FeedFormatter rssFormatter = new Rss20FeedFormatter(feed);
            rssFormatter.WriteTo(rssWriter);
            rssWriter.Close();
        }
    }
}

When this program is executed, two files are created:

atom.xml:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type='text/css' href='http://you.com/rss.css'?>
<feed xml:lang="en-us" CustomAttribute="Value" xmlns="http://www.w3.org/2005/Atom">
    <title type="text">Feed Title</title>
    <subtitle type="text">This is a sample feed</subtitle>
    <id>FeedID</id>
    <rights type="text">Copyright 2007</rights>
    <updated>2012-12-28T19:50:18-08:00</updated>
    <category term="FeedCategory" label="CategoryLabel" scheme="CategoryScheme" />
    <logo>http://server/image.jpg</logo>
    <author>
        <name>Jesper Aaberg</name>
        <uri>http://Jesper/Aaberg</uri>
        <email>jesper@contoso.com</email>
    </author>
    <contributor>
        <name>Lene Aaling</name>
        <uri>http://lene/aaling</uri>
        <email>lene@contoso.com</email>
    </contributor>
    <generator>Sample Code</generator>
    <link rel="alternate" href="http://feed/Alternate/Link" />
    <link rel="alternate" type="text/html" title="Link Title" length="1000" href="http://server/link" />
    <CustomElement xmlns="">Some text</CustomElement>
    <entry>
        <id>ItemID</id>
        <title type="text">Item Title</title>
        <updated>2012-12-28T19:50:18-08:00</updated>
        <link rel="alternate" href="http://server/items" />
        <content type="text">Some text content</content>
    </entry>
</feed>

and rss.xml:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type='text/css' href='http://you.com/rss.css'?>
<rss xmlns:a10="http://www.w3.org/2005/Atom" version="2.0">
    <channel CustomAttribute="Value">
        <title>Feed Title</title>
        <link>http://feed/Alternate/Link</link>
        <description>This is a sample feed</description>
        <language>en-us</language>
        <copyright>Copyright 2007</copyright>
        <managingEditor>jesper@contoso.com</managingEditor>
        <lastBuildDate>Fri, 28 Dec 2012 19:50:18 -0800</lastBuildDate>
        <category domain="CategoryScheme">FeedCategory</category>
        <generator>Sample Code</generator>
        <a10:contributor>
            <a10:name>Lene Aaling</a10:name>
            <a10:uri>http://lene/aaling</a10:uri>
            <a10:email>lene@contoso.com</a10:email>
        </a10:contributor>
        <image>
            <url>http://server/image.jpg</url>
            <title>Feed Title</title>
            <link>http://feed/Alternate/Link</link>
        </image>
        <a10:id>FeedID</a10:id>
        <a10:link rel="alternate" type="text/html" title="Link Title" length="1000" href="http://server/link" />
        <CustomElement>Some text</CustomElement>
        <item>
            <guid isPermaLink="false">ItemID</guid>
            <link>http://server/items</link>
            <title>Item Title</title>
            <description>Some text content</description>
            <a10:updated>2012-12-28T19:50:18-08:00</a10:updated>
        </item>
    </channel>
</rss>

Explanation:

Whenever the XmlWriter instance is created, but before calling either:

atomFormatter.WriteTo(atomWriter);

or:

rssFormatter.WriteTo(rssWriter);

call the WriteProcessingInstruction() method on the respective XmlWriter instance, passing to it the two required parameters -- the name of the PI (in this case "xml-stylesheet") and the text of the PI (in this case "type='text/css' href='http://you.com/rss.css'").

How can I import a CSS stylesheet into Atom content?

You could include inline <style> blocks as part of each entry's body, but this rather defeats the entire purpose of RSS/Atom feeds IMO (and is likely to be filtered out by many readers). Use standard elements like blockquote, em, img, etc. and let the reader handle the rest.

---

Related Topics