Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Styling an imported RSS feed

Posted on 2008-10-13
1
Medium Priority
?
537 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 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

722 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