Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Can only set background image for every other row in thread pane

30 views
Skip to first unread message

Jonathan Kamens

unread,
Apr 22, 2012, 2:16:52 PM4/22/12
to
A new add-on I'm working on is trying to set the background
image for rows in the Thunderbird thread pane when the
"enhanced-priority-display-highest" property set set on the
row. I've got this in my CSS:

treechildren::-moz-tree-row(enhanced-priority-display-highest) {
background-image: url("background-highest.gif");
}

This only works for half of the rows. I assume that this is
because odd/even rows are styled differently.

I tried creating two separate CSS blocks, one with " odd" and
one with " even" in the properties. That didn't help.

I tried adding "background-color: transparent;" in an effort
to override whatever background color is set in the skin CSS.
That didn't help either.

What can I do to force my add-on's styles to override the odd
vs. even styles in the theme?

Thanks.

Pete Farmer

unread,
Apr 22, 2012, 3:19:41 PM4/22/12
to dev-apps-t...@lists.mozilla.org, Jonathan Kamens
Jonathan Kamens<j...@kamens.brookline.ma.us> wrote:
> What can I do to force my add-on's styles to override the odd
> vs. even styles in the theme?
Hi Jonathan,

I'm can't offer an authoritative response -- I'm just a guy who's futzed
around with the Tbird CSS and managed (through trial and error) to get
it to do what I wanted it to do.

Below is the custom CSS I use to override the defaults for displaying
rows in the folder pane. Much of it is irrelevant for your purposes,
but maybe this can give you some hints to work with.

#threadTree treechildren {
font-size: 12px; font-family: "Helvetica Neue";
}
#threadTree treechildren::-moz-tree-row {
height: 22px !important;
color: #000000;
}
#threadTree treechildren::-moz-tree-row(even) {
background-color: #FFFFFF !important;
}
#threadTree treechildren::-moz-tree-row(odd) {
background-color: #F2F3F6 !important;
}
#threadTree treechildren::-moz-tree-row(selected),
#threadTree treechildren::-moz-tree-row(selected, focus) {
background-color: #D2D3D6 !important;
}
#threadTree treechildren::-moz-tree-cell {
background-color: transparent !important;
}
#threadTree treechildren::-moz-tree-cell(unread) {
background-color: #E6E6FF !important;
}
#threadTree treechildren::-moz-tree-cell(unread, selected) {
background-color: transparent !important;
}
treechildren::-moz-tree-cell-text(container, closed, hasUnread, read) {
background-color: #E6E6FF !important;
text-decoration: none !important;
font-weight: bold !important;
}
#threadTree treechildren::-moz-tree-cell-text(selected),
#threadTree treechildren::-moz-tree-cell-text(selected, focus),
#threadTree treechildren::-moz-tree-cell-text(unread, selected, focus) {
color: #222222 !important;
font-weight: bold !important;
background-color: transparent !important;
}

Good luck and cheers,
Pete Farmer
Menlo Park, CA

Jim

unread,
Apr 22, 2012, 3:24:50 PM4/22/12
to
On 04/22/2012 01:16 PM, Jonathan Kamens wrote:
> A new add-on I'm working on is trying to set the background
> image for rows in the Thunderbird thread pane when the
> "enhanced-priority-display-highest" property set set on the
> row. I've got this in my CSS:
>
> treechildren::-moz-tree-row(enhanced-priority-display-highest) {
> background-image: url("background-highest.gif");
> }
>
> This only works for half of the rows. I assume that this is
> because odd/even rows are styled differently.
[snip]
> What can I do to force my add-on's styles to override the odd
> vs. even styles in the theme?

You don't say what platform you're on, but if you're testing this on XP,
you're running afoul of this CSS:
<http://mxr.mozilla.org/comm-central/source/mail/themes/qute/mail/mailWindow1.css#404>,
which is more specific than your selector. Try adding !important to your
CSS.

- Jim

Ron K.

unread,
Apr 22, 2012, 3:51:05 PM4/22/12
to
Jonathan Kamens on 4/22/2012 2:16 PM, keyboarded a reply:
Note in my example from my userChrome.css the comma separated conditionals
within the (). You would only need two rules then,
(enhanced-priority-display-highest, odd) and
(enhanced-priority-display-highest, even).

#folderTree > treechildren::-moz-tree-image(folderNameCol, isServer-true,
serverType-nntp)
{ list-style-image: url("news16.png") !important; }



--
Ron K.
Who is General Failure, and why is he searching my HDD?
Kernel Restore reported Major Error used BSOD to msg the enemy!

Jonathan Kamens

unread,
Apr 22, 2012, 5:01:42 PM4/22/12
to
Pete Farmer <pfa...@collaboros.com> writes:
> #threadTree treechildren {
> font-size: 12px; font-family: "Helvetica Neue";
> }

Aha. I think the answer is that I ddn't have #threadTree in
my selecter. I added it, and the it was specific enough to
override the selecter in the theme.

I see several people have mentioned "!important". What does
that do?

Thanks,

jik

Joshua Cranmer

unread,
Apr 22, 2012, 5:48:18 PM4/22/12
to
On 4/22/2012 4:01 PM, Jonathan Kamens wrote:
> I see several people have mentioned "!important". What does
> that do?
>

The !important keyword makes what your rule does take precedence over
any non-!important rule.
0 new messages