Improving Twitter with a user stylesheet

In this post, I’ll explain how to install the Stylish browser extension and use it to customise the appearance of Twitter with a user stylesheet that:

  • hides “promoted tweets”
  • hides the “trends for you” panel
  • hides “liked” tweets (when you don’t follow the tweeter concerned)

Recently, I tweeted about the Stylish user stylesheet I use to make Twitter bearable again. A few people have asked me for more detail on how to set this up.

Follow the instructions below according to the browser you use; I know how to do this for Firefox and Chrome.

You might need to reload the Twitter page after you’re done to see the effect. You can tell it’s working if the “Trends for you” panel on the left of Twitter is no longer present.

Instructions for Firefox users

  • Install the Stylish addon for Firefox: Stylish for Firefox

  • Once installation is complete, visit your addons page by opening a new tab or window and entering about:addons in the URL bar.

  • Click on the “User Styles” tab in the column on the left.

  • Click the “Write New Style” button.

  • Give it a name. Mine’s called “Hide twitter trends + promoted tweets + likes-as-retweets”.

  • Fill in the CSS rules you want. Here are mine, which you can cut-and-paste:

@-moz-document url-prefix("https://twitter.com/") {
  .Trends, .promoted-tweet, .pixel-promoted-tweet {display:none;}
  #doc.route-home #timeline div[data-you-follow="false"] {display:none;}
  #doc.route-home #timeline div[data-retweeter],
  #doc.route-home #timeline div.my-tweet,
  #doc.route-home #timeline div.conversation-tweet {display:inherit;}
}
  • Click “Save”.

  • Enjoy!

Instructions for Chrome users

  • Install the Stylish extension for Chrome: Stylish for Chrome

  • Once installation is complete, click on the Stylish icon in the toolbar, next to the URL bar on the right.

  • Click on the three dots near the top right of the popup that appears.

  • Click on “Create New Style” in the menu that appears.

  • Give it a name. Mine’s called “Hide twitter trends + promoted tweets + likes-as-retweets”.

  • Set it so that it “Applies to URLs on the domain” twitter.com.

  • Fill in the CSS rules you want. Here are mine, which you can cut-and-paste; note that these are the same as for Firefox, only without the @-moz-document wrapper, which is taken care of by the previous step in Chrome:

.Trends, .promoted-tweet, .pixel-promoted-tweet {display:none;}
#doc.route-home #timeline div[data-you-follow="false"] {display:none;}
#doc.route-home #timeline div[data-retweeter],
#doc.route-home #timeline div.my-tweet,
#doc.route-home #timeline div.conversation-tweet {display:inherit;}
  • Click “Save”.

  • Enjoy!