Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

Skinning Twitterrific for Mac

Jason Snell, | May 21, 2011
Not for the faint of heart: Jason Snell explains how to adjust Twitterrific's appearance by editing settings files.

These files are all XML files, but they’re fairly readable. Open theme_dark.plist and you’ll see a series of labels (set in key tags) that tell you what those settings are for. The first set of stats, for example, is the key selected inside the key normalTweet. These are the color settings for a selected tweet in your timeline. Most of the values below this point are RGB color values, from 0 (0 percent) to 255 (100 percent). So when you see


That’s saying that the text color of a normal tweet when it’s selected is 72 percent Red, 78 percent Green, and 84 percent Blue. Web designers would know that by its hexadecimal notation, #69C8D7. It looks like a kind of aquaey blue to me, but then, I’m color blind.

So here are the major changes I made in the dark theme: in normalTweet -> unselected and normalTweet -> selected I made the background (controlled by gradientBottomColor and gradientTopColor) slightly darker but lowering the RGB values by 20. I made the color of text lighter by increasing the RGB values of textColor by 10 or 20.


The defaults (left) and my changes (right).

Experimenting with different settings is pretty easy: just save the file, then quit Twitterrific and open it back up. When the app re-opens you’ll see the changes you made, wrought across the face of the app. There’s a lot of trial and error.

That’s where I should have stopped, though I admit I also changed the color of replies in my timeline from orange to blue. Just because I could! You just have to change a lot of attributes to create a good color scheme, and like I said, I’m color blind. It’s probably awful. But it makes me happy.

There’s one more stop I needed to make: the theme_desktop.plist file. Since Twitterrific’s Normal text size seemed slightly too small for me, but Larger seemed way too big, I decided to bump up the Normal size by a single point. Within theme_desktop.plist, I changed tweetTable -> font from 13 HelveticaNeue-Medium to 14 HelveticaNeue-Medium. I left the actual typeface alone, though it is most definitely editable, as Ars Technica’s John Siracusa proved (see image below; click to embiggen).

John Siracusa's re-skin.
I should mention that Twitterrific’s not remotely the only app with these sorts of stylesheets buried inside their app packages. The other Twitter client I mentioned above, Hibari, even supports this sort of foolishness by letting you create a custom CSS stylesheet in your ~/Application Support/Hibari folder.

In any event, if you’re a Twitterrific user and you want to mess around with how the app looks, you can do it. Just don’t blame me—or The Iconfactory—for what happens next.


Previous Page  1  2 

Sign up for Computerworld eNewsletters.