Skip to content

Software Engineer at Polygon

Remove ads from your Twitter timeline with a few lines of CSS

Twitter timeline is full of ads, and the “What’s happening” section is nothing else, just crap that I don’t care about. That is the main reason why I use TweetDeck instead.

Inspired by Šime’s “How I Added Scroll Snapping To My Twitter Timeline”, I decided to clean up my Twitter timeline, removing all the promoted tweets and this rubbish on the sidebar. Have a look at the before and after!

Twitter timeline before and after adding custom CSS

The trick is simple — you must add a few lines of CSS to hide the unneeded stuff. Then, using Safari, you can pick a custom stylesheet in Preference’s Advanced tab. Stylus extension is the way to go for Chrome and Firefox users.

Advanced Settings in Safari allow you to specify a custom stylesheet

These few lines of code are all I added to my custom stylesheet. Of course, it is not perfect and will break if Twiter changes the markup, but it does the job now. I have no more promoted tweets, politics, or football news on my timeline.

/* hide promoted tweets */
:has(meta[property="og:site_name"][content="Twitter"])
  [data-testid="cellInnerDiv"]:has(svg + [dir="auto"]) {
  display: none;
}

/* hide what's happening section */
:has(meta[property="og:site_name"][content="Twitter"])
  [aria-label="Timeline: Trending now"] {
  display: none !important;
}

Hopefully, that helps. Bye 👋

Comments

  • J
    Josta Yee

    "hide what's happening section" hides my timeline, too.

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      Most likely, the Twitter timeline differs between users. Therefore, I am afraid you have to adjust the selector by yourself.

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      OK, I see! The same happened to me now. This one fixed it.

      :has(meta[property="og:site_name"][content="Twitter"])
        [aria-label="Timeline: Trending now"] {
        display: none !important;
      }
      

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!

Leave a comment

👆 you can use Markdown here

Your comment is awaiting moderation. Thanks!