1
ajaxbr
Make backend.php pretty with CSS and/or XSL
  • 2004/12/16 2:01

  • ajaxbr

  • Quite a regular

  • Posts: 276

  • Since: 2003/10/25


Hi, just wanted to provide this input that theme makers or anyone concerned with the ugly default RSS look) can use later.

First, it's rather easy to style a XML file with CSS, and you can do that to your backend.php by adding a line to a template and creating the .css file.

You'll have to add
<?xml-stylesheet type="text/css" href="<{$xoops_url}>/backend.css"?>
as the second line of your /modules/system/templates/system_rss.html template and update the System module. Then create a backend.css file in your XOOPS root and put the rules you need there.

Example here.

The CSS for the example is
rss {}
channel {displayblockfont-familyVerdanaArialHelveticasans-serifborder-stylesolidborder-widththinborder-color:#0000ff}
channel title {displayblocktext-aligncentercolor#0000ff; font-size:30pt;font-weight: bold;}
channel link {displayblockfont-size8pttext-aligncenter;}
channel description {displayblock;text-aligncenter;font-weightbold;}
lastBuildDate {display:blockcolor#0000ff;text-align: center;}
docs {displaynone;}
generator {displaynone;}
category {displayblockfont-size16ptfont-weightbold;text-aligncenter;}
managingEditor {displaynone;}
webMaster {displaynone;}
language {displaynone;}
image {displaynone;}
item {displayblockmargin20pxpadding4px;border-widththinborder-styledotted;}
item title {displayblockcolor#ff0000; font-weight: bold; font-size: 16pt; text-decoration: underline; }
item link {font-size10pt;}
item description {displayblockmargin10pxpadding4px;font-size12ptfont-weightnormaltext-alignjustify;}
pubDate {color#0000ff; font-size: 10pt;}
guid {font-size10pt;color#0000ff; margin: 20px; padding: 4px; text-align: center;}


I'm trying XSL now

2
ajaxbr
Re: Make backend.php pretty with CSS and/or XSL
  • 2004/12/16 7:48

  • ajaxbr

  • Quite a regular

  • Posts: 276

  • Since: 2003/10/25


XSL is a bit more complex, but seems to be very powerful. Both XSL and CSS will keep your RSS feed valid and won't change the way it's shown in a news aggregator AFAIK, while both can make RSS a little less ugly in browsers.

To use XSL, you'd have to include a line with
<?xml-stylesheet type="text/xsl" href="<{xoops_url}>/backend.xsl"?>
in your system_rss.html template as above, making it the second line (you can also use CSS and XSL simultaneously).

Then you have to create a backend.xsl file in your XOOPS root. Code can be something like
<?xml version="1.0" encoding="iso-8859-1"?>
<!--
  FROM: rss2html.xsl BY: mlemos
  -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">

<xsl:output method="html"/>

<xsl:template match="/">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>
<xsl:for-each select="rss/channel">
<xsl:value-of select="title"/><xsl:text> - </xsl:text><xsl:value-of select="description"/>
</xsl:for-each>
</title>
</head>
<body style="font-family: Verdana, Arial, Helvetica, sans-serif;">
<center>
<xsl:for-each select="rss/channel">
<div style="font-size: 30pt; font-weight: bold; color: #0000ff;"><xsl:value-of select="title"/></div>
<div style="font-size: 10pt;"><xsl:value-of select="link"/></div>
<div style="font-size: 18pt;"><xsl:value-of select="description"/></div>
<div style="font-size: 15pt;  color: #0000ff;"><xsl:value-of select="lastBuildDate"/></div>
<div style="font-size: 18pt; font-weight: bold;"><xsl:value-of select="category"/></div>
</xsl:for-each>
</center>
<xsl:for-each select="rss/channel/item">
<p align="right">
<xsl:element name="a">
    <xsl:attribute name="href"><xsl:value-of select="link"/></xsl:attribute>
    <xsl:value-of select="title"/>
</xsl:element>
    <xsl:text> - </xsl:text>
<small>    <xsl:value-of select="pubDate"/></small></p>
</xsl:for-each>


<br /><br /><hr /><br /><br /><ul>

<xsl:for-each select="rss/channel/item">
<li style="border-style: dotted; border-width: thin; margin: 30px; padding: 20px;">
<xsl:element name="a">
    <xsl:attribute name="href"><xsl:value-of select="link"/></xsl:attribute>
    <xsl:attribute name="style">display:block;font-weight:bold; color: #ff0000;</xsl:attribute>
    <xsl:value-of select="title"/>
</xsl:element>
<small>
<xsl:value-of select="pubDate"/></small>
<div style="text-align:justify;"><xsl:value-of select="description"/></div>
<div style="text-align:right; font-size: 10pt; color: #0000ff;"><xsl:value-of select="pubdate"/></div>
</li>

<hr />
</xsl:for-each>
</ul>


</body>
</html>
</xsl:template>

</xsl:stylesheet>


Example of result here.

Both examples are of static XML files, but if you want to see this working look at my site's CSS styled backend.php.

3
LazyBadger
Re: Make backend.php pretty with CSS and/or XSL

Good, but unfinished attempt... At least dirty HTML-tags on page seems ugly
<span style="font-family: Arial;"><span style="font-size: xx-small;"><a href="http://www.mma.gov.br/ascom/ultimas/index.cfm?id=1403" target="_blank">ASCOM MMA 09/11/2004</a></span><br />O constante aparecimento de lobos-guarĂ¡s (<i><a
...

4
peterpatrol
Re: Make backend.php pretty with CSS and/or XSL

Not sure if this helps but last week I came across this site for displaying feeds:
Build a theme you can cut and paste

I have one example going on one test page
Here

yep I know the feed isnct coming out of a XOOPS site, but its still RSS. I did a trial with this pages backend and it works fine. Also you can play with the theme in the Styles page.

Cheers
Peter

5
ajaxbr
Re: Make backend.php pretty with CSS and/or XSL
  • 2004/12/16 17:43

  • ajaxbr

  • Quite a regular

  • Posts: 276

  • Since: 2003/10/25


Quote:

LazyBadger wrote:
Good, but unfinished attempt... At least dirty HTML-tags on page seems ugly
Yep, and AFAIK there's no way to solve that with CSS only (but IE6 will render the HTML instead of showing the tags ). Peter's link is very interesting, but as you can see it uses JavasScript to clean you RSS, so the result isn't RSS anymore. I believe that XSL can clean the feed for display while keeping it valid XML and RSS, but my first experience with it was yesterday

So... anyone interested in XSLing?

6
LazyBadger
Re: Make backend.php pretty with CSS and/or XSL

Quote:

ajaxbr wrote:
Yep, and AFAIK there's no way to solve that with CSS only

I'm not so sure - at least RSSFit generates nice and 100% valid RSS using css only. You can it see at my feed

7
ajaxbr
Re: Make backend.php pretty with CSS and/or XSL
  • 2004/12/16 18:28

  • ajaxbr

  • Quite a regular

  • Posts: 276

  • Since: 2003/10/25


Quote:

LazyBadger wrote:
Quote:

ajaxbr wrote:
Yep, and AFAIK there's no way to solve that with CSS only

I'm not so sure - at least RSSFit generates nice and 100% valid RSS using css only. You can it see at my feed
Looks great, but I guess the keyword here is "generates": if you look at your feed's source, there's no ugly HTML tags in descriptions. So backend.php could have a tag stripping function, but for our out-of-the-box XOOPS feeds CSS isn't enough to clean that.

OTOH, since RSSFit generates such an elegant XML, you can present it better with XSL: clickable links, custom text, TOC, whatever.

Login

Who's Online

241 user(s) are online (134 user(s) are browsing Support Forums)


Members: 0


Guests: 241


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits