Page 1 of 1
CSS & RSS
Posted: Mon 27 Feb, 2012 20.02
by Alexia
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?
Re: CSS & RSS
Posted: Mon 27 Feb, 2012 20.05
by dosxuk
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?
Re: CSS & RSS
Posted: Mon 27 Feb, 2012 20.09
by Alexia
Custom built - HTML from scratch basically. The old farshioned way.
Re: CSS & RSS
Posted: Mon 27 Feb, 2012 20.20
by dosxuk
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>
Re: CSS & RSS
Posted: Mon 27 Feb, 2012 21.55
by Alexia
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?
Re: CSS & RSS
Posted: Mon 27 Feb, 2012 23.19
by dosxuk
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).
Re: CSS & RSS
Posted: Wed 29 Feb, 2012 01.16
by Alexia
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.
Re: CSS & RSS
Posted: Mon 05 Mar, 2012 01.30
by Alexia
It's worked after all! Many thanks!