Textpattern CMS

#1 2006-01-05 07:16:43

fri2219

New Member

Registered: 2006-01-03

Posts: 2

How to display feed links links as icons?

I’m just starting out with learning textpattern tags, and couldn’t find an answer on http://textpattern.net/wiki/index.php?title=Page_%28Template%29_Related_Tags#Link_Related_Tags

What I’d like to do is show an icon instead of a text link for the atom and rss feeds, as I’ve seen on other textpattern sites.

Any suggestions on how to do it? My first and only idea didn’t work:

/* css */
atom
{ background-image: url(../art/widgets/atomfeed.png);

}

rss
{ background-image: url(../art/widgets/rssfeed.png);
}

<!— XHTML —> <p> <txp:feed_link label=“RSS” class=“rss”/> </p> <p> <txp:feed_link label=“Atom” flavor=“atom” class=“atom” /> </p>

#2 2006-01-05 08:05:09

Niconemo

Member

From: Rhône-Alpes, France

Registered: 2005-04-18

Posts: 557

Re: How to display feed links links as icons?

Try this common img replacement method (won’t work if the text is aligned to right) :

<code>.rss
{
text-indent: -5000px;
background-image: url(../art/widgets/rssfeed.png);
}</code>

you’ll have to use it as a class='rss' in the block level element (p, div…) containing the feed link tag, for example.

The code is XHTML compliant and accessible

Last edited by Niconemo (2006-01-05 08:08:22)

---

Nico

#3 2006-01-05 08:31:48

nardo

Member

From: tuvalahiti

Registered: 2004-04-22

Posts: 743

Re: How to display feed links links as icons?

could you not just write it out by hand… ?
<a href="http://domain.tld/rss"><img src="rss.gif"></a> <a href="http://domain.tld/atom"><img src="atom.gif"></a>

something like this seems to work on 4.0.2

#4 2006-01-05 09:16:38

Niconemo

Member

From: Rhône-Alpes, France

Registered: 2005-04-18

Posts: 557

Re: How to display feed links links as icons?

The advantage of the CSS replacement method is that you can change the CSS easily, have several CSS in one site, and keep a text link when needed, for lynx or blind users, with nothing hardcoded in the page template.

But nardo’s hand coded img method will work of course :) just don’t forget the alt="rss feed" in the <img> tag ;)

Last edited by Niconemo (2006-01-05 09:20:30)

---

Nico

#5 2006-01-05 19:53:57

fri2219

New Member

Registered: 2006-01-03

Posts: 2

Re: How to display feed links links as icons?

> nardo wrote:

> could you not just write it out by hand… ?

Two reasons:

1) I didn’t have a clue what the URL should be. (Thanks!)
2) I wanted to take the purist approach with XHTML and CSS. (I just knew there had to be some clever way to do it. :)

I was more interested in tackling something small and easy (or so I thought) to learn the txp tags than just making it work. I’ve been doing table layout webapps for so long, I thought this would be a good excuse to retrain my brain into some semblance of standards compliance.

That said, thanks once again for everyone’s help.

Last edited by fri2219 (2006-01-05 20:04:29)

#6 2006-01-05 22:02:43

nardo

Member

From: tuvalahiti

Registered: 2004-04-22

Posts: 743

Re: How to display feed links links as icons?

good stuff – post a link when you’re done!