How To Style Yahoo Pipes RSS Mashups With CSS


What Is Yahoo Pipes?

So what is it? Pipes is widely used by programmers, Internet marketers and regular ol 'Internet users, and has a lot of uses including: autoblogging, link building, SEO purposes, combining multiple RSS feeds into one (an RSS mashup), scraping websites, and converting plain old HTML pages into full on RSS feeds. Some people find Pipes overwhelming, but with a little time and effort, anyone can use this powerful composition tool and get it to do what they want. A regular user can even mashup several RSS feeds into one, in just a few minutes.

What Is A Yahoo Pipes Badge?

When you export the results of your Pipe to display on your blog, website, or social networking site, you have several exporting options. One if them, is the HTML Badge. The Badge allows you to copy and paste a small piece of code on your website and have the results of your Pipe show up in a snap.

What About Inline Styling

The official Yahoo Pipes Badge documentation is a good start for styling your Pipe, BUT editing the direct CSS code that controls it, is a much better way. Don't you agree? This allows us to tap into every property of our Pipe and take full control. Inline styling is great for simple things, but Pipes is such a powerful tool, why not use the most powerful solution to style it?

How To Style Your Yahoo Pipe With CSS

It will help to have a basic understanding of CSS before you attack the stylesheet. On my website (which you can find the link in my signature), you can download the CSS Stylesheet for FREE. There are two versions. One is for CSS Rookies, who need all the help they can get. Every CSS class and property is commented, so you know exactly what element of the Pipe you are editing. The other version, is for CSS All Stars. People who are very familiar with the way CSS works, but just need to know what class controls what part of the Pipe. In this version, only the CSS classes are commented.

What You Can Control With The CSS Code

The CSS Stylesheet for Yahoo Pipes controls pretty much everything you need to style an RSS mashup. You can control the look and feel of:

  • The loading screen – before Pipes loads
  • The title – h3 header of your Pipe
  • Content – links, lists etc.
  • Results – RSS mashup results
  • Images – thumbnail sizes, alignment
  • Footer – even remove that pesky "Powered by Y! Pipes" link

All of these elements are commented in the CSS Stylesheet, which can be found for free on my website, by visiting the link in my signature.

Wrap Up

I hope you enjoyed this article on how to style your RSS mashups with CSS. Of course, the fun is editing the source code itself. You'll have to tackle it for yourself and see.


Leave a Reply