Andre Franca

Styling My Rss Feed

Published:
Reading Time: 2 minutes

⚠ This post is over 1 year old and may contain outdated opinions, broken links, or incorrect information.

Recently, I came across a post by Robb where he styled his RSS feed in a way that a person could read, instead of a machine readable .xml file.

Styling the RSS feed is possible with the help of XSLT (Extensible Stylesheet Language Transformations), which transforms our .xml file into other document types, such as HTML.

First, I added an xml-stylesheet processing instruction inside my feed.xml file. Right below the line containing the xml version.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="/feed.xsl" type="text/xsl"?>

Then, in the same directory as my feed.xml file, I created a file called feed.xsl and added the following content.

---
layout:
title: 'RSS Feed'
permalink: "/feed.xsl"
---

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
      <head>
        <title>{{ page.title }} - {{ site.title }}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta name="color-scheme" content="dark light"/>
        {% include style.html %}
      </head>
      <body>
        {% include header.html %}
        <main>
            <h1>
                <!-- Feed-icon.svg: unnamed (Mozilla Foundation)User:Jahoe (GPL <http://www.gnu.org/licenses/gpl.html>, LGPL <http://www.gnu.org/licenses/lgpl.html>, MPL 1.1 <https://www.mozilla.org/MPL/1.1/>, MPL 1.1 <https://www.mozilla.org/MPL/1.1/>, GPL <http://www.gnu.org/licenses/gpl.html> or LGPL <http://www.gnu.org/licenses/lgpl.html>), via Wikimedia Commons -->
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="vertical-align: text-bottom; width: 1.2em; height: 1.2em;" id="RSSicon" viewBox="0 0 8 8">
                <title>RSS feed icon</title>
                <style type="text/css">
                  .button {stroke: none; fill: orange;}
                  .symbol {stroke: none; fill: white;}
                </style>
                <rect   class="button" width="8" height="8" rx="1.5" />
                <circle class="symbol" cx="2" cy="6" r="1" />
                <path   class="symbol" d="m 1,4 a 3,3 0 0 1 3,3 h 1 a 4,4 0 0 0 -4,-4 z" />
                <path   class="symbol" d="m 1,2 a 5,5 0 0 1 5,5 h 1 a 6,6 0 0 0 -6,-6 z" />
              </svg>
              Web Feed
            </h1>
          <p class="tip">
            <strong>This is a web feed,</strong> also known as an RSS feed. <strong>Subscribe</strong> by copying the URL <mark>https://abf.li/feed.xml</mark> into your newsreader.
          </p>
          <table>
            <thead>
              <tr>
                <th>Latest Posts</th>
                <th style="text-align: center;">Published</th>
              </tr>
            </thead>
            <tbody>
              <xsl:for-each select="/rss/channel/item">
                <tr>
                  <td>
                    <a target="_blank">
                      <xsl:attribute name="href">
                        <xsl:value-of select="link"/>
                      </xsl:attribute>
                      <xsl:value-of select="title"/>
                    </a>
                  </td>
                  <td style="text-align: center; white-space: nowrap; width: 50px;">
                    <xsl:value-of select="substring(pubDate, 0, 18)" />
                  </td>
                </tr>
              </xsl:for-each>
            </tbody>
          </table>
        </main>
        <footer>
          <p>
            {{ site.author.copy}} <a href="{{ site.author.mastodon }}" rel="me noopener" target="_blank">{{ site.author.name }}</a>
            ~ Content licensed under <a href="{{ site.license_url }}" rel="noopener noreferrer nofollow" target="_blank">{{ site.license }}</a>.<br />
            Last modified: {{ site.time | date: "%B %-d, %Y" }}.
          </p>
        </footer>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

This code was based on Pretty Feed v3, but I removed all the css that was adding unnecessary load, and then I simplified it so that the page shows just the site header, a banner about the web feed, and a table with the posts.

This is the before and after:

Website Screenshot
Before

New Website Screenshot
After

These are nice people who have also styled their feed:

Tags:

#OpenWeb

Questions, comments or concerns?
Please share your thoughts through the Fediverse or Email.

<~ Previous: Patience...

~> Next: I Don't Care About Seo

Articles from blogs I follow around the world wide web

St Jude 2025

tl;dr: Donate to our campaign here For the third year me and Adam are raising money for St Jude as part of Relay's annual event and podcastathon. You can read Stephen's post about it here. This year, we've set our goal at $16,850.80 which will p…

via Robb Knight • Posts • RSS Feed Aug 27, 2025

The Shed on the Drive 🛖

As you come up our drive there's a small brick building that we call *the shed*. It's not actually a shed; it's a lovely little insulated brick building, with …

via Kev Quirk - Posts Only Aug 27, 2025

A stack of browsers

I was a very happy Arc user for a couple of years, but after The Browser Company announced they would no longer be working on it, I started to assess alternatives. Now I've ended up with a stack of browsers, instead of reaching for a single browser to…

via Rach Smith's digital garden Jun 1, 2025

Generated by openring