RSS Feed Style Guide

This guide is a modified version of the Google Help document found here.

Customizing MarriageVine’s Feed Appearance:

Your MarriageVine Feed output is marked up with id and class attributes, providing you with plenty of options for styling your resyndicated feed using Cascading Style Sheets.

Here’s a dissection of the output code, along with some tips for applying styles.

First, the code output as a whole. This block shows only one entry, but you can imagine how this would repeat itself for multiple entries.

<div class="feedburnerFeedBlock" id="myfeeduri1234">
<p class="feedTitle">Feed Title Goes Here</p>

<ul>
<li><span class="headline"><a href="#">First item headline here</a></span>

<p class="date">Jan 22, 2005</p>
<div>Aliquam delenit enim nostrud autem velit eum aliquip lobortis consectetuer eum volutpat vero autem et. Tincidunt consequat illum quis suscipit dolor nonummy in dolore.</div></li>
.
.
.
</ul>
<div id="creditfooter"><a href="http://www.feedburner.com" target="_blank"> <img src="http://www.feedburner.com/fb/images/buzzboost-pwrd.gif" alt="Headlines by FeedBurner" /></a>
</div>
</div>

And now, we break it down line by line.

<div class="feedBurnerFeedBlock" id="myfeeduri1234">

Any MarriageVine Feed script you display will include this class, so you can apply similar styles across multiple blocks on your site. Additionally, we apply a unique ID to each block (constructed from your FeedBurner feed URI and user ID), providing an opportunity for styling specific code blocks.

<p class="feedTitle">Feed Title Goes Here</p>

This is the title of the feed. To avoid conflicts with other elements with a class of feedTitle, use descendant selectors in your CSS, like this:

div.feedBurnerFeedBlock p.feedTitle { color: red; }

We’ll skip boring line three. Next!

<li><span class="headline"><a href="#">First item headline here</a></span> <p class="date">January 22, 2005</p>

The li marks the first feed item. The headline and date for this item are marked with classes to provide a hook for styles. Once again, use descendant selectors in CSS to avoid conflicts.

<div>Aliquam delenit enim nostrud autem velit eum aliquip lobortis consectetuer eum volutpat vero autem et. Tincidunt consequat illum quis suscipit dolor nonummy in dolore.</div>

The full text is wrapped in a div, which acts as an effective container.

<div id="creditfooter"><a href="http://www.feedburner.com" target="_blank"> <img src="http://www.feedburner.com/fb/images/buzzboost-pwrd.gif" alt="Headlines by FeedBurner" /></a></div>

A small image with a link back to FeedBurner is inserted at the bottom of each MarriageVine Feed. This image is contained within a div so you have flexibility in positioning and styling this image.

</ul> </div>

Just closing things out. Nothing to see here.

Overriding MarriageVine Feed Settings

When you copy your MarriageVine Feed code, defined options have been set for each feed, but it’s possible to override these settings on an individual basis. The following options can be overridden by editing the <script> tag that is on the RSS Feed page:

Multiple overrides can be applied to MarriageVine Feeds. In fact, you can override all of the settings to create a completely different version of the MarriageVine Feed for your website. An example of how overrides can be combined:

Multiple overrides can be applied to your BuzzBoost. In fact, you can override all of the settings to create a completely different version of BuzzBoost without going through the setup process again. An example of how overrides can be combined:

<script language="JavaScript" src="http://feeds.feedburner.com/feeduri?format=sigpro&openLinks=new&displayDate= false&displayEnclosures=true&displayExcerpts=false" type="text/javascript"></script>