How to override the new plain white background in Twitter

As many of you know, Twitter just removed the ability to customize backgrounds on the web client. It’s bad-ish that they removed the ability to add custom graphics as a back ground, but far worse, they removed the ability to change the background colour, leaving users with an eye-bleeding, headache inducing bluish white. new-9

Well, “the Man” might be wanting us to just shut up and deal with it but we don’t have to take it. StyleBot allows us to edit the CSS (stylesheet) of any page. It is originally intended as an accessibility tool as it allows users to change colours (to make them high contrast), font sizesĀ  etc, however we can use is to stick it to the Twitter man, The great thing about this is that we can save the styles and the plugin changes the colours pretty much permanently.

The following works for Chrome and there’s probably similar things you can do in Firefox & maybe IE.

Install the free StyleBot from the Chrome Store

You will now have a CSS button in the upper right. Right click on it and select Options.

new-2

Select the Styles tab

new-7

Click Add a New Style

Then add the URL twitter.com and the 3 lines of CSS code. (Important: everything is Case Sensitive)

body {
    background-color: #4a7383;
}

I like a dark-ish blue but you can pick what ever value you want. There’s a good colour picker tool here at Mozilla

new-6

Now click the save buttton, reload your Twitter tab and say ahhhh.

new-11

You’ve got a background that you control. And there’s nothing the Man can do about it. You can go crazy and change fonts, layouts and a lot more or use one of the pre-built style for Twitter & many other sites from StyleBot Social but for me, I just wanted the background colour changed.

Note: this only affects what -you- see. If you wanted to customize your Twitter page for others, you’re out of luck. At least until Twitter starts charging you to customize it. Which is my guess as to why they have done this miserable thing in the first place.

Update: Noticed that Twitter cards are changed by this as well.

new-12

I don’t like that but it’s easy to change. All we need is to do is add an entry for Twitter Cards.

body {
   background-color: #4a7383;
}
div.TwitterCardsGrid {
    background-color: #ffffff;
}

Another little tweak.

if you use analytics.twitter.com and don’t want that page altered (it’s quite hard to read with a dark background.)

Add an entry with just a white (#ffffff) background.

Capture

Then modify the original URL to ^https://twitter.com/

Capture

This applies the fix to the main twitter page but not to analytics.

Update #3

Firefox users can install Stylish

Load Twitter.com

Click the S icon and then Write new style > for twitter.com

new-14

new-15

Place your cursor between the { } on line 4 and paste the CSS code from above. Give it a name and click save.

new-16