EDIT These rules do not work with the current desktop-browser design for Twitter (mid-2019). Try uBlock Origin with these rules instead.
But if you're somehow using an old Twitter design…
In Safari's preferences, the ability to choose a custom CSS file is under the Advanced tab. As far as I can tell, you must quit and re-open Safari when you make changes to the file to see those changes take place on the sites you're browsing.
| /* You will need to restart Safari for changes to take effect. */ | |
| /* Twitter: hide trends, hide who-to-follow */ | |
| .Trends.module.trends, | |
| div.wtf-module, | |
| .WtfLargeCarouselStreamItem, | |
| aside[aria-label="Who to follow"], | |
| div[aria-label="Timeline: Trending now"] { | |
| display: none !important; | |
| visibility: hidden !important; | |
| } | |
| /* Twitter: hide likes recap */ | |
| .stream-item[data-item-type="recap_entry"] { | |
| display: none !important; | |
| } | |
| /* Twitter: hide promoted tweets */ | |
| .promoted-tweet { | |
| display: none !important; | |
| } | |
| /* Twitter: hide likes-in-feed */ | |
| .stream-item[data-suggestion-json*="ActivityTweet"], | |
| .stream-item[data-suggestion-json*="RecycledTweetInline"] { | |
| display: none !important; | |
| } | |
| /* Twitter: hide likes-in-notifications */ | |
| .stream-item[data-component-context="generic_activity"] { | |
| display: none !important; | |
| } |
I'm trying this in Stylish for Chrome - Thanks @pat
Is there a way to inject site-specified styles?
@Antisunny not with Safari's own settings, no.
However, if you use uBlock Origin it's possible to specify site-specific CSS with their rules engine.
Also, it's worth noting that these rules for Twitter no longer work since Twitter changed their desktop browser design (mid-2019). There are other rules that may be helpful: https://gist.github.com/beep/9d78b409c54dd33d6722c0ed5e45c8b2 (but can only work with uBlock Origin, as Safari - and I think all other browsers - don't yet support the :has pseudo-class.
WTF module, indeed!