Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Custom Twitter stylesheet

Custom Twitter Stylesheet

Craig Mod does a bigger overhaul with Twitter for Minimalists, but this will only do the following:

  • Hides promoted tweets and trends
  • Hides the useless “Expand” link that appears under every tweet
  • Tones down the blue conversation line to a barely-visible gray
  • Hides all numbers

You can add this CSS in Safari with this extension. The URL to target is twitter.com/*.

.promoted-tweet,
.wtf-module,
.trends,
.expand-action-wrapper,
.tweet-actions,
.cards-media-container,
.ScrollBump,
.ProfilePhotoRail,
.ProfileWTFAndTrends,
.Footer { display: none !important; }
.DashboardProfileCard-statList,
.js-mini-profile-stats,
.js-tweet-stats-container,
.ProfileNav-item--following,
.ProfileNav-item--followers,
.ProfileTweet-actionCount,
.ProfileHeaderCard-joinDateText
{
visibility: hidden;
}
.permalink .cards-media-container { display: block !important; }
.tweet:hover .tweet-actions {
display: inline !important;
}
.vellip,
.vellip::before,
.vellip::after,
.conversation-module > li::after,
.conversation-module > li::before {
background-color: #eee !important;
}
.ProfileTweet--high .ProfileTweet-text {
font-size: 16px !important;
line-height: 22px !important;
font-weight: 400 !important;
}
.highline { font-family: "Helvetica" !important; }
@maxfenton

This comment has been minimized.

Copy link

@maxfenton maxfenton commented Oct 30, 2013

To these, I add


.js-details {
    display: none;
}

.stream-item {
    margin-top: .5em;
}


@ideabucket

This comment has been minimized.

Copy link

@ideabucket ideabucket commented Oct 30, 2013

In the course of hiding all the inlined rubbish in timelines, this also makes pic.twitter.com photos completely invisible everywhere. A workaround:

.permalink .cards-media-container { display: block !important; }

This shows the media block on single-tweet permalink pages, which lets you get at the photos.

@nicoleslaw

This comment has been minimized.

Copy link

@nicoleslaw nicoleslaw commented Mar 3, 2015

Added this to hide the inline stats:
span.Icon.Icon--analytics { display: none; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.