Solved

Styling an imported RSS feed

Posted on 2008-10-13
1
528 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 9

Accepted Solution

by:
absx earned 500 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

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

739 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