Thursday, November 4, 2010

How To Make Facebook's Home Page Text Bigger

My friend Jane recently asked how to make the text on Facebook's News Feed larger. (Facebook has, within the last couple of days, changed its home page / News Feed design to use smaller text.)

Another friend pointed out that one increases overall page magnification via Ctrl-+ (That means holding down the Control key and hitting the plus key). If you don't mind changing magnification manually, my recommendation is:
  • In Firefox, first choose View -> Zoom and select Zoom Text Only, so that it is checked. Then, use Ctrl-+ to magnify your view, Ctrl-- (that's holding down the Control key and pressing the minus key) to shrink it.
  • In Internet Explorer, choose Page -> Text Size -> Larger.
  • In Chrome, you can only zoom or shrink the entire page, using either the Settings button or Ctrl-+ / Ctrl--.
  • In Safari, you can zoom or shrink text using Apple-+ or Apple--, or by selecting View -> Make Text Bigger.
Needless to say, this can be a pain in the butt. If you use Firefox or Chrome, you can permanently increase the size of  your News Feed text by installing the Stylish plug-in and adding a little code. I'll walk you through the whole process.

First, you need to install the Stylish plug-in. Stylish allows you to add your own CSS styles to a Web page; that is, you can override the formatting of a Web page if you use this plug-in.

To install Stylish in Firefox:
  • Launch Firefox and visit the Stylish plug-in page at https://addons.mozilla.org/en-US/firefox/addon/2108/.
  • Click the Add to Firefox button. 
  • A dialog box comes up with a short countdown. Don't worry about the author not being verified; it's OK. When the Install Now button becomes active, click it.
  • You need to restart Firefox to complete installation.
To install Stylish in Chrome:
Now that you have installed Stylish, you can go ahead and create the custom format that will increase news feed text size.

To make the News Feed text bigger in Firefox:
  • Choose Tools -> Add-ons.
  • From the icons at the top of the window that opens, click the User Styles icon.
  • Click the Write New Style button, in the bottom right-hand corner.


  • In the Name text box, type "Facebook News Feed Larger Text"
  • Leave Tags blank.
  • In the big text box underneath the Insert button, copy and paste the following text:
@-moz-document domain('www.facebook.com') {
.uiStreamMessage {
font-size: 12px !important;
}
}


  • Click Save, then close the Add-ons dialog box.
The news feed items in Facebook should now be bigger. If you want them even larger, change 12px in the copy-pasted text to 14px, 16px, etc.

To make the News Feed text bigger in Chrome:
  • Right-click on the Sylish icon and choose Options.


  •  On the page that comes up, click the Add New Style link.
  • In the Name text box, type "Facebook News Feed Larger Text"
  • Check the Enabled check box.
  • Under Code, copy and paste the following text:
.uiStreamMessage {
font-size: 12px !important;
} 
  • Under Applies to, choose "URLs on the domain" from the pull-down menu, and type "www.facebook.com" into the text box.


  • Click Save, then close the tab.
 You should now see larger text in your news feed. If you like, you can make the text even bigger by changing 12px to 14px, 16px, etc.

I don't know enough about Internet Explorer to tell if there is a similar plug-in / add-on to allow user style injection; I am sure there is such a thing, but I am not aware of it. The same is true for Safari.