Styling an imported RSS feed

So, someone has asked me to add RSS feeds to their site. Using

http://itde.vccs.edu/rss2js/build.php

Once I have the feed generated (code below) I need to stylize to make it look like the other headlines that are already on the site.

I get it close but can never make the headline and the one line of article text look different.

The site is www.horsemensguide.com. I have commented out the RSS code for right now.

CSS code is below the RSS feed code below.

Thanks
Ryan
<span class="rss">
<ul><li><script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Ffeedproxy.google.com%2FTheHorse%2FNews&chan=n&num=5&desc=50&date=n&targ=y" type="text/javascript"></script>
 
<noscript>
<a href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Ffeedproxy.google.com%2FTheHorse%2FNews&chan=n&num=5&desc=50&date=n&targ=y&html=y">View RSS feed</a>
</noscript></li></ul>
</span>
--------------
 
 
 
 
}
 
    .rss {
	list-style-type: none;
 
}
    .rss ul {
	list-style-type: none;
	padding-left: 5px;
 
}
    .rssitem {	font-family: Georgia, serif;
	font-size: 16px;
	color: #0c5791;
	padding-left: 10px;
}

Open in new window

LVL 1
catonthecouchproductionsAsked:
Who is Participating?
 
absxCommented:
When you look at the contents of the feed at http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Ffeedproxy.google.com%2FTheHorse%2FNews&chan=n&num=5&desc=50&date=n&targ=y, you'll see that the feed is formatted in a fashion that already provides structure and class names:

<div class='rss_box'>
  <ul class='rss_items'>
    <li class='rss_item'>
      <a class='rss_item'>headline/link</a>
      <br />Story start
    </li>
  </ul>
</div>

Therefore you can just override styles for these classes and objects and leave out the <span> and <ul> from your own page (see example).
<html>
<head>
<style>
 
    .rss_box {
        list-style-type: none;
 
}
	.rss_box ul {
		list-style-type: none;
	}
	
	.rss_box li {
		margin-bottom: 10px;
		font-size: 14px;
		font-family: helvetica;
		color: #000;
	}
	
    .rss_box a {
    	text-decoration: none;
        list-style-type: none;
 
}
    .rss_item {  font-family: Georgia, serif;
        font-size: 16px;
        color: #0c5791;
 
}
</style>
</head>
<body>
<script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Ffeedproxy.google.com%2FTheHorse%2FNews&chan=n&num=5&desc=50&date=n&targ=y" type="text/javascript"></script>
 
<noscript>
<a href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Ffeedproxy.google.com%2FTheHorse%2FNews&chan=n&num=5&desc=50&date=n&targ=y&html=y">View RSS feed</a>
</noscript>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.