How to Style XML Appearance

[tanuki]

I am trying to add some style to my RSS feed when viewed in-browser. It is a basic feed.xml file, but I cannot get the style to apply.

I am not sure if there's a problem with my path, or the styling itself.

I have the following line in my feed.xml file:

Code

<?xml-stylesheet type="text/css" href="xml_style.css"?>

And in my style (xml_style.css) I have the following:

Code

ARTICLE { font-family: sans-serif;
  background: green; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right;
  margin-bottom: 2em }
PARA { line-height: 1.5;
  margin-left: 15% }
INSTRUMENT { color: blue }

Does anyone have any suggestions, or possibly an example of their own site's stylized XML file that I can use as a reference? Any suggestions would be greatly appreciated!

[poesu]

Check out this thread! There's a thorough guide for both Atom and RSS feeds.

From what I see now, the mistakes are, first, in <?xml-stylesheet type="text/css" href="xml_style.css"?>. It should look like this instead:

Code

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

And second, in using a CSS file directly; you need instead an XSL file. You can then refer to a CSS file in your XSL document.

I provided the whole code for my XSL for the Atom feed in the aforementioned thread. Be mindful though that RSS and Atom use slightly different tags.

[Dan Q]

The problem's probably with your CSS. It looks like it's trying to style <ARTICLE>, <AUTHOR>, <HEADLINE>, <PARA> and <INSTRUMENT> elements, but none of those are present in your RSS feed (even after correcting for the fact that XML is case-sensitive, so they should be lowercase!).

Assuming that the feed you're talking about is the one at https://pieceofthepie.online/feed.xml, you're probably looking to style things like <item>, <title>, <description> etc. Perhaps you might try this CSS instead as a starting point?

Code

/* Whole document font, margin, etc.: */
:root {
  font-family: sans-serif;
  margin: 12px;
  font-size: 16px;
  background: #eee;
  color: #333;
}

/* Display titles, descriptions, post dates and links
 * on their own lines, with a gap above and below: */
title, description, link, pubDate {
  display: block;
  padding: 8px 0;
}

/* Don't show the feed last build date or ttl at all: */
lastBuildDate, ttl {
  display: none;
}

/* The main (channel's) title, description and link are
   large and centered: */
channel > title,
channel > description,
channel > link {
  text-align: center;
  font-size: 20px;
}

/* The title itself is even larger! */
channel > title {
  font-size: 24px;
  font-weight: bold;
}

/* Individual items in the feed are displayed as a block
   with a dividing line between them: */
item {
  display: block;
  border-top: 1px solid black;
  padding-bottom: 8px;

  /* And each has a title, which is larger: */
  title {
    font-size: 18px;
    font-weight: bold;
  }

  /* And a date, which is smaller */
  pubDate {
    font-size: 10px;
    font-style: italic;
  }
}

This uses the actual names of the RSS feed's elements, and in the proper case. Hope that helps get you started!

[Dan Q]

And second, in using a CSS file directly; you need instead an XSL file. You can then refer to a CSS file in your XSL document.

Ah! Possibly this is what the problem is: @tanuki may have been trying to act on a transformed document but they weren't actually applying the transformation.

It's not strictly necessary to use an XSL - XML can by styled directly! - but in practice most people probably want to so that they're not constrained by the layout limitations.

tl;dr: RSS is an XML format. You can style it directly (I've provided some sample code) with CSS, or you can transform it to some other XML format with an XSL (which you can then also style with CSS), which can give you much more-flexibility.

[Dan Q]

Oh, BTW I don't know if you know but Chrome is dropping support for XSLTs next year, probably followed by other browsers soon after. So plain old CSS styling of RSS feeds might be a better route for the long-term rather than assuming that your XSLT will work.

[poesu]

Greeeaaat, I just learned to do a thing and now it's being deprecated

Time to update that thread I mentioned to accommodate for the upcoming changes

[Melooon]

Chrome is dropping support for XSLTs next year,

a thing and now it's being deprecated

One thing to mention - the everyone site bakes XSLTs into HTML server side, so this feature will still be fully functional on everyone site pages even if Chrome drops support for it - I know a few pages like Everyone's news use it.