Blog

Install User Styles using the Stylish Addon for Firefox

Firefox:

You can install the Stylish addon for firefox and go to UserStyles.org to install scripts easily. The Stylish addon also allows you to edit user styles and create your own.

[ UserStyles.org Screenshot ]

Opera:

You can't use the Stylish addon with Opera, but If you go to UserStyles.org you can browse user styles and install them in Opera using the "Load as user script" button, or the "Load as plain CSS" button (If available).

If the "Load as plain CSS" button isn't available, click on the "Load as user script" button, and when the page opens showing the script, select all, copy, and paste the script into notepad, or whatever text/html editor you prefer. Save the file in your User Scripts folder. If you don't have a User Scripts folder, create one in a directory of your choosing, then save the User Script into the folder you created.

To apply a user script in Opera:
Go to Preferences (Ctrl + F12) >> Advanced Tab >> Content >> Javascript Options... - Under User Javascript Files choose the folder that contains your User JS files. Click, Ok, Ok to save and close out of both dialog windows.

If the "Load as plain CSS" button is available, click the button, and when the page opens showing the script, follow the directions below for manually installing user styles in Opera.

More Info on Stylish:
Using Stylish - Coding user styles

Opera - Manual Install

In Opera copy and paste the user style code in your user.css file and save it. If you don't have one, you can create one. I use Windows Vista, so I created mine and put it here: C:\Users\[User Name]\AppData\Roaming\Opera\My styles. With Opera, you can put the user.css file anywhere you want, and name it anything you want. I just put mine in the Opera AppData folder so I wouldn't delete it by accident cleaning up files.

Go to Preferences >> Advanced >> Content >> Style Options... and in the Style Options Dialog, under My Style Sheet choose the CSS file you created. Then click Ok to close out of each dialog window.

In Opera you can also add user styles to a style sheet that is site specific. (Note: I'm using Opera 10 Preview, so I'm not sure if this is the same for previous versions.)

Site Specific Styles in Opera:
Right click on a blank area of the site you want to add a style to, and choose Edit Site Preferences... from the popup menu. When the Site Preferences dialog window opens, click on the Display tab.

Under My Style Sheet, click the Choose button, and locate the CSS file your Created. Click Ok to save and close the Site Preferences dialog. If you use the site-specific way, you should name your css file accordingly.

Example: my_yahoo.css

That's it. You will have to reload the page(s) to see the changes. If you decide you want remove the user styles you added, just remove the css code from the user.css file or remove the path to the CSS file in the Site Preferences dialog under My Style Sheet then Reload the page(s).

Learn more about Opera user style sheets

Firefox - Manual Install

If you are using firefox, the user style css will go into your userContent.css. Either rename the file userContent-example.css to userContent.css, or just create userContent.css. If you use Windows 2000, XP, or Vista you can find and/or create the file using the paths below. If you are a Mac or Linux user click here for the path to your profile folder.

On Windows 2000/XP:
c:\Documents and Settings\[Windows Login Name]\Application Data\Mozilla\Firefox\Profiles\[profile name]\Chrome

Windows Vista:
C:\Users\[User Name]\AppData\Roaming\Mozilla\Firefox\Profiles\[profile name]\chrome

After you have located (created or renamed userContent.css) then paste the user style css into userContent.css, save it and restart Firefox. If you decide you want remove the user styles you added, just remove the css code from the userContent.css file and restart Firefox.

Lastly, in Firefox, if you want the user style you added or created to only apply to one domain/site (example: www.yahoo.com) then you can add the code below along with your user style:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.yahoo.com") {


/* YOUR USER STYLE CSS CODE HERE */


}