The New and Plain Twitter Background

Twitter recently changed the background of your timeline. You used to be able to customize it and now it is plain white. I found this too bright and wanted a softer background. After some quick searching, I found just the tool if you use the Chrome or Firefox web browsers.

Above you can see the new while white background. Below, you will see that I have changed the background to a soft blue.

Change the Twitter Background Colour via ‘Stylish’

You have long been able to make similar temporary changes by using the ‘Inspect Element’ feature from the context menu of browsers such as Google Chrome. However, what I wanted was a way to make the change permanent.  The browser extension ‘Stylish’ allows me to do just that. You can find Stylish in the Chrome Webstore or as a Firefox Add-On.

Add the Code

Once I installed Stylish,

  1. I went to Twitter.com (in a logged in state), and
  2. I clicked on the Extension Icon Stylish installed,
  3. and clicked on the ‘Write Style for’ … ‘/this url‘ link as highlighted in yellow in image below.

That brought up the screen below where I gave the modification a name and added the following text (as again highlighted in yellow in the image below):

body {
background-color: #abc1d0;
}

.mq-medium body {
background-color: #fff !important;
}

Customize Twitter to Your Heart’s Content

The first bit of CSS makes the background the blue, and the second bit of code fixes some blue that shows through in the timeline otherwise.

You can simply copy and paste the code into the Stylish Edit page and hit the Save button. That’s all there is to it.

Of course, you can make the background any colour you like by changing the hex code (the number with the # sign) in the first section to another colour code.  You can find colour codes with this colour picker.  If you know CSS code, you can make other changes to the Twitter background, but I choose to keep it simple for maximum capability.

Once you’ve got Twitter exactly as you want it, you can move on and make changes to other popular sites you use as well.  Stylish can use pre-defined styles that you can find saved at userstyles.org.

Whatever colour or styling you choose — have fun!