How to install custom userstyles in Opera - gHacks Tech News

How to install custom userstyles in Opera

So called userstyles can be used to change the look and feel of websites locally. Basic examples are to change the text color or size, the background color or the position of elements on a website. Most modern browsers come with capabilities to add styles directly or in the form of little files that include all the instructions.

One of the most popular destinations for custom userstyles is the userstyles.org web directory that lists thousands of styles for all sorts of purposes. When you visit the site you will notice that it recommends Firefox and the Stylish extension. There are however options available to install a style in Google Chrome or Opera. While Google Chrome users can install Stylish for their browser too, Opera users do not have that option.

It may be confusing at first to install styles in Opera, but once you know how it is done, it is not really complicated at all. Let me walk you through the installation of a custom user style.

  • The first thing that you need to do is download the style from the website. The userstyles website detects the browser automatically, if not, select Opera from the list of supported browsers.
  • Locate the "install as user JS"link, right-click it and select save linked content as from the context menu.

opera user style download

  • We need to locate the user CSS directory now on your system. You need to click on the Opera button and select Help > About Opera from the options to do that. Locate the User CSS directory under Paths here and open the folder on your local system.

opera user css directory

  • All that is left to do is move the downloaded style file into the folder.
  • Note that you need to reload pages that have been open before you moved the file into the user CSS directory of the browser.

To uninstall styles, simply delete them from the directory or move them out of it. Reloading is necessary here as well to complete the uninstallation.

There is another option, which can be useful if you only have a .css file for a specific site. You can assign custom CSS files to individual sites the following way:

  • Open the website you have a custom CSS file for
  • Right-click on a blank spot on the site and select Edit Site Preferences
  • Switch to the Display tab here and click on Choose to pick the style sheet for the site you are on from your computer.

opera custom css style

Reload the page you are on to see the effects. To uninstall, simply remove the file from the same dialog again.

Update: As someone has pointed out, there is also an extension now available for Opera called Stylish which you can use for that purpose. It makes things a lot easier for Opea users as you can now install styles in the browser with a click.

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:

Comments

  1. Ngan Tengyuen said on November 22, 2012 at 7:25 pm
    Reply

    Not bad, just what I’ve been looking for in Opera. I wonder if it is available in Firefox.

  2. Katie said on November 29, 2012 at 3:37 am
    Reply

    I have a really stupid question but since I’m not the least bit tech savvy I have to ask: your instructions say to simply move the downloaded style file into the folder…but it doesn’t tell you how to do that. I’m 99% sure it’s something super simple that’s going to make me feel even more foolish for having to ask but I don’t know what I’m supposed to do now. I usually use chrome and it’s just so much easier…one click of a button.

    I went to user styles
    I found a style i liked
    i clicked the install as userjs link
    i’m looking at a big wall of code….

    now what?

    LIke, walk me through it like you’re explaining it to a very small, very slow child LOL.

  3. netmain said on February 11, 2013 at 1:50 am
    Reply

    nice ! but you don’t need this anymore, as there is a new extension to install the userstyles just in one click, with lot of other features ( auto update, import and export and editing )

    https://addons.opera.com/en/extensions/details/stylish-for-opera/

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.