Style a Feed

Once you have built the code for your Feed, you can see how the output of RSS content generated by our widget tool can be customized by applying different style sheets. Each part of the feed has an identifier, allowing you to add styles to the box containing the feeds, the title, the item display, and the date posting text.

Help On using a Style Sheet

You will need to incorporate the CSS code or linkage in your own HTML files; there are two ways you can do this:

<style type="text/css"  media="all">

<!--  this is where you paste the CSS provided by the form below -->

</style>

<link rel="stylesheet" href="style/myfeed.css" media="all">
  

CSS classes

This sketch represents the CSS classes created by Feed2JS.

• rss-box defines the bounding div for the entire display- use to define borders, fill, etc.
• rss-title the title of the feed and link style if displayed. Use with variants of rss-title a:link, rss-title a:hover, etc for rollowver styles
• rss-items defines the unordered list <ul>...</ul> for the feed items- use to define the padding/margins for items.
• rss-item display of each feed item description and title, <li>...</li> as well as the channel description, if displayed.
• rss-item a: variant for the item title and link style
• rss-date defines the display of item posting dates

For any RSS 2.0 feeds with podcast enclosures, we provide a Play XXX link, where "XXX" is the extension of the media file, e.g. "mp3", "m4a", etc. The styles applied are modeled after Well Styled's Inline Buttons method.

<div class="pod-play-box">
<a class="pod-play" href="podcastURL"><em>Play</em><span> File</span></a>
</div>

Custom colors may be achieved by editing appropriate foreground and background colors from the base styles (emphasized below):

.pod-play {
   _width:12em;
   margin: 0 0.2em; padding: 0.1em 0; _padding:0;
   
   white-space:nowrap;
   text-decoration: none;
   vertical-align:middle;
   background: #fb6;
   color: black;
   }
.pod-play em {
   _width:1em; _cursor:hand;
   font-style: normal;
   margin:0; padding: 0.1em 0.5em;
   background: white;
   color: #222;  
   }
.pod-play span {
   _width:1em; _cursor:hand;
   margin:0; padding: 0.1em 0.5em 0.1em 0.3em;
   }
.pod-play:hover {
   background: #666;
   color: white;  
   }
.pod-play:hover em {
   background: black;
   color: white  
   }

Advanced: Two Styles in One Page

If you have more than one feed displayed per page, you can assign different styles to each display. You will need a solid understanding of CSS and inheritance to get this to work!.

By supplying a value for CSS Custom Class in the build form you can now create different top level classes. The value passed will create a CSS class named rss-box-XXXX where XXXX is this value. This implies that you may have to define more specific classes for the other classes listed above, or use the top level rss-box-XXXX classes to say define a different background color.