Skin Any Website With User Styles 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.

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.

Using UserCSS in Opera

Utilising UserCSS in Opera is slightly more complicated (but nothing to be afraid of).
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.

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.

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.

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:

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.

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

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.

Opera users can download the Opera compatible version here.

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.

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

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.

Download link for Opera users.

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.

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.