Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Install Stylish for your browser, then add this code as a new style that applies to the domain twitter.com. It let's you replace your fav button and notification stream icons with the emojis of your choice, and replaces "Likes" with "Favorites" on your profile page. You can also change the "Block" option under a user's drop-down menu to "Drop In…
/* 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! */
/* Hide the heart for un-Faved tweets. */
.ProfileTweet-actionButton .HeartAnimationContainer {
visibility: hidden;
}
.WebToast .HeartAnimationContainer {
visibility: hidden;
}
/* Prevent .HeartAnimationContainer from clipping emoji */
/* This overrides Twitter's default, set elsewhere. */
.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:'🍺';
/* 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:'🍺';
/* 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:'🍺';
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. */
.activity-type-favorite: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. */
.activity-type-retweet: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. */
.activity-type-favorited_mention: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. */
.activity-type-favorited_retweet: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. */
.activity-type-retweeted_retweet: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. */
.activity-type-follow: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;
}
/* ------------------------------------------------------------- */
/* Tired of clicking 'Moments' when you tried to click on */
/* 'Notifications'? Hide the 'Moments' tab. */
/* ------------------------------------------------------------- */
/* via Izzy Galvez @iglvzx on twitter. */
/* https://twitter.com/iglvzx/status/672900709596049408 */
.global-nav .moments {
display: none;
}
@mcnees

This comment has been minimized.

Copy link
Owner Author

mcnees commented Jan 8, 2016

The style should look something like this:
screen shot 2016-01-07 at 9 06 57 pm

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.