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

Advertisements

2 Responses to How to override the new plain white background in Twitter

  1. Bryan says:

    Any options for Safari users on Mac?

    • JayB says:

      Don’t have access to a Mac & not sure about the plugin eco system. If I find something I’ll update the post and would appreciate it if you let me know if you find something.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: