User Styling

50 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Cole

    Great article Jon!
    We often forget that as web developers and designers we are (well, some of us) also web users – so nice to read something addressing this crossover and highlighting how our skills in the former can enhance our experiences in the latter.

  2. Jon, it was after seeing your article on skinning Google Reader that it dawned on me. I grabbed Firefox+Firebug and wrote my own “helvetica neue”-ish Gmail theme. And then put it into Stylish. But that wasn’t enough! Because the thing is… I’ve picked up the habit of using Fluid to access my GMail, so it was only a copy/paste away before I was using Fluid with user-styles. It just worked!

    I guess what I’m saying here is that after all this is done, you can use the styles you just created on your Fluid-created-site, as it supports userstyles out of the box.

    Great tips. Loved the img replacement. “Move over, Beethoven!” :D Thank you, sir.

  3. nik

    Thx for your article!

    For german readers: There was also a nice article in C´t magazine 20/08, that deals with the same subject. Additionally it consists a part about using Greasemonkey to totally ‘pimp up’ the whole interface with JavaScript. It’s a nice combination! We use it to rewrite the editor of our vBulletin Board and add some useful administration buttons.

  4. Jarryd

    Awesome sauce. Will definitely be utilising this for those annoying banner ads and such. Cheers and can’t wait for tomorrow’s article!

  5. Luke Robinson

    Hi Jon,

    Your readers will want to know about the Web Developer Toolbar by Chris Pederick. WDT supports adding User Style Sheets, targeting CSS selectors, and much more. Hands down, the best tool for hacking, er… reverse engineering.

    Web Developer Toolbar
    http://chrispederick.com/work/web-developer/

    Cheers!
    Luke

  6. Shawn

    Great article Mr. Hicks, I had no Idea this was even possible with other browsers, and I’ve been doing this with stylish for quite a while. I don’t think the subject would remain odd for very long.

  7. John Faulds

    Yeah, some interesting tips in this article. I’ve just installed Stylish and will be giving it a whirl. I’d already done something similar for Twitter in Opera (I use Opera for some things/FF for others), but it was really annoying when they’d keep changing their markup. :/

  8. Jarkko Laine

    Awesome stuff! I, too, learned a lot from the article and will try to put some of the lessons into action already today.

    I’m happy to have found this advent calendar. It’s quickly turning into my favorite one. Keep impressing! :)

  9. James Robertson

    Another great article!

    A tool I use for this is this Firefox Addon – CSS Viewer [https://addons.mozilla.org/en-US/firefox/addon/2104] – fantastic except for a bug inwhich it is hidden behind flash objects due to z-index (but since it is CSS itself, this can probably be fixed with user styling!).

  10. Nice one. I took the article as cause to do away with all the clutter that has forever annoyed me about www.bahn.de, the German Railways’ official website. Usually it’s filled with well-meant advice and tons of information for just about everything remotely related to (train) travel.

    Screenshot: default styling of www.bahn.de

    So I went and installed stylish, started to dig into their HTML structure and ended up with a clean homepage that caters to the only need I personally ever have when I go to their website: finding a connection from A to B.

    Screenshot: user-styled version of www.bahn.de

    Thanks Jon! A good way to start the day. :)

  11. prisca

    Jon,
    excellent article – I did use Stylish for the election banner on Twitter; just never really think of using it otherwise.
    But now you’ve got me going again – thanks :-)

  12. Pete B

    Cheers for the tips.

    I’ve just installed stylish, so hiding the banners should be a lot easier now than digging around for userContent.css!

  13. Davinian

    Like a lot of people I realised how easy this was when I blocked out the annoying US election bar on Twitter.

    This is a great article/tutorial, and can see this is going to be big in 2009!

  14. Jon Hicks

    Thanks for the kind comments so far!

    @Lee – I did elaborate on that in the article, or do you mean more information? There’s not much more to say!

  15. Steve Avery

    Great article Jon. I can see us fellow designers/developers experimenting more and having fun with this.

    General observation. Where you mention about the background image in the CSS (Data URI), and I quote:

    “It’s simply the image translated into text so that it can be embedded in the CSS, cutting down on the number of http requests.”

    I appreciate that this will reduce the number of HTTP requests but surely with numerous background images on sites these days this method will greatly increase the size of the CSS file(s). As I say it’s an observation and maybe food for thought?!?!

    Looking forward to tomorrows post.

  16. Daniel

    Wow, thanks for this i’m just getting to grips with greasemonkey now you tell us there is stylish as well. I could rewrite the entire web just for me!

  17. Andy

    Great projection Jon, I can see the site style tennis being quite an amusing game / challenge!

    I like the class naming idea on the <body> tag – consider it implemented!

  18. Andreas Carlsson

    Great article! This touches on a bigger branding-issue that I’m having; if you are running a business online and having a lot of client interactions online the styling/branding of the apps you are using will hurt your business.

    What you describe in the article is great for “personal use” but as a business owner I rely on, and pay for, services that I can’t customize visually to fit with the rest of my brand. So when my clients log in to, lets say Basecamp or Freshbooks, to work with me they never see my brand.

    What I think is needed in the future is some kind of “OpenBrand”-standard that works the same way as OpenID works. OpenBrand would be a unique place/url/identifier that contained information on colors, typography, grids, logos and other styling related elements.

    So whenever I sign-up for a web app I submit my OpenBrand, and the web app takes care of the rest for me – “branding” itself according to my preferences.

  19. Jason Karns

    Related to user styles, I’ve been toying with an idea now for nearly a year. On any new site that supports user profiles or ‘membership’ I have been thinking about adding a utility to allow users to upload their own user style and tie it directly to their profile. In this manner, their style would be applied to the site in any browser, on any machine (no need to have their style installed locally or require any browser extension). Of course this opens up security holes, but as far as I can see, stripping URLs (force data: URIs only) and stripping IE CSS expressions, I don’t see any other drawbacks. Perhaps requiring that any user style pass the W3C CSS validator as well (though that will limit certain techniques such as browser-specific prefixes)?

    Thoughts? Comments?

  20. Derek Nelson

    I vaguely knew this type of thing was possible but I never really saw any practical use for it… until now…

    Definitely something to have a play around when time permits, although I think it may get addictive when you come across dodgy sites.

    Many thanks… dN

  21. BW

    Hi Jon,

    Great article!

    A good friend of mine is always telling me……

    “You will be forever learning in this business”, how right he is, today I have learned a few things and made one interesting discovery!…STYLISH!!

    how have i never heard of this great little add-on. I also particularly enjoyed the bit about reducing http requests by inserting images translated into text so that it can be embedded into css, very handy! I had never thought of that! and there are a number of ways that good use could be made of it.

    Just in case its of interest to anyone, I am quite fond of the Aardvark extension which allows you to mouse over elements within a page and display their class or ID, a very usefull way to quickly find out such information without having to loose any browser space! I use it all the time, I’m sure many others do, but just incase you don’t here’s the URL:

    Aardvark Extension

    http://karmatics.com/aardvark/

    Oh how I love the 24ways to xmas time of the year!

  22. Chris Korhonen

    Good tutorial, though I have to admit that I am a little divided on user styles.

    Whilst I think it can be useful to allow users to modify styles if they (for example) have special needs, putting this in the hands of the mainstream user could be a recipe for disaster.

    It is already time consuming enough to get a site rendering correctly in a range of browsers – by throwing this technique into the equation you introduce an unknown variable to the website developer, and if there is a problem as a result its the poor developer, and not the user, who will likely get blamed.

    I’ve seen this happen a lot with the Firefox extension GTDInbox which adds functionality to GMail by injecting CSS/Javascript into the page – usually when Google makes a major update something breaks, either making the extension unusable or in some cases making the entire site unusable.

    There is also the other argument that by using this to remove entire sections of websites, you are depriving the webmaster of ad revenue or even the chance to promote other products/services.

    I like the proposal advocating an OpenBrand standard, though I don’t think this would necessarly resolve both the problems above.

  23. Michael Chui

    Great article.

    @Andreas Carlsson: I like the OpenBrand idea. It might go well as a CSS sheet conforming to some particular standard, and it’d definitely be useful for things like fansites and media kits.

  24. Lee

    Just on the Data URI part, do you mean that the Images are encoded as a literal and displayed with no further requests to the server? If so I’ve actually never heard (or imagined) such techniques being even available. Anyways, I’m just wondering how wide support for these are since I have a feeling that we won’t get that lucky with them.

  25. James

    great stuff… I’ve been using this technique for a couple of years already – my current setup gets rid of all the irritating advertising on Windows Live Mail, Facebook and Last FM… very handy

  26. Andreas Carlsson

    @Chris Korhonen I agree with you that our OpenBrand idea does not solve the two problems that you are describing. But the first problem you describe is based on a non agreed change of style and non agreed add of functionality. And that will lead to both brilliant customization as well as disasters depending on the skills of the user that is making the changes. And that problem can never be solved in an easy way.

    The other problem you talk about; removing parts of sites thus fiddling with ad-revenue and promotion. Yes that is bad but it is equally hard to solve as your first problem.

    Our idea with the OpenBrand standard is not trying to solve those two problems.

    What me and Jaan Orvet is asking for is a standard for agreed changes of styling, and we think that the OpenBrand idea is best suited for webapps and services, not public sites.

    If you as a site owner or app-provider say “Ok, I follow the OpenBrand standard” then you know what parts of your app/service that will be open for user styling. And on the other side the user will know what they can change. It all has to be done in a controled way so that everyone knows the guidelines and it does not interfear with the overall development.

    The main goal of OpenBrand is not to remove parts of the site or change functionality. It’s more to, as @Jason Karns is talking about, changing the look and feel of the app/service that I buy into so that it fits in with my (as a user) brand.

  27. Andreas Carlsson

    @Michael Chui I’m glad that you like the idea!

    Exactly, conforming the css, or at least parts of the css. The ideal situation would be a single source where the user stores his/hers styling info and then the site owner or app-provider can include that info into the users css.

    In that way you as a developer doesn’t get users it “interfere” with your development by uploading css-files.

    And you as a user doesn’t have to do the styling over and over for every app/service that you sign up for, that is done automatically when you sign up to a app/service that is supporting the OpenBrand standard.

  28. Peter Petrus

    I love hacking sites with UserCSS. You can even turn ugly, table-based and center/font-tags-filled atrocities into pure minimalistic beauties. <a href=“userstyles.org/styles/2561”>Like this</a>.

  29. Per Wiklander

    Re: Data URI
    It immediately got me thinking if creating an encoding script to run before deployment. So that I can work with normal non mind altering CSS and background images and then turn it into optimized CSS with data: URI right before it is deployed to the web server. As always when I get ideas like this the next though that hits me is “someone else should’ve thought about this before” and in this case it was true:

    Check out http://duris.ru/faq/ for info about the technique and a great tool to do exactly what I wanted.

  30. Joel Marchesoni

    You may also want to check out the Console² addon for Firefox. It will show errors in CSS, chrome, Javascript, and a few others all in the same window. That way you don’t have to switch between FIrebug and the DOM inspector if you’re editing both styles.

Impress us

Be friendly / use Textile