CSS & RSS

Alexia · Mon 27 Feb, 2012 20.02

I'm currently in the process of building myself a new homepage and would like to embed both a news feed and a "latest blog entry" on it.

I've been using http://feed2js.org/ to convert the RSS feeds for both a news source and my blog's Atom feed.

However, I am getting stuck on how to apply two different CSS styles to the two page elements.

How do I do that?

dosxuk · Mon 27 Feb, 2012 20.05

How are you rendering the page?

I.e. is it a custom built web page / part of a CMS like Wordpress / built using a site-generator tool like Lola?

Alexia · Mon 27 Feb, 2012 20.09

Custom built - HTML from scratch basically. The old farshioned way.

dosxuk · Mon 27 Feb, 2012 20.20

Wrap your Feed2JS tags in a div with a classname, and then use that classname to select your different style rules.

Code: Select all

<div class="feed_one"><script src="http://feed2js.org//feed2js.php?src=..."></script><noscript>...</noscript></div>
<div class="feed_two"><script src="http://feed2js.org//feed2js.php?src=..."></script><noscript>...</noscript></div>

<style>
  div.feed_one .rss_box { border: 2px solid #f0f; }
  div.feed_two .rss_box { border: 2px solid #4f0; }
</style>

Alexia · Mon 27 Feb, 2012 21.55

Where do the style tags go - around the divs?

Also, I already have an external CSS sheet set up, can I use two style sheets or does it have to be in the markup?

dosxuk · Mon 27 Feb, 2012 23.19

The style tags should be between the <head> tags, but the contents can be put into your CSS files instead (generally a better idea anyway, but <style> tags are good for making a quick bodge / demo).

Alexia · Wed 29 Feb, 2012 01.16

Hasn't worked

Apologies I'm really crap at basic coding, more of a WYSYWYG person myself.

I've put div tags round the two scripts as instructed, and named them "news" and "blog" respectively, and inserted your code into my CSS sheet, but the blog script is still showing at the same width and with the same fonts/sizes as the news script.

Here is what I have in my CSS style sheet:

div.news
.rss-box {
margin: 0em;
width: 400px;
background-color: #FFFFFF;
border: 0px dashed #240;

}
.rss-items {
font-family: Georgia, sans-serif;
margin-top:0px;
margin-bottom:10px;
font-size: 14pt;
padding:0em; 5em;
margin-left:0px;
color:#000000;
}

.rss-item {
font-family: Trebuchet MS, sans-serif;
font-size: 10pt;
font-weight : normal;
list-style:none;
padding-bottom:20px;
color:#000000;
}

.rss-item a {
text-decoration : none;
color: black;
font-size: 14pt;
font-weight:light;
font-family: Georgia, sans-serif;
margin-bottom:20px
color:#000000;
}

.rss-item a:visited {
color:white;
}

.rss-date {
font-size: 10pt;
font-weight : normal;
color: black;
padding-bottom:10px;
}

div.blog

.rss-box {
margin: 0em;
width: 200px;
background-color: #FFFFFF;
border: 0px dashed #240;

}
.rss-items {
font-family: Georgia, sans-serif;
margin-top:0px;
margin-bottom:10px;
font-size: 14pt;
padding:0em; 5em;
margin-left:0px;
color:#000000;
}

.rss-item {
font-family: Trebuchet MS, sans-serif;
font-size: 10pt;
font-weight : normal;
list-style:none;
padding-bottom:20px;
color:#000000;
}

.rss-item a {
text-decoration : none;
color: black;
font-size: 14pt;
font-weight:light;
font-family: Georgia, sans-serif;
margin-bottom:20px
color:#000000;
}

.rss-item a:visited {
color:white;
}

.rss-date {
font-size: 10pt;
font-weight : normal;
color: black;
padding-bottom:10px;
}

I expect I don't need half of that, but there we go.

Alexia · Mon 05 Mar, 2012 01.30

It's worked after all! Many thanks!