userChrome.css: so many contradicting syntax samples

[pstover]

During the last days I tried to find out the correct syntax for the userChrome.css

Starting with the page
http://kb.mozillazine.org/Pane_and_menu_fonts
I found so many contradicting samples

What for example are the differences between (pay attention to the single-char differences!)
the following cases and which are correct?

1.)
#folderTree > treechildren::-moz-tree-row
and
folderTree > treechildren::-moz-tree-row

2.)
#folderTree treechildren::-moz-tree-row
and
#folderTree > treechildren::-moz-tree-row

3.)
#folderTree treechildren
and
#folderTree treechildren::-moz-tree-row

4.)
#folderTree treechildren::-moz-tree-row
and
#folderTree treechildren:-moz-tree-row

Peter

[Rod Whiteley]

1. The # is required because folderTree is an ID.

2. The > is optional because treechildren is a child ( > ) of #folderTree and also a descendant of #folderTree.

3. ::-moz-tree-row makes the rule specific to rows (not, for example, to cell text). Without it, the rule applies to the treechildren as a whole, but can be overridden by more specific rules for rows etc.

4. The syntax requires two colons.

[pstover]

1. The # is required because folderTree is an ID.

2. The > is optional because treechildren is a child ( > ) of #folderTree and also a descendant of #folderTree.

3. ::-moz-tree-row makes the rule specific to rows (not, for example, to cell text). Without it, the rule applies to the treechildren as a whole, but can be overridden by more specific rules for rows etc.

4. The syntax requires two colons.

Ok, thank you but some additional questions:

ad 1) Is there a complete overview about all possible IDs and Non-IDs in Thunderbird ?

ad 2.) Is there a complete overview about all object tree relationships. What is children of what parent?

ad 3.) Are there any other possible restriction instead of ::-moz-tree-row ?
Maybe there is a ::-moz-tree-cell

What else is possible?

Is there a difference between

::-moz-tree-row
and
::moz-tree-row
?

Peter

[rsx11m]

You can have a look at https://developer.mozilla.org/en/CSS_Reference for some more information on the CSS syntax and attributes available in Gecko applications. Everything starting with "-moz-..." are internally defined and only valid within the scope of the application (thus, don't try those on a web page).

I'm not aware of any complete list of identifiers, classes, etc. (also, they keep changing between major versions as the code continues to be modified and new features added). You can try the DOM Inspector extension to look into the hierarchy and find such names by clicking on a UI (chrome) item of a specific window. Note that DOMi has different versions for the platforms and between TB 2.0 and the upcoming 3.0 version.

[Rod Whiteley]

1. No. 2. No. 3. Yes.

::-moz-tree-row is the correct syntax — the other results in the error: Expected pseudo-element but found 'moz-tree-row'. Ruleset ignored due to bad selector. as you can easily see for yourself if you try it.

The Mail Tweak extension has a CSS selector for finding selectors, and (unlike DOM Inspector) it displays the pseudo-elements inside treechildren.

[rsx11m]

Good to know, I'm usually digging my way through MXR based on cues like label strings. DOM Inspector may bring you close to the element you're looking for, but not necessarily to that exact element.

BTW: You have a dead link in http://mailtweak.mozdev.org/mailtweak-css.html pointing to http://developer.mozilla.org/en/docs/CSS:Getting_Started resulting in a "no text in this page".

[pstover]

The Mail Tweak extension has a CSS selector for finding selectors, and (unlike DOM Inspector) it displays the pseudo-elements inside treechildren.

Hi Rod, thank you. MailTweak hint is very useful.

But when I applied MailTweak to identify the text pane on the lower left side it tells me:

Type: PRE
ID: empty
Attribute: [wrap=""]
Namespace: custom
CSS file: userContent.css

Does that mean that (if I want to change the font type and line spacing for PRE) I have to create a second file userContent.css (beside the existing userChrome.css) and to add a new entry PRE for that?
Or #PRE ?

Peter

[Rod Whiteley]

It looks like you clicked inside a plain text message. If you really want to change the style for all plain text, then create a second file named userContent.css (just pressing the Open... button should do that) and add a new rule like: pre {line-height: 60%;}

The reason it's a different file is that you are changing the style inside a content document, not the style of Thunderbird's user interface (its "chrome").

[pstover]

Ok, thank you. But some more questions:

- What does "!important" mean as postfix?

- What is the difference between
"height: 12px;"
and
"font-size: 12px;"
and
"line-height: 12px;"

- Will all the attributes be used in Thunderbird 3.x as well or will be there a change?

Peter

[Rod Whiteley]

Important rules have a higher precedence, which is sometimes needed to override other rules in the theme. It's usually OK to make all your rules important.

The height is the height of a box, the font-size is the nominal height of text in the box, and the line-height is the total height of a line including line spacing (what a printer would call leading) between the lines.

The specification is here: http://www.w3.org/TR/CSS2/   Thunderbird 2 supports a few CSS3 features, and Thunderbird 3 supports more. Both support some Mozilla-only features.

[pstover]

Thank you Rod. One more strange thing:

At first I put the following line into the (new) userContent.css:

* {font-size: 12px !important; height: 12px !important; font-family: Verdana !important;}

... and yes the text body font changed (from the initial setup). Then I modified userContent.css to

* {font-size: 8px !important; height: 8px !important; font-family: Verdana !important;}

...and restarted Thunderbird but the text body font did NOT changed. The font is as big as before.
It seems to me that there is a minimum size which cannot be lowered.

Is this true? Can I somehow disabled this minimum size threshold?

[Rod Whiteley]

Tools – Options – Display – Formatting – Fonts... has a minimum font size setting for each language group.