Improving Twitter with a user stylesheet

Thu 3 Aug 2017 16:07 EDT

Tony Garnock-Jones
#tech #web

In this post, I’ll explain how to install the Stylus (N.B.: not 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)

2018-07-03 UPDATED: Previously, I recommended the Stylish browser extension. However, it has recently become spyware :-( and so I will no longer recommend it or link to it. Happily, there is a recommendable alternative: Stylus.

Recently, I tweeted about the 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.

1. Install the extension

Install Stylus:

2. Get to the stylesheet management page

Firefox

  • Visit your addons page by opening a new tab or window and entering about:addons in the URL bar.

  • Click on the “Preferences” button next to the entry for “Stylus” in the list of extensions.

  • At the bottom of the resulting page, click the “Manage styles” button.

Chrome

  • Click on the Stylus icon in the toolbar, next to the URL bar on the right. It looks like a square with a letter “S” on it.

  • Click on the “Manage” button at the bottom of the popup that appears.

3. Add the custom stylesheet

  • Click the “Write New Style” button.

  • Give it a name (field on the top left of the page). 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:

    .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-promoted="true"] {display:none !important;}
#doc.route-home #timeline div[data-retweeter],
#doc.route-home #timeline div.my-tweet,
#doc.route-home #timeline div.conversation-tweet {display:inherit;}

    Optionally, if you’d prefer not to see the “In case you missed it…” section of the page, add this line (HT @DRMacIver):

    #doc.route-home #timeline li[data-item-type="recap_entry"] {display:none;}
  • Change the “Applies to” field so that it matches “URLs starting with” https://twitter.com/:
    • click the “Specify” button
    • change the dropdown from “URL” to “URLs starting with”
    • fill in “https://twitter.com/”

  • Click “Save” near the top left of the page, just below the stylesheet name entry field.

  • Enjoy!