303189 - the userContent.css stuff has variable and incomplete effect

Status: RESOLVED WORKSFORME

(Firefox :: Settings UI, defect)

Description

[Cameron Simpson]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6

The userContent.css approach to browser pane appearance seems... erratic.
Below I describe: what I want to achieve, how I think things might work better,
and an example of failed attempts.

What I would like to achieve is: my preferred font and text colours on any web
page, and my preferred background image (or even colour)! Choosing the "always
use my colours" setting gets a lot of this, but it is no substitute for being
able to free use CSS to do stuff.

It appears to me that when a page is loaded, the userContent has some effect on
the subsequent style, but that not everything applies and what does apply may
be overriden by page style. I feel that there should be two content style sheets;
one applied before page content, setting preferred default style, and a second
applied "over" any page content, to override arbitrary specific things at will.
Further, there should perhaps be a third ur-style sheet applied before anything
that is a compluted sheet driven of the Preferences settings. However, it should
still be computed and saved in the browser profile directory when preferences
are adjusted
as an elucidation of the actual concrete effects and a setting would cause.
That would get you working examples for free for users to examine.





Reproducible: Always

Steps to Reproduce:
A few of my poor flailings follow:
firstly, it is necessary to turn off the "always use my colours" setting
to get anywhere. Ok. Here is my current inoperative userContent.css, embellished
on an example from the Tips pages.

/* Obviate need to zoom on many sites. */
html>body {
  font-size: 100% !important;
  line-height: normal !important;
  background-color: inherit !important;
  background-image:
url("file:///home/cameron/var/cache/file/e2/e8d2c88ca204333e1564464746974c.png")
!important;
}

body {
  background-image:
url("file:///home/cameron/var/cache/file/e2/e8d2c88ca204333e1564464746974c.png")
!important;
}

That PNG is a dark wallpaperish image.
It never applies.

I've set background-color to yellow (to be really obvious), and it
applies, and is then overridden by page CSS. There seems no way to set it for
everything.




Expected Results:  
Effective control of the page background and colours.

Comment 1

[PikeUK]

Linking to images from the file: protocol is prevented for security reasons
(check your JS console there might be an error message), there's probably a bug
somewhere about bypassing that for userContent.css but I can't find it, in the
meantime you can use data: URLs.

As for your problem with the backgound-color, do you have an example? Are you
sure that the website isn't putting opaque blocks in front of the body which
prevent your colours appearing, have you tried using:
* {background: yellow !important;}

Comment 2

[[:Aleksej]]

Is this reproducible with the latest Firefox 2 or 3 builds?

If not, please resolve it as WORKSFORME.

Thanks!

Comment 3

[Kevin Brosnan]

No comment from reporter - works for me