Solved

Styling an imported RSS feed

Posted on 2008-10-13
1
526 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 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
What's wrong with this PDO query? 5 28
php56-php-mcrypt for rhel7 php56 1 56
Responsive Font Size 6 31
Make footer stick to bottom 6 18
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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 …

821 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