Nonsense

Update 1/7/2010: I originally posted on a self-hosted Wordpress blog. I've moved onto Posterous, as you can see, so references to my about page don't really work anymore. I've gone ahead and left the content alone, however, since it may someday prove useful to someone.

Ever since I set this blog up to carve out my own little piece of electronic real estate to be used for my own (occasionally devious) purposes, I’ve had an “About” page set up, which is all well and good except the only thing it ever led to was a blank page. Not exactly the most flattering way to represent yourself, huh?

Parallel to all this, I signed up for a Friendfeed somewhere along the way. If you’re not aware, Friendfeed essentially works as a place centralize whatever it is you’re doing on the web. You plug your account names for any/all of a laundry list of web services, social networks, etc. and what you get is essentially your own little stream of personal content: What you shared from Google Reader, what restaurant you raved about on Yelp, what picture you just uploaded to Flickr and who you just got into a pissing contest with over on Twitter. It’s all there.

Like everything else on the web these days, Friendfeed itself functions as a social network of sorts and it’s malleable enough within it’s confines to foster conversations. Unfortunately, I think it’s also kind of ugly and as superficial as that sounds, I don’t generally use Friendfeed’s site for anything particularly social.

In any case, this isn’t about slagging on Friendfeed because what interests me is the widgets that let you easily pull your content out of Friendfeed for display anywhere. This is right in line with my original use for Friendfeed: It fed a ll the things I wanted to share into Facebook for my friends to see. That was accomplished with a Friendfeed app, however, so it was pretty much plug, play and forget.

This got me thinking about my barren About page. It occurred to me that I never really got around to sliding anything in there because there’s never really been a compelling reason. Personal blogging is already very much about carving your ego into the internet. After all, I’m not selling anything, nor am I providing any particular kind of service other than to perhaps occasionally entertain the odd passerby who stops to read a bit. I guess I could say that this blog was originally intended as a way for me to urge myself to write, but a quick glance at my post counts would pretty much render that argument moot.

In that vein, an About me page seems pretty ridiculous. I don’t really need to put my resume up here because this site isn’t something I’ve ever intended to use to market myself. It just is and it’s totally, utterly random.

So Friendfeed, huh? I’m already feeding everything into Facebook, why not here? Why not use that as an About page? Seems kind of logical, especially given the lack of such logic in my actual use of this blog. It took a little hunting around to figure out precisely how to do this, but here’s what I came up with.

First thing you’ll want to do is create a Wordpress template file that’ll contain the gist of your code. I pulled this straight from Clever Doll, who has has the steps outlined perfectly. I’d highly suggest grabbing the first part of your lifestream set up there, which'll leave you with something like this:

Yuck.

The issue I ran into once I had Friendfeed plugged into my Stream page was the actual appearance. The default look for Friendfeed just doesn’t jive with my theme here and there’s not a lot you can do with the Friendfeed widget to lay it out to your liking. Friendfeed does give you a whole mess of classes to play with in CSS, but if you’re a CSS newb like me, this is where the whole process breaks down and frustration starts to set in. Specifically, I wanted to achieve the following:

• Get rid of that ugly blue border.
• Make the background transparent so the white of the FF widget doesn’t clash with the off-white of my theme.
• Get rid of those link colors. I guess it’s good practice to make your links stand out, but I feel like it distracts from any text and looks garish in comparison to the surrounding site. Besides, the service icons imply linkage, why over do it?
• Let overflow text from the comment area wrap around to the next line, rather than simply disappear under the sidebar off to the right.
• Match text colors and fonts to the rest of my site.

Basically, that five-bullet list is all about one thing: Making Friendfeed itself invisible. Sorry, FF, you know I love ya.

Anyway, I tried to sort out the CSS on my own according to Friendfeed’s advice, but I simply couldn’t get things to look the way I needed them to. None of my changes seem to make a difference, which I’m sure is my fault. Like I said, my CSS skills are weak. I know how to edit other people’s work into something that fits with what I want, but composing my own style is out for me at my current skill level.

Using Firebug, I figured out that the FF widget was pulling its own default CSS file, which would normally overwrite any changes you made that didn’t include “!important,” which would force an override. The best part about this was that I could simply copy and paste the full CSS straight from Friendfeed into my own stylesheet and use that as a template to alter the exact things I wanted to alter. You can find the widget CSS on Friendfeed here.

Okay, so I have my list of things I'd like to accomplish, so let's get cracking. Like I said, I just took the original FF CSS, but the places where I made my changes are marked "!important" and that's what I'll comment on. I'll just stick to the parts I changed, so follow along and don't be too scared to dive in elsewhere! Commentary on each section to follow.

FFCustom1.css: The background-color property will affect the, well, background color of your new lifestream. I made mine transparent so the background color as defined elsewhere would stick.

FFCustom2.css: Here I changed the font-family to match my theme. Adjust for yourself according to your current stylesheet. I also changed the font size of the majority of the FF text to match the body text in my regular blog posts. Finally, get rid of that nasty blue border by changing the default border property to 0px or none.

FFCustom3.css: Again, just wanted to match up the style, this time for links and visited links. Altered the color to match links from the blog, then changed text-decoration to none to remove the underline. Unlike in a larger body of text, the link is really the thing here. Underlining it seems extraneous. Still, might continue to play with this one.

I left a lot of the code from there on out untouched, at least until FFCustom4.css. This was a big one for me. If you look at the screenshot above, you'll see that the end of the comment below the top couple Friendfeed posts just trails off towards the end. Adding the white-space: normal property should get your comments flowing better.

I left everything else alone in my implementation. The above changes got me to where I need to be. I know that a lot of the other CSS is pretty extraneous if you chose to not include the Friendfeed logo and various other things in your original widget setup. You also probably don't need to include any of the properties that you don't change, since those are going to come from the default FF stylesheet anyway. Just be sure you mark anything you do change as !important. This is key!

Check out my results and feel free to copy them or do your own thing. Drop me a comment with a link to your own lifestream if this helps you out some!