Re: RSS feed to integrate into Xara website
Hi Acorn,
Thanks very much for all your work on this, and apologies for the delay in my reply -- I started a new day job on Wednesday, so have been pretty busy for the last couple of days with lots of new stuff!
I agree that the Surfing Waves feed looks really good, and I think it's going to be more customizable for what I need. I've had a play with it, but have two immediate questions:
- Can I set the line spacing of the text?
- Can I include images from my original blog articles?
- Can I retain formatting from the blog? I mean, many of the blog posts start with the author's name on its own line after the title and in bold. Surfing Waves doesn't seem to respect this at the moment.
It might be helpful if I show you specifically what I'm trying to do. I currently manage this website, which is in Adobe Muse. Since Adobe has made the (terrible!) decision to end development and support for Muse, I'm transitioning to Xara Web Designer. If you look at the Latest News page on the current site, you'll see that it's an RSS feed of a Google Blogger blog. What I need to be able to do is style Surfing Waves, or whatever alternative I adopt, so that it looks exactly like the current Latest News page, so that it's formatting is consistent with the rest of the website.
Do you think this is possible with Surfing Waves, perhaps using a customer CSS file?
Re: RSS feed to integrate into Xara website
I think I am going to disappoint you.
To get the image, you need to employ Media RSS.
i have not found any suitable embed MRSS Viewer.
I have assumed the Feed is http://blog.sela-sheffield.org/feeds/posts/default.
Potentially, one could use jQuery and AJAX to extract title, description and tags and build up a suitable HTML structure and apply CSS.
I have looked on blogspot and not found any guidance.
Acorn
1 Attachment(s)
Re: RSS feed to integrate into Xara website
Thanks, Acorn. The https://rss.bloople.net tool that we were using at the start of this thread does pull in the images: see this example Attachment 121782
The problem with this is styling it: I need to change the colours, font, sizes, line spacing and (ideally) the size of the images.
Do you think that's possible?
Re: RSS feed to integrate into Xara website
Quote:
Originally Posted by
garycwood84
Thanks, Acorn. The
https://rss.bloople.net tool that we were using at the start of this thread does pull in the images: see this example
Attachment 121782
The problem with this is styling it: I need to change the colours, font, sizes, line spacing and (ideally) the size of the images.
Do you think that's possible?
Quick answer - yes!
Acorn
Re: RSS feed to integrate into Xara website
longer answer:
Add the following into the current Placeholder code (body):
Code:
<style>
body {
color: #787878;
line-height: 32px;
font-size: 14pt;
font-weight: 400;
letter-spacing: 0.75px;
}
h4.feed-item-title {
font-size: 24pt;
}
h4.feed-item-title>a {
text-decoration: none;
font-size: 18pt;
color: #175aa9;
}
p.feed-item-desc {
color: #787878;
line-spacong: 24pt;
}
a[href$='more'] {
text-decoration: none;
color: #175aa9;
}
a[href^='https://rss'] {
display: none;
}
</style>
Acorn
Re: RSS feed to integrate into Xara website
Awesome! Thank you so much, Acorn! :D
The final thing I need to do is change the font. The one I'm using is non-standard, so it gets output as a webfont. How can I make the text here work in that font, too?
Re: RSS feed to integrate into Xara website
Quote:
Originally Posted by
garycwood84
Awesome! Thank you so much, Acorn! :D
The final thing I need to do is change the font. The one I'm using is non-standard, so it gets output as a webfont. How can I make the text here work in that font, too?
Gary, I am into guessing territory here but you would have to install your font into the page.
What I have tried is adding Google fonts to a small text box. Once the font is available you can add it to the CSS:
Code:
<div id="rss-feed">
<script src="//rss.bloople.net/?url=http%3A%2F%2Fblog.sela-sheffield.org%2Ffeeds%2Fposts%2Fdefault%3Falt%3Drss&limit=6&showtitle=false&type=js"></script>
</div>
<style>
#rss-feed {
color: #787878;
line-height: 32px;
font-size: 14pt;
font-weight: 400;
letter-spacing: 0.75px;
font-family: Biryani, Verdana, Arial, Helvetica, sans-serif;
}
h4.feed-item-title {
font-size: 24pt;
}
h4.feed-item-title>a {
text-decoration: none;
font-size: 18pt;
color: #175aa9;
}
p.feed-item-desc {
color: #787878;
line-spacong: 24pt;
}
a[href$='more'] {
text-decoration: none;
color: #175aa9;
}
a[href^='https://rss'] {
display: none;
}
</style>
Changes are in bold red.
These include wrapping your code in a DIV tag with ID 'rss-feed' to make the CSS tidier.
The font family will start at the left and work its way to the right if no suitable font is found.
I just chose Biryani as an example. You need to pick a Google Font closest to Blake.
Perhaps a font expert can advise?
Acorn
Acorn
Re: RSS feed to integrate into Xara website
Thanks for this, Acorn. It turns out that XWD already does everything necessary to make the fonts available, since I'm using them on other pages of the site, so it exports them as webfonts. So all I needed to do was specify the name of the fonts in your code, in place of Biryani.
My final problem is that the date of posts is not appearing in the RSS. It appears on the original version (www.sela-sheffield.org/news.html), but isn't there in the new version. Any ideas how I can fix that?
Re: RSS feed to integrate into Xara website
Quote:
Originally Posted by
garycwood84
Thanks for this, Acorn. It turns out that XWD already does everything necessary to make the fonts available, since I'm using them on other pages of the site, so it exports them as webfonts. So all I needed to do was specify the name of the fonts in your code, in place of Biryani.
My final problem is that the date of posts is not appearing in the RSS. It appears on the original version (
www.sela-sheffield.org/news.html), but isn't there in the new version. Any ideas how I can fix that?
Gary, that is a limitation of that RSS Viewer. I don't know of any simple fix.
Acorn
Re: RSS feed to integrate into Xara website
Hmm... that's a shame. It means this isn't a workable option. And there's definitely now way we can get the Surfing Waves feed you found to include images?