Using Stylish to Hide Webpage Content

Stylish is a Firefox addon that is useful to inject custom CSS styles onto webpages viewed by the user. It is quite easy to write Stylish scripts to remove or hide unwanted content that is present on webpages.

For example, the comments on Youtube are not worth anyone’s time and one might want to hide them. Or one might find certain Suggestions content on a Facebook page to be irritating. This and any such portions of webpage can be easily hidden by writing Stylish scripts. Here is how:

Finding the CSS Style

Content on a commercial webpage is typically styled using CSS classes or IDs. To hide or manipulate certain portions of a webpage, we need to know the name of the class or ID that is applied on it.

One convenient tool for this investigation is the awesome Firebug addon for Firefox. Once it is installed, open the webpage (say Youtube.com) and click the Firebug icon in the status bar. Firebug shows the HTML content of the webpage being viewed. When the mouse cursor hovers over a HTML element in Firebug window, the corresponding portion of the rendered webpage is highlighted. By navigating the HTML content using this one can figure out the CSS class or ID being used for any portion of the webpage.

For example, using this method we can figure out that the comments section of the Youtube webpage is enclosed within the following HTML code:

<div id="watch-discussion">
Youtube comments are here.</div>

Writing a Stylish Script

Install the Stylish addon for Firefox and open the webpage (say Youtube). Click on the Stylish icon in the status bar and choose to Write new style for that webpage. Stylish opens with the default template of Stylish code already written. Just add our new CSS style for that webpage in between the curly brackets.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("youtube.com")
{
/* Styles go here. */
}

The property-value pair of display: none; is the key to hiding content. To hide the comments section of Youtube, we need to apply this property-value pair on the section of the Youtube webpage that contains comments. We already know (see above) that it is enclosed in a div element with ID watch-discussion. To hide it we provide a display: none; style for that element-ID as follows:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("youtube.com")
{
    div#watch-discussion
    {
        display: none;
    }
}

That is it, you have now hidden the comments section of Youtube! Sometimes, ANDing or nesting of CSS classes, IDs or HTML elements might be required to hide webpage content. See my Basics of CSS post for information on writing styles to deal with these cases.

Hope that helped you to write simple Stylish scripts to mould the Internet to suit your tastes. This is especially useful if you want a distraction-free reading or browsing experience. 😊