Distraction-free YouTube

It is often difficult to search for a content on a particular subject with all those distracting click-bait thumbnails scattered around.

YouTube homepage: original (left) and customised (right)

Luckily, Safari on Mac has a useful function allowing you to insert 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).

YouTube video page: original (left), customised (right) – without ‘suggestions’ sidebar.
YouTube video page with chat: original (left), customised (right) – without ‘suggestions’ sidebar.

Other browsers then Safari might need an additional extension to customise the look of pages on the web.

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%;
}

Access the junk content

There is an easy way to see whatever YouTube algorithm has come-up with, even with a ‘cleaned’ homepage. You can just click on the ‘Trending’ link. Personally, I am never tempted to do so…

The ‘Trending’ link on customised YouTube homepage.

A little extra

Below there is a CSS snippet to improve the readability of Wikipedia articles. It changes the default, tiny, sans-serif font to slightly larger Georgia as well as 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;
}
Wikipedia article: original (left), customised (right)
Wikipedia article: original (left), customised (right)

Conclusion

With few lines of a custom CSS code you can tune your favourite websites look and even remove unwanted content.

You may also like…

Add a comment