I have put the following lines in K-Meleon's adblock.css (in place of the original content. I use Privoxy to block content I don't want to see.)

I must make it clear that I'm not really knowledgeable about css ...!

* { background-color: #cc9933 !important; }
* html, body { background-color: #cc9933 !important; transparent !important; }
* { color: black !important; }
* { text-shadow: none !important; }
* { text-decoration: none !important; }
* a, a:link { color: blue !important; }
* a:visited { color: maroon !important; }
* a:hover { background-color: #505050 !important; }
* [style] { color: inherit !important; }
* marquee { display: none !important; }

As Siria pointed out, the result is quite drastic but I'm used to it. For critical web transactions, I turn off Privoxy and the adblock.css.

My difficulty is this:
because of "* { color: black !important; }" I find that certain links don't show up as blue or maroon, the colours I've chosen for unvisited and visited links. They remain black.

This line helped substantially: "* [style] { color: inherit !important; }
" but problems remain in quite a few sites and I'd like to know how to fix it so that all links and clickable text elements are either blue or maroon.

One example is on this page:
http://mail.google.com/support/bin/topic.py?hl=en&topic=12772

Most of the links in GMail Settings (the main, middle column on the page) appear black because of "* { color: black !important; }".

If I comment out that line, the links obey the rules.

I don't want to lose that line (or remove "!important") because so many sites use a variety of font colours that often are not readily readable for me.

Is there some css magic to get what I want: all non-link, non-clickable text, black; all links and clickable text elements blue or maroon?



Edited 1 time(s). Last edit at 01/28/2011 08:33AM by vasa1.

Have seen it only now, so perhaps you know already a solution, or never notice this reply anymore...
Anyway, here's something that seems to help at least on your example page

* a, a, a * { color: blue !important; }
* a:visited, a:visited * { color: maroon !important; }
* a:hover, a:hover * { background-color: #505050 !important; color: beige !important;}
* a:active, a:active * { background-color: #505050 !important; color: beige !important;}

Put those lines near the end (and after that [style] line, whatever it does despite the blank between...) Must admit I'm a rather bloody CSS beginner myself, and have already forgotten almost everything of what little I learned a year or so ago, so that code is perhaps not pretty, but it seems to work ;-)
Your example page was very helpful. The prob is that google has given the link text an own span style, making it sort of "nested" inside the link tag, one level deeper. Now the * after "a" means: "This style is for everything contained inside links on lower levels". Provided I got that right, don't count too strongly on it :cool:
Am afraid it may still not work with javascript-created links, not sure, but had struggled endlessly with some image or object css styles last year, without success if javascript-created

BTW that "transparent" syntax has no function, there's not defined "what" should be transparent... Noticed it because my editor marked it in red. You need an editor with CSS syntax highlighting, that's really extremely helpful with such complicated syntax stuff

Ah yes, speaking of other link stuff... When I was playing with broken image stuff I had added this to my own stylesheets, regarding "input" buttons with images:

input[type="image"]
{
-moz-force-broken-image-icon: 0 !important;
border-style: dotted !important;
border-width: 2px !important;
border-color: blue !important;
padding: 1px 2px !important;
margin: 2px 2px !important;
line-height: 2 !important;
}

No idea if that helps anything too, but perhaps the input tag gives you ideas for own experiments



Edited 5 time(s). Last edit at 02/20/2011 11:11PM by siria.

Hi Siria!

I had somewhat given up on getting a response and so neglected to check! I'll read your suggestions carefully and post my experience in implementing them.

Thank you for your time!



Edited 1 time(s). Last edit at 03/01/2011 04:05PM by vasa1.

Okay!

Based on your input which has worked 99.9999% and a little more experimenting, this is what I have for now:

* { background-color: #a8a8a8 !important; }
* html, body { background-color: #a8a8a8 !important; }
* { color: black !important; }
* { text-shadow: none !important; }
* { text-decoration: none !important; }
* a, a * { color: blue !important; }
* a:visited, a:visited * { color: maroon !important; }
* a:hover , a:hover * { text-shadow: 0 0 2px !important }
* a:active, a:active * { text-shadow: 0 0 2px !important }
* a[href^="javascript:"] { color: green ! important }
* marquee { display: none !important; }
form *{-moz-appearance: none !important;}


You had written, "* a, a, a * { color: blue !important; }". But things are good for now with just "* a, a * { color: blue !important; }".

This is an example of one "link"-type that still is uncontrolled:
<span style="cursor: pointer;" onclick="window.open('members/raj_nse_bse.html', '_self')">raj_nse_bse</span>.

It is not really important but I thought you would like to know.

Also, I changed the old hover to something more cute and less boring (for now) and put in a line to have javascript links in green since we hear so much about it.

Once again, thank you very much for taking the time to help.