Stylish is a popular and amazingly powerful add-on for Firefox (and Chrome!) that lets you modify how different websites look in your browser. Of course, Stylish doesn’t change the websites directly on their servers, nor does it affect how they look to other users; the modifications apply only locally. They are written in CSS and function much like the concept of skins for desktop applications. Stylish “skins” are called user styles, and literally thousands of them are available for free on the official Userstyles.org website. However, it’s also possible to write your own styles, and it’s not too difficult.
How Does Stylish Work?
You can install Stylish like any other Firefox add-on: from the official add-ons website or from the about:addons page by clicking the “Get Add-ons” tab. Stylish creates a toolbar icon, and the menu is accessible by clicking it. All user styles you’ve installed or created are in the “User Styles” tab on the Add-ons page.
Here you can edit and temporarily disable them or remove them altogether. Firefox will notify you when it finds an update for your styles, as it can do this automatically for those that were installed from Userstyles.org. If you want to create your own styles, options for that are located in the Stylish menu.
Since user styles are pieces of CSS, they can only affect the elements of the interface that CSS allows for; namely, fonts, colors, transparency, images and the arrangement of elements on a web page. Before writing your first Stylish script, it might be a good idea to get acquainted with the types of styles supported by Stylish.
Types of User Styles
There are three types of user styles: App, Global and Site.
App styles modify the look of Firefox itself; while they’re not as versatile as Firefox themes, you can use them to change the look of empty tabs and speed dial tabs, personalize your start page, modify the color and size of scrollbars and a few other elements of the browser window. Global styles affect all websites you visit from the browser they’re installed in. They usually change fonts, modify text and background colors, or transform your cursor. Site styles are the most popular, and they apply to individual websites, specific URLs, domains or subdomains. The changes range from simple font and color adjustments to complete look and feel overhauls. Site styles are often used by nostalgic folks who “hate” the new YouTube or Facebook redesign, but they are also useful for hiding ads, social media buttons, and overlays.
Clicking the “Write new style” option in the Stylish menu opens the editor. There are two editing modes: Orion (pictured below) and default, which can be activated by changing the extensions.stylish.editor value to 1 in about:config.
Every user style begins with the @namespace declaration, followed by url(http://www.website.com);. Site-specific styles also contain a @-moz-document rule, which can take one of four types (url, url-prefix, domain, regexp), depending on whether you want to affect all URLs on a domain or just the specified one. When defining URLs, you can’t use wildcards (for example, you can’t write domain(*.website.com)), but regular expressions with wildcards are permitted. The Stylish wiki page on GitHub offers more information about setting up a user style. To determine which elements of a website to include in the user style, you can rely on Firefox Web Developer tools; more specifically, the Inspector which you access by pressing “Ctrl + Shift + C”. In the console that opens at the bottom of the window, you can select different elements of a website, check their names and copy the necessary code to your user style in the editor tab. Unless you want to modify something really specific or apply a style to some obscure website, there’s a good chance you’ll find the exact style you’re looking for in the Userstyles.org collection. Their styles cover the most popular social media websites, news portals and web apps. Although there are a few painfully bad specimens (primarily in the Tumblr category), most user styles are beautiful, completely functional, and often updated. Here are a couple of recommendations to get you started.
App Styles
Simple Start Page – a customizable about:home style with optional animated logo.
Colorize Firefox Buttons – brings some color into the new Firefox menu.
Firefox Panorama Metro – makes your Firefox tabs in the Panorama (All Tabs) view look like Metro UI tiles from Windows 8.
Also try Australis Rounded Small Tabs if you want to change the shape and size of tabs in the Tab Bar.
Global Styles
Global Dark Style – makes all websites dark so they will fit well with your dark Firefox or desktop theme. Similarly, Global Font Size forces all websites to adhere to your browser font settings.
Site Styles
Perfect Facebook Theme – one of many fantastic Facebook facelifts available on Userstyles.org.
Minimal Twitter and Tweetdeck Metro Light bring the best of Material Design and Metro UI to your favorite web apps.
Other social media: Reddit Revamped – a minimalist redesign of Reddit that makes it less cluttered and more pleasant to read. Tumblr, The Old Design – for all Tumblr users unhappy about the new look. Remember Goodreads and its old-fashioned vibe? Goodreads Personalized makes it look much more modern.
For improved readability on Wikipedia, try Wikipedia Minimalistic and Wikipedia Readable Hyphenation. With Trello Clear and Trello Ultimate Flat, you don’t need a Pro version to customize your favorite productivity app.
Last but not least, with Stylish you can make Gmail and Google Search look like Outlook:
Do you enjoy customizing your web browser? Have you tried Stylish? Let us know about other cool and useful Stylish scripts in the comments.
