Lifestream lessons: embedding and styling an RSS feed stack in Rapidweaver

lifestream
There are hundreds of stacks for Rapidweaver. They allow us to do an astounding array of cool things. There are so many talented developers, and the Realmac Add-Ons page does a pretty good job of showcasing them. But there's always more to discover.

The Lifestream stack from WeaverAddons is one of these hidden gems. It allows you to embed a social media or RSS stream into your site. You can do some really neat stuff with this stack, so I'm devoting a couple of posts to a mini-tutorial.


In a previous version of my site, I was designing a modular homepage and wanted to embed two things: an RSS feed with recent posts from my blog, and a Twitter feed of my hilarious tweets. I'm not using those on my site anymore, but thought the functionality might be useful to someone.

First up, we'll embed and customize an RSS feed. In the next post, we'll do the same for Twitter.

The finished product

Here's what the finished "widget" looked like in my site. I was able to customize the colors, icons, and look to match my site's design.

ls-rss

Neat, right? Let's get started.

Using the Lifestream stack

I will assume that you have installed the Lifestream stack, and have placed it in your site. Those two things are fairly necessary. At first glance it looks a little confusing.

lifestream

Those are four of the more popular streams you can embed, but Lifestream works with a dizzying number of services from App.net to Wordpress. Use Mlkshk? Covered. Quora, GitHub, Forrst? Yep. But today we are focusing on RSS.

Configuring Lifestream for RSS

It is super simple. Scroll down in the stack settings until you see the RSS section.

Lifestream RSS settings

You really need only one thing: your RSS feed URL. You can configure up to five in one stack, but that's a lot of RSSing going on. I stick to one.

The other option here is Custom Icons. This lets you assign a unique icon to each of your feeds, which will be displayed next to each entry on your site.

Here's what my settings look like. You can see the custom icon there. It's a FontAwesome icon, which I saved out to a 16x16 PNG using Doobox's Awesome Icons app.

RSS icon configuration

Configuring the feed

Again, simple. Choose the number of posts you want displayed, and check the other options you want.

RSS feed config

Configuring the colors and design

Here's where Lifestream shines. You can configure pretty much any of the elements in the stream, to match the look of your site. You can set the color/background of the container, the text, links, border, and the divider between entries. Note the option for Box Type: you can have your stream in one container, or each entry in its own separate box. The Box Background setting lets you choose one color, or alternating backgrounds for your entries.

I wanted mine to feel light and airy, and to appear as a single stream. Here are my settings and colors.

Lifestream RSS colors

Also awesomely, you can control the divider height, borders, rounding, and the padding between entries.

Lifestream RSS colors

And, you can choose the link appearance, and define a custom text size.

Lifestream RSS links

There are other settings, like whether to display media and images, and lots more.

Now that you've seen my settings, take another look at the finished feed, at the top of this post. You can drag your feed stack into other stacks, combine with titles and text, anything you want. The end result is a great-looking social media stream that really fits with your site.

Final thoughts

As you can see, Lifestream is a really versatile stack. In my next post, we'll look at customizing a Twitter feed. Happy weaving!

Lifestream stack at WeaverAddons





< Previous Posts...