Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hack twitter's CSS
/* Install the Stylish extension for your browser, then add this code
as a new Style. Make sure it applies to the domain 'twitter.com' */
/* You can get Stylish here: */
/* Safari - http://sobolev.us/stylish/ */
/* Chrome - https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe */
/* Tweet improvements, comments, or corrections to @mcnees. */
/* Thanks to: @pbausch, @mathowie, @blakestacey, @ukuleledan and others! */
/* Fix reply background */
.js-activity-reply .js-stream-tweet {
background-color: #fffee5;
}
/* Hide the heart for un-Faved tweets. */
.ProfileTweet-actionButton .HeartAnimationContainer {
visibility: hidden;
}
.WebToast .HeartAnimationContainer {
visibility: hidden;
}
/* Prevent .HeartAnimationContainer from clipping emoji */
.HeartAnimationContainer {
overflow: visible !important;
}
/* Specify an emoji to use in place of the heart, for un-Faved tweets. */
.ProfileTweet-actionButton .HeartAnimationContainer:after {
/* Use a grayed-out emoji for the unclicked Fav button. */
/* content:'🍺';*/
content:'🍿';
/* Safari or Chrome */
-webkit-filter: grayscale(100%);
opacity: 0.7;
/* Firefox or Mozilla */
/* -moz-filter: grayscale(100%); */
visibility: visible;
display: block;
position: relative;
vertical-align: middle;
}
/* Show the regular emoji when hovering over the fav button. Via @mrtnrs_ on twitter. */
.ProfileTweet-actionButton .HeartAnimationContainer:hover:after {
/* Use a regular emoji for the hovered Fav button. */
/* content:'🍺';*/
content:'🍿';
/* Safari or Chrome */
-webkit-filter: grayscale(0%);
/* Firefox or Mozilla */
/* -moz-filter: grayscale(50%); */
visibility: visible;
display: block;
position: relative;
vertical-align: middle;
}
/* Hide the heart for Faved tweets. */
.ProfileTweet-actionButtonUndo .HeartAnimationContainer {
visibility: hidden;
}
/* Replace the heart for Faved tweets with an emoji. */
.ProfileTweet-actionButtonUndo .HeartAnimationContainer:after {
/* Use a regular emoji for the clicked Fav button. */
/* content:'🍺';*/
content:'🍿';
visibility: visible;
display: block;
position: relative;
vertical-align: middle;
}
/* Change the text color for the Fav count. */
.ProfileTweet-actionCountForPresentation {
color: #999;
}
/* ----------------------------------------------------------- */
/* The following code changes icons in the Notification Stream */
/* ----------------------------------------------------------- */
/* Hide the heart icon for Favs in the notification stream. */
.activity-type-favorite {
visibility: hidden;
}
/* Replace them with an emoji. */
.Icon--heartBadge:before {
content:'⭐️';
visibility: visible;
display: inline-block;
position: relative;
vertical-align: middle;
line-height: 18px;
font-size: 15px;
}
/* Hide the icon for a retweet in notification stream. */
.activity-type-retweet {
visibility: hidden;
}
/* Replace it with an emoji. */
.Icon--retweeted:before {
content:'🚀';
visibility: visible;
display: inline-block;
position: relative;
vertical-align: middle;
line-height: 18px;
font-size: 15px;
}
/* Hide the icon for a favorited mention in notification stream. */
.activity-type-favorited_mention {
visibility: hidden;
}
/* Replace it with an emoji. */
.stream-item-favorited_mention .Icon--heartBadge:before {
content:'🔥';
visibility: visible;
display: inline-block;
position: relative;
vertical-align: middle;
line-height: 18px;
font-size: 15px;
}
/* Hide the icon for a favorited retweet in notification stream. */
.activity-type-favorited_retweet {
visibility: hidden;
}
/* Replace it with an emoji. */
.stream-item-favorited_retweet .Icon--heartBadge:before {
content:'⚡️';
visibility: visible;
display: inline-block;
position: relative;
vertical-align: middle;
line-height: 18px;
font-size: 15px;
}
/* Hide the icon for a retweeted retweet in notification stream. */
.activity-type-retweeted_retweet {
visibility: hidden;
}
/* Replace it with an emoji. */
.stream-item-retweeted_retweet .Icon--retweeted:before {
content:'💯';
visibility: visible;
display: inline-block;
position: relative;
vertical-align: middle;
line-height: 18px;
font-size: 15px;
}
/* Hide the icon for a new follower in notification stream. */
.activity-type-follow {
visibility: hidden;
}
/* Replace it with an emoji. */
.Icon--follower:before {
content:'😄';
visibility: visible;
display: inline-block;
position: relative;
vertical-align: middle;
line-height: 18px;
font-size: 15px;
}
/* ------------------------------------------------------------- */
/* This code changes "Likes" to "Favorites" on the Profile Page. */
/* ------------------------------------------------------------- */
/* Remove 'Likes' on Profile Page */
.ProfileNav-item--favorites .ProfileNav-label {
visibility: hidden;
}
/* replace it with 'Favorites' */
/* Thanks to @pbausch and @mathowie for a fix here! */
.ProfileNav-item--favorites .ProfileNav-label:after {
content:'Favorites';
visibility: visible;
margin-left: -30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment