Focusing on the News Feed

Quite a while back, Facebook did a few design overhauls of the News Feed. It seems that they have landed on making almost everything Lucida Grande with an eleven pixel type size. In “ye olden days” status messages would have a type size that was a tad bit bigger. This made it possible to discern them from the rest of the banter going on in the News Feed.

Because my primary use of Facebook is keeping up with the people that are geographically located around me (also known as “real-life friends”), the unified eleven pixel Lucida Grande didn’t cut it for me.

I needed to be able to focus on my News Feed and discern the status updates therein. So the first thing was to change the type size on the elements specific to status messages (or statuses that accompanied a piece of media)

.uiStreamMessage .messageBody {
	font-size: 13px !important;
	line-height: 1.5em !important;
}

After that worked, I still wasn’t happy with all the clutter around the News Feed. So I decided to fade away the left and right column a bit, whilst showing them at full opacity once the cursor hovers over them.

#leftCol,
.home_right_column {
	opacity:0.2;
	-webkit-transition: opacity 0.2s ease-out;
}

#leftCol:hover,
.home_right_column:hover {
	opacity:1;
}

Then the line next to the left column looked off, which was fixed by the following.

.hasLeftCol #contentCol {
	border-left-color: rgba(0,0,0,0.1) !important;
}

All of this having the common goal on focusing on the News Feed, because that’s where – for me – the useful content is.

You can copy it below to paste it into a User CSS extension of your choice (For Safari, I’d recommend User CSS).

.uiStreamMessage .messageBody {
	font-size: 13px !important;
	line-height: 1.5em !important;
}

#leftCol,
.home_right_column {
	opacity:0.2;
	-webkit-transition: opacity 0.2s ease-out;
}

#leftCol:hover,
.home_right_column:hover {
	opacity:1;
}

.hasLeftCol #contentCol {
	border-left-color: rgba(0,0,0,0.1) !important;
}