So, where’s the user style for making 24 Ways display correctly in Opera? ;-)

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!

Great resource! We’re assembling sources of information for our clients and I’ll be sure to add your site to that list.

Thanks,
Shawn

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.

Brilliant, I kept reading about hacking sites CSS but never had the time to put it all together.

This is a brilliant tutorial Jon.

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.

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

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

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! :)

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!

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 :-)

Great great great! And: I love CSSEdit too..

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.

You, sir, are the king of CSS-hackers. Learned a lot from this article! Great to see such an odd subject getting some attention!!

http://24ways.org/code/user-styling/5.txt

That was definitely something I wasn’t expecting, can anyone elaborate on this?

Great tips there Jon, thanks!

Now I’m off to do some hacking :)

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.

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.

This is great. I can now eliminate all those annoying ads from some of the site it read daily.

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. :/

Wow, this is awesome! I tend to do these things on the fly with Firebug, but I’ll definitely have to try out Stylish for a more permanent solution.

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!).

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. :)

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!

How have I not come across Stylish before now?! What a gem. Thanks as always Jon.

I know what I’ll be doing this morning…

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!

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!

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.

I was hoping for a CSSEdit article, but it could not be. Really nice write-up on customising websites. Lovely how you sneaked in Helvetireader with the folder icons!

Great article Jon!

Like @Alun, I find it’s mostly about having the time to put it into practice.

Now to try and get it working in SSB apps like Fluid.

I’ve been using this quite a while for the ugliest, most useful site on the internet, called Useit.com :-)

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?

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.

@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.

@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.

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>.

Such simple ideas to make your web browsing experience much smoother and less cluttered.

awesome article..thanks!!

Nice article. Glad that you drew my attention to Stylish, always seemed like too big of a pain to bother with before.

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.

Wow….how did i not know this existed? thanks for the great article!

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.

Nice post. I’m jealous of people who are so good at design. I struggle for hours making just average layouts!