Pinterest Stumbleupon Whatsapp
Ads by Google

stylish for chromeWeb designers have an almost impossible job. They need to come up with one design that pleases everyone. When talking about a service like Gmail, used by countless millions of people all over the world, you can really drop the “almost” part – it’s just impossible. Even if a redesign is well liked by most people, there will always be users who really don’t like the new look.

Sometimes there are enough of these users to force a company to backtrack, like Google recently did You Can Now Switch Your Gmail Icon Buttons Back To Text [Updates] You Can Now Switch Your Gmail Icon Buttons Back To Text [Updates] Read More with the Gmail icon buttons. But what if there’s something you really hate, and the company doesn’t change it back? Are you stuck with it forever? Thanks to user styles, you can fix such problems yourself.

Introducing Stylish

stylish for chrome

Stylish is a free add-on available both for Firefox and Chrome, and it lets you do something pretty magical – apply your own styles to webpage elements. Even if you’re not a web developer and you’ve never written a bit of CSS in your life, this is much easier than it sounds. You can use Stylish to transform websites completely (as I will show you in the next section), but even more importantly, you can use Stylish to fix small annoyances in minutes.

For example, I had a problem with the default font size in Gmail. The interface was fine – I didn’t want to zoom in (Ctrl +) with my browser, because that would increase the size of all interface elements and be really ugly. I just wanted a way to make the message font slightly bigger.

With Stylish, it was really simple, and I’ll show you how. But before we look at creating your own user styles, let’s talk about leveraging other people’s work.

Ads by Google

UserStyles.org

stylish for firefox

If something is getting on your nerves, it is entirely possible you are not alone. UserStyles.org is a website that lets users share styles they’ve created. Above you can see a style (Add labels to toolbar icons) recommended by MakeUseOf commenter RandyN in reply to our story about the Gmail icon buttons You Can Now Switch Your Gmail Icon Buttons Back To Text [Updates] You Can Now Switch Your Gmail Icon Buttons Back To Text [Updates] Read More . This style lets you keep the icons, but add in text labels – something Google won’t let you do.

UserStyles.org is great, but it is not perfect. Some of the designs try to do too much (change the appearance of a website entirely), and some are for old versions of websites and are now broken. If you’re trying to fix something small and can’t find it on UserStyles.org, perhaps your best course of action is to do it on your own.

Creating Your Own Simple User Style

stylish for firefox

To create your own user style, you first need to know what element of the page you’re trying to change, and then what change you want to make. So, to get started, right-click whatever it is you want to change, and pick Inspect Element. You should see something like this:

stylish for firefox

Firefox darkens the rest of the page, and draws a very clear frame around the element you’ve selected. Above that element, the text that says div#2d6.ii.gt.adP.adO, is a bunch of CSS classes, along with one ID (the part that starts with #). This is the selector that affects the styling for this element. Along the bottom of the screen there’s a navigation bar that lets you “traverse the DOM tree“, or in simpler words, go up and down in the hierarchy of elements leading to the element you’ve picked.

The name of the game here is to pick the element you wish to style, and make the selection not so narrow that it won’t affect everything you want to affect, nor so broad that it would mess up other things.

I clicked one element higher, div.gs, just because I like its name (seems like something that won’t change too soon, but that’s a complete guess on my part). It affects the entire message area. Once the area you wish to style is selected, click the Style button on the bottom-right corner, to open the Rules pane:

stylish add on

I know, it’s scary at first. But this is where you see the different CSS rules that affect the element you selected, and this is where you can make your own temporary modifications and see their impact on the page in real-time, without reloading it. But what should you change? Click the Properties button and uncheck “Only user styles”:

stylish add on

Here you can see a complete list of all CSS rules. You can scroll down the list until you find a rule that makes sense for what you need (font-size in our case), and even click the question mark next to it to open an explanation page. So, now we know we want to tweak the font-size property for all div elements that have a class of “gs” (written in shorthand as div.gs).

The only question that remains is what we want its value to be. For that, we go back to the Rules pane and start playing around:

stylish add on

40 pixels may be a bit crazy, but you get the general idea. Play around with this, and feel free to add any other properties, until you get the look you were going for. Be sure not to close the page, because your changes are not saved anywhere.

Saving Your New Style

stylish[18]

Once you’ve got this part of the site to look just like you want it, it’s time to save it. Click the Stylish icon in the add-on bar, and select “Write new style”. Stylish would then want to know on what pages it should apply the new style – in our case, pick the second option, “mail.google.com”. Next, you will see this dialog:

stylish[20]

I have already filled it on. Obviously, I picked a name and some tags for the style. But the real stuff happens within the code: Line 3 was already there – Stylish put it in place so that it knows on what pages the style applies. But line 5-7 are mine. Let’s analyze them:

Line 5: div.gs {  – this part you should recognize. This is the element we’ve decided to style. The opening brace means we’re now going to write some CSS rules.

Line 6: font-size: 20px !important; – that’s the rule we wish to change (font-size), followed by its new definition (20 pixels), and then by an “!important” declaration, which means Firefox would obey this rule even if an element “closer” to the text tries to set the font size to something different.

Line 7: } – closing the style definition.

Next, click Preview and marvel at your work:

stylish for chrome

And finally, once you see that it’s working, click Save.

This Is Not A Complete Guide

I am well aware that to keep this short tutorial within the bounds of a single post, I’ve had to make a number of leaps and jumps. If you were confused along the way, please accept my apology. CSS is tricky at first, but it is not so complicated once you get the hang of it – and customizing websites locally remains one of the best ways to learn.

If you were confused by anything, please ask me below and I’ll do my best to help.

  1. SEMA
    May 17, 2015 at 3:04 pm

    >Web designers have an almost impossible job. They need to come up with one design that pleases everyone.

    NO!!! You are absolutely one million % WRONG!!!

    Browsers have lots of options that each users can set according to their own preferences, what the damn "web designer" morons need to do is provide information and leave the formating to the browser and the users preferences!

    And Firefox needs to shout a LOT louder about user styles, it's taken me nearly 20 years of suffering before I realized that I didn't have to just accept the complete and utter crap that 99.99% of web designers spit out :-( Just look at this comments section, some idiot with a 20 year old monitor put in a pixel width specification, and as a result it uses less than 20 % of the width on my monitor, the rest is just useless blank space :-(

  2. Ernest
    June 14, 2012 at 2:36 pm

    Thank you very much! {
    to-Erez-Zukerman {his-value: 1000000 tx !important;}
    }

  3. istivan
    May 6, 2012 at 10:13 am

    This is cool; I use it for Firefox. On Chrome, I use Stylebot (

  4. purity matters
    May 4, 2012 at 4:55 am

    your "lines 5-7 are mine"

    SKIPS entirely over how to get code from inspector into stylish ASSUMING people new to this as you imply is your audience will somehow already posses this knowledge

    d'oh

  5. toutes les étapes clefs et les annonces radio comme si vous y étiez !
    May 3, 2012 at 10:49 pm

    I've been exploring for a little for any high-quality articles or weblog posts on this kind of house . Exploring in Yahoo I ultimately stumbled upon this site. Reading this info So i am satisfied to convey that I have an incredibly excellent uncanny feeling I discovered exactly what I needed. I such a lot without a doubt will make sure to don?t omit this website and provides it a glance regularly.

  6. Karl Gephart
    April 16, 2012 at 8:38 am

    Fantastic explanation and screenshots, Erez! Then again, I know my CSS! LOL! I had heard of Stylish, but kept forgetting to play with it. Now, in Firefox, I've gotten rid of Google's annoying black toolbar and Facebook's timeline. That is, until they change their div names again! Thanks!

    • Erez Zukerman
      April 16, 2012 at 8:40 am

      Sure thing, Karl! I'm glad I could help. And yes, Google's classnames are notoriously annoying, I know. :)

Leave a Reply

Your email address will not be published. Required fields are marked *