Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Styling an imported RSS feed

Posted on 2008-10-13
1
Medium Priority
?
546 Views
Last Modified: 2012-05-05
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

0
Comment
1 Comment
 
LVL 9

Accepted Solution

by:
absx earned 2000 total points
ID: 22709590
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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

926 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question