Using CSS to Style the Feed

classdiag.gif

If you would like to style the feed using CSS only then make sure you have selected Style with a stylesheet or added the line xjrf_use_css_only = true; above the com.bigllc.xjr.feeds.showFeed line in you web page.

In CSS only mode, no styling is applied to the div with the feed at all. Below is a description of the class names applied to all the elements in the rendered content.

Class NameElementDescription
rssfeedDIVEncapulates the whole feed.
rssfeed-titleDIVThe name of the feed.
rssfeed-itemsDIVEncapsulates all the articles.
rssfeed-itemDIVEncapsulates a single article.
rssfeed-itemtitleAThe title of the article and link to it.
rssfeed-itemcontentDIVThe description of the article.

If you want to add an id to the rssfeed DIV then you can specify a unique id either by regenerating the code using the script generator and entering the a unique id in the appropriate field. Alternatively you can add the id directly to the script by adding it as a second parameter to the com.bigllc.xjr.feeds.showFeed call. 

<script src="http://www.xajrate.com/xjr/scripts/bigllc-xjr.js"></script>
<script src="http://www.xajrate.com/xjr/scripts/bigllc-xjrfeed.js"></script>
<script>
  xjrf_use_css_only  = true;
  com.bigllc.xjr.feeds.showFeed('http://therssfeed','myuniqueid');
</script>

Make sure that this id is unique to the entire document otherwise the content will be inserted into any elements with that id.

Sample CSS

    .rssfeed { 
      width: 250px; 
      border: 1px solid #0000CC; 
      font-family:  verdana, arial, sans-serif; 
      font-size: 11px;
    }
    .rssfeed-title {
      font-size:   12px;
      font-weight: bold;
      background:  #0000CC;
      color:       white;
      padding:     5px;
    }
    
    .rssfeed-items {
    }

    .rssfeed-item {
      padding: 5px 5px 5px 5px;
    }

    .rssfeed-itemtitle {
      color: #CC0000;
    }

    .rssfeed-itemcontent {
      padding-top: 5px;
      color: #666666;
    }