August 6, 2006

Opera – how to make User Stylesheets

One of the beauties of Opera is that you can set up alternative stylesheets to apply within Opera. Now, it's not that I am so picky about the way people wish to design their sites, but that some sites are just difficult to read. In particular — for me — are sites with very bright colors, or light text on dark backgrounds; these tend to be (again, to me) either blindingly bright or they throw off my color sense. Since so much of my time is spent looking at a monitor and working with color, throwing off the color sense can't be good.

At any rate, here's a screenshot of Opera's "User Mode" stylesheets. Opera allows you to set up one stylesheet, which you can specify as your default user stylesheet (Tools > Preferences > Advanced > Content > Style Options). To switch to that stylesheet, it's View > Style > User mode.

As you can see from the screenshot, Opera also comes with a number of other stylesheets … one to emulate a text browser, high contrast, etc.

Opera User Stylesheets

In my case, however, even that wasn't enough. For instance, if I want to remove a black background, I can do it with a simple body {background:#fff} … however, because my stylesheet for that results in removing *all* styles, I get the "no stylesheet" effect … and so I've set up another stylesheet that gives whitespace margins. And, if you select User Mode, you can also select multiple styles; very useful — and it means that I can read sites that would normally, as I call it, blow my eyes out. The stylesheets at the bottom of the list (above) starting with "dv" are all mine.

But setting up alternative stylesheets for Opera isn't the easiest thing to figure out, so here are the instructions:

First, make your stylesheet. For this, I copied and modified one of Opera's alternative stylesheets, which I found (in Win2K) in:
Program Files > Opera > styles > user
Save your stylesheet in the same directory.

Here's one I made to read a site where all the text was bold (yow!):

@charset "UTF-8";
Name: DVsmallbody-nobold
Version: 1.01
Author: Diane Vigil
Description: dvsmallbody-nobold

body {width:450px; padding:0; color:#000; background:#fff; font-family:verdana}

h1 {font-size:21px; font-weight:normal}
td,p,div,tt,ol,ul,b {font-size:10pt; line-height:17px}
b {font-weight:normal}
i {font-style:italic}

a {color:#00c; text-decoration:underline}
a:hover {color:#c00; text-decoration:none}

Next (with Opera not running), open OperaDef6.ini, which I found in:
C:Program Files > Opera. I simplied copied the last Opera entry and added my own. My changes are bolded below:

[Local CSS Files]
Name 11=Debug with outline
Translated name 11=69493
File 11=C:\Program Files\Opera8\styles\user\debugwithoutline.css
Name 12=DVsmallbody
Translated name 12=69494
File 12=C:\Program Files\Opera8\styles\user\dvsmallbody.css

Then, when you restart Opera, you should find your new stylesheet listed under View > Style > User mode.

Yeah, I know: I must have passed a rubicon when I found myself opening and altering programs, and I wasn't exactly rewriting it, you know? Wasn't the first, though; I'd already modified some images in an earlier version of Opera (the tab colors seemed to be reversed — the active tab should be lighter than the others, right?). But, as Little Richard had it, The Girl Can't Help It. That's my excuse.

(If you're wondering how I got WordPress to display the backslashes, it's in the WordPress forums, though I don't know if anything else will blow up here.)

Have your say ...

First-time comments will be held for moderation (but comments are appreciated). Otherwise, just be courteous. If your name is a bunch of keywords, your comment will be deleted. Don't post links unless highly pertinent. Posters must be 16 or older.

Manage your subscriptions

© 2004-2017 DianeV Web Design Studio. All Rights Reserved.
33 queries. 0.227 seconds.