Add Style to Your JavaScript RSS Feed

Style Options

Successfully built your feed? Great! Now we get the «Fun Part» - your style sheet.

Add your favourite style so you can display your RSS feed content by specifying different style sheets for your feed.

The title, item display and date published sections are known as identifiers.

This means that you can add styles to the identifiers in your feed container (box or column).

Let's Try a Style Sheet

Enter the web address - URL - for the RSS Feed that you want to add style to.

Haven't got a Feed available? No problem! Use the:

• Tanja Baumann Fitness Feed - English
  = http://www.tanjabaumann.com/rss_en.xml
• oder Tanja Baumann RSS Feed - Deutsch
  = http://www.tanjabaumann.com/rss_de.xml.

Type URL address

Style Selection

This is our list of styles for you to choose from for your feed or to experiment with.

You are welcome to apply any of these sheets to your feed. But none of them are quite «MY SITE», are they?

So go ahead and modify one of these sheets. Better still: Create your own style sheet!

Made your own style sheet? Congratulations! Send me - John Aarsen - a copy if you'd like to (you don't have to!) and I'll add it to our RSS Feed style sheet collection.

Want to see your feed without CSS Style? Select none.css and away you go!

Make Your Choice: I Want Style Type: No Style / Blank TemplateBasic BlueblackboxDog's Eye ViewESSCGreen BarsXPmaroonedNo BulletsOutlivEPlumTanjaZanestatefeedsYahoo Show my feed in style.

Applying Your Style Sheet

Don't forget to paste the last part of the style code &flavor=style name you will see in the preview code textarea to the end of the main RSS Feed Code!

Plus: Don't forget to retain the quotation mark " at the end of the code!

You can apply your style in two ways - if you know this, skip to the next section:

1. Insert your CSS rules in the HEAD of your feed display page.
   • Build your style using our defined CSS Classes;
   • Copy and paste your CSS Code into the HEAD of your feed display page;
   • Add the following opening <style>...</style> and closing tags:
     1. Opening Tag = <style type="text/css" media="all">
     2. <!-- this is where you paste the CSS Code you built -->
     3. Closing Tag = </style>
   For web sites that usually apply style this way.
2. Link to an external style sheet.
   • Copy and paste the your CSS Code into a new text file.
   • Save it with any name you prefer, e.g. "rssfeed.css" - file extension must be .css;
   • Save it in the same directory (file) where you usually place your CSS files -
     Some web sites store CSS files in their home page directory;
     Other web sites create a folder usually named «style» and store their CSS files in this «style» folder.
   • Insert the CSS file address you have decided on in the HEAD of your feed display page;
     1. Either: <link rel="stylesheet" href="rssfeed.css" media="all">
     2. Or e.g.: <link rel="stylesheet" href="style/rssfeed.css" media="all">
   For web sites that normally use external style sheets.

CSS Classes

Here's a list of the pre-defined CSS Classes - style declarations / rules, what they are used for and - Most Important! - what you can declare / rule to fully meet your style requirements.

1. rss_box: Container for Your RSS Feed - border(s), fonts, colour(s), size, etc.;
2. rss_title: RSS Channel and Link Style - extend if required with:
   1. rss_title a:link
   2. rss_title a:visited
   3. rss_title a:hover
   4. rss_title a:active
   = rollover / mouseover / hover style.
   NB: Apply in the same style rule sequence!;
3. rss_items: Feed Items Unordered List <ul>...</ul> - padding, margins, list-style etc.;
4. rss_item: Item Description and Title <li>...</li> - padding, margins, text-decoration, etc.;
5. rss_item a:: Change Item Title and Link Style - apply a rule that differs from the previous declaration to a specific item in your items list;
6. rss_date: Item posting or publishing date(s) - padding, margins, etc..

Advanced: Two Styles on One Page

More than one feed on a page? Give them each their own style!

You better know what you're doing on this one! This willing amateur hasn't tried it - yet!

You already created your own CSS Custom Class on the Create Your Feed page.

Your CSS Custom Class is: rss_box_XXXX, where XXXX is what you entered as your Code.

Either you may require more specific Class Declarations for the list above.

Or - why not extend your Container Class - rss_box_XXXX - Rules with more declarations?