Skin Any Website With User Styles for Opera and Firefox

Skin any website with Stylish for Opera and Firefox

Opera is packed with dozens of cool little features which even regular users may not be aware of. User Stylesheets (UserCSS) is one such feature. When combined with Site Preferences, it permits styling specific webpages and allows developers to design skins even for websites that may not support them.

Stylish extension allows Firefox users to enjoy the benefits of UserCSS. In fact Stylish took things a step further by addind an easy to use GUI and supporting skinning of various aspects of the browser itself using UserCSS.

Although UserCSS has remained a largely ignored and under-utilised feature of Opera, Stylish has managed to build up quite a significant user base. You can find thousands of styles for Stylish on UserStyles.org. And since both Opera’s and Stylish’s implementations are similar a large number of Styles on User Style will work with Opera also.

Arrow Using UserCSS in Firefox

Using UserCSS in Firefox is really simple. All you need to do is install Stylish. Many user styles are also available as a userjs. If you wish to use them as a userjs, you will have to install Greasemonkey. Installing a new style is simply a matter of heading over to userstyles.org and clicking on “Install with Stylish” button.

Arrow Using UserCSS in Opera

Utilising UserCSS in Opera is slightly more complicated (but nothing to be afraid of).
Arrow I would highly recommend that you install Stylish Clone for Opera (Menu). It isn’t essential, but it’s something you would find useful if you plan on using UserCSS extensively. Stylish for Opera also adds a few additional features like inbuilt support for Adblock FiltersetP. Alternatively you can install this button.

Arrow Now comes the critical part. First head over to userstyles.org and find the style you wish to install. Not all styles will work and styles that deal with Firefox’s appearance obviously won’t have any effect.
Click on “Show Code” and copy paste the code to a text editor (Notepad). Delete the line:

@-moz-document domain(domain1.com), domain(domain2.com) {
Scroll to the bottom of the document and delete the final closing brace (‘}’).
Save the file somewhere on your computer as filename.css.
Now open the target domain in Opera. Right Click on an empty spot in the page and select Edit site preferences. In the display tab enter the path to the stylesheet.

User Style in Opera

Arrow Basically to use a User Style in Opera you need to get rid of @moz-document tag. If there are multiple @moz-document { } tags, in that case you will need to get rid of all of them (along with the accompanying braces). If the target domains are different you may also split the contents inside the @moz-document tag into separate files for separate domains.

Arrow Some of the popular User Styles are also available as a Greasemonkey script. Opera is capable of running most of the Greasemonkey scripts. You need to save these scripts in a directory (of your choice). Just make sure that their extension is .user.js. Now go to Tools–>Preferences–>Advanced–>Content–>Javascript Options. Enter the path to your userjs folder and restart Opera.

Here are five awesome looking user styles for five websites I use regularly:

Arrow i) Google: I love the Mac OS X Snow Leopard Style. It’s elegant and pleasing to the eyes. I use it in combination with two other styles to remove ads and change the font to Tahoma.

Mac Snow Leopard Skin for Google

Opera users can download the Opera compatible version from here (I have modified this style to restore the original single column layout of Google).

Arrow ii) Wikipedia: Modern-Wiki is a must have for anyone who uses Wikipedia regularly. This stylish and elegant skin gets rid of all the clutter and devotes the majority of the screen space to the content.

Modern-Wiki Skin for Wikipedia

Opera users can download the Opera compatible version here.

Arrow iii) Facebook: Vista Ultimate Skin for Facebook by HeartRipper is massive. In fact it is so big that he had to split it into two parts (taskbar skin and window skin) . Besides seriously sprucing up Facebook’s appearance this skin also gets rid of all the advertisements.

Vista Ultimate Skin for Facebook

Opera users can download this skin from here (it’s a slightly modified version which uses Tahoma font as default).

Arrow iv) YouTube: There are quite a few good skins for YouTube. But Dark Gray Redesign is one of the few that manages to strike a balance between usability and looks. It provides a clean, dark and sophisticated appearance which is easy on the eyes. I also use the Google Tahoma -unified font and Youtube CleanedUp along with it.

Dark Grey Redesign Skin for Youtube

Download link for Opera users.

Arrow v) Last.Fm: Celuie has created some stunning Last.fm skins. Savana Beige is my favourite, but you should really check out all of his skins and use the one which suites you.

Savana Beige Skin for Last.fm

Download link for Opera users.

Hopefully, these wonderful skins will help you get started. Keep exploring userstyle.org and improve your surfing experience with User Styles.

8 Responses to Skin Any Website With User Styles for Opera and Firefox

  1. chinmoy July 20, 2009 at 3:19 pm #

    nice find. So this is the idea you were talking about!
    .-= chinmoy´s last blog ..A Better Way To Browse Youtube =-.

    • Pallab July 20, 2009 at 3:24 pm #

      Yep. Your post inspired me to write about this. In fact I had almost forgot that Opera had this feature!
      Btw, even if you use Google Redesigned you should check out userstyles as there are some stuff specifically meant for Google Redesigned users which will further improve the appearence/functionality of Google products.

  2. ganda July 27, 2009 at 7:46 am #

    very nice dude. Actually, I using userstyle.css just to make rich interface become simpler. But after i saw the screeenshot of your facebook profile, i think i wanna use that userstyle. thankyou very much dude.
    .-= ganda´s last blog ..WordPress Tip : Create Highlighted Author’s Comments =-.

    • Pallab July 29, 2009 at 11:21 pm #

      I am glad that you liked it.

  3. Conor August 11, 2009 at 9:47 pm #

    It was great while it lasted, but it slowed down my computer. How do you change it back?

    • Pallab August 11, 2009 at 11:20 pm #

      UseCSS may have some performance impact, since additional amount css needs to be rendered.

      For Fx simply uninstall the stylish plugin.
      For Opera delete your custom userstyles. Although a better approach would be to delete the location of userstyles that you have specified through Site Preferences.

  4. Brian Talk September 19, 2010 at 9:02 am #

    Thanks to Open Source, there seems to be a work-around for everything. It should be fun changing skins for websites like Facebook.

  5. used tires January 15, 2011 at 5:37 am #

    Wow, thats pretty awesome, I had no idea you could individualize websites like that!

    -Jean

More in Browser, Featured Post, Firefox, Opera (77 of 136 articles)