gemini - kennedy.gemi.dev

💾 Archived View for jdcard.com › blog › another-operator-02.gmi captured on 2024-05-10 at 10:59:22. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

Another Operator: System Colors For Stylesheets

2004-01-08 14:01:46

Parts of Opera's user interface are presented as HTML or XML files styled using CSS. Two prominent examples are the message windows in the e-mail/newsreader/RSS client, and the chat window.

I find that black text on a white background is uncomfortable to read. I spend a lot of time in front of my monitor, and have set up most of the software I use a lot to display navy colored text on a pale green background.

Opera's default stylesheet for message and chat windows takes the black-on-white approach, with other colors used to indicate certain types of information. Since we can edit the CSS files that control the display of these windows, I can get color combinations that are more suited to my needs.

The way I've done this is to use the system colors that are specified in my Windows Control Panel, Display settings. Opera just uses whatever colors I have specified in the Windows system color scheme.

I used this page to help me determine which settings would be likely to work best: [UserStyles]. The css file for my chat windows is at [im.css] (screenshot showing how it looks on my system: [ImCss.gif]), and the one for my message windows is [mime.css] (screenshot using the Windows display theme called "Brick": [MimeCss.gif]).

You are welcome to use either or both of these css files if you think they are helpful.

Both files use only system-specified colors. The mime.css also formats the display with the message headers down the left side of the window rather than at the top, and displays many more of the message headers than does Opera's default version.

TECHNICAL NOTES

The greatest challenge in using system colors is the very restricted range of choices. Only the Window/WindowText/GrayText, ButtonFace/ButtonText, and InactiveCaption/InactiveCaptionText combinations provide adequate contrast and differentiation across the range of Windows 95 color schemes. Later versions of Windows offer more color schemes, which generally offer more flexibility than the limited Windows 95 set.

While it might seem that other combinations, such as InfoBackground/InfoText, could also be used, they don't have the differentiation required to be generally useful. Many of the color schemes have InfoBackground/InfoText set to the same colors as Window/WindowText.

One of the mistakes I made early in the process was to mix-and-match colors from different groups. For example, it might look good with my usual system color settings to use InactiveCaption as the background color with InfoText as the text color. But there is no reason to think that a user's system colors would necessarily maintain adequate contrast between those. It is only safe to use the values in their normal combinations. It is reasonable to assume that color schemes will consistently provide adequate contrast between ButtonFace and ButtonText, Window and WindowText, etc.

Given these limitations, it will often be necessary to use other tricks with your CSS to provide distinctions between data elements in your page. An example of this is the chat stylesheet, where I rely on border and font-size changes to convey distinctions among message types. Text-decoration and font-style may also be useful. However that also has its limitations: im.css also uses system fonts; I found that italic text was very hard to read with some of the Windows display schemes that use bitmapped fonts rather than TrueType fonts.

Comment from: Rijk - 2004-01-08 14:01:46

James, how about linking to a little screenshot? On my system, user the system colors doesn't help much because I've got a bland Windows theme. So it would be nice to see what CAN be done.

For the interested, here's a little userstyle demo I've once made:

http://people.opera.com/rijk/opera/mousers.html

Comment from: jdcard - 2004-01-08 14:01:46

Done. It is at [ImCss]. Thanks Rijk!

[ImCss]

⁂

📧Comment on this post (via e-mail)

📅 c: 2004-01-08 14:01:46 ✏️ e:

🏷 tags: #userstyles #stylesheets #Opera