When searching for content on a specific subject, it can be frustrating to be bombarded with distracting click-bait thumbnails.
Fortunately, Safari on Mac has a helpful feature that allows you to add a custom CSS stylesheet.
In order to enable custom CSS in Chrome or FireFox you’d need an AddOn such as Tampermonkey or CustomCSSforFx respectively (I haven’t tested them tho).
However, other web browsers may require an additional extension to customize page appearance.
The code
/* YT */
#related,
ytd-section-list-renderer[page-subtype="home"],
#masthead-ad,
ytd-rich-grid-renderer,
ytd-mealbar-promo-renderer
{
display:none !important;
}
ytd-browse[page-subtype="home"] {
background-color:gray;
/* here is my YT background wallpaper, leave it or use a different url */
background-image:url('https://webshare.mattr.co.uk/youtube-bgd.jpg');
background-size:cover;
background-attachment:fixed;
background-position:50% 50%;
min-height:90vh;
}
#content {
min-height:100%;
}If you’re interested in viewing whatever the YouTube algorithm has come up with, even with a “cleaned” homepage, simply click on the “Trending” link.
A little extra
For those looking to enhance the readability of Wikipedia articles, here’s a CSS snippet that can help. It changes the default, tiny, sans-serif font to a slightly larger Georgia font and limits the length of a verse.
/* Wikipedia */
.mediawiki .mw-content-ltr {
font-family: Georgia, serif;
font-size: 17px;
line-height: 1.6em;
}
.mediawiki .mw-content-ltr p {
max-width: 36em;
}
Conclusion
In just a few lines of custom CSS code, you can improve the appearance of your favorite websites and even remove unwanted content.
12 Comments