Color events fully by category instead of calendar color

Martin B.

unread,

Mar 5, 2011, 7:08:12 PM3/5/11

to

Hi!

Currently trying to get some (more) color into my Lightning events:

In the current Lighting version (1.0b2), the color one chooses for the
Categories is only displayed as a narrow color bar on the right side of
the events[1].

I have found out[2] that the width of this color bar is controlled by
the category-overlay.png file, but so far I have been unable to find out
how/if it would be possible to just color the whole event by the
Category color instead of the Calendar color.

Can someone help?

cheers,
Martin

[1] How can I "hack" the Thunderbird Lightning plugin to fully color
categories : http://stackoverflow.com/q/5199911/321013

[2] :
http://stackoverflow.com/questions/5199911/how-can-i-hack-the-thunderbird-lightning-plugin-to-fully-color-categories/5205178#5205178

Price

unread,

Mar 22, 2011, 2:29:47 AM3/22/11

to

I would like to know that as well. Somewhat annoying considering that all other calendar programs do that by default.

Dempsey

unread,

Mar 22, 2011, 6:04:14 PM3/22/11

to

On 22/03/2011 00:29, Price wrote:
> I would like to know that as well. Somewhat annoying considering that all other calendar programs do that by default.
>
>

I was having the same issue. Create the file userChrome.css (if it is
not yet there) under your default profile in the chrome folder.
Namespace should be one line. The example is for category Anniversary,
but you can add as many categories as you like. BTW, I cannot take
credit for this as I found this some time ago on this forum.

/*
* Do not remove the @namespace line -- it's required for correct functioning
*/
@namespace
url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /*
set default namespace to XUL */

/* Category: Anniversary */

.calendar-event-box-container[categories~="anniversary"] {
border: solid #C9C 1px !important;
background: #FCF !important;
padding-left:2px !important;
background-position:top left !important;
background-repeat:no-repeat !important;
}

calendar-category-box[categories~="anniversary"] {
display: none !important;
}

Philipp Kewisch

unread,

Mar 26, 2011, 10:41:56 AM3/26/11

to

I've posted a very complete answer on stackoverflow

Message has been deleted

Stefan Sitter

unread,

Apr 8, 2011, 2:16:38 AM4/8/11

to

Andre wrote:
> Here is the code I used, in an attempt to affect events labeled with
> the category "Appointment"
>
> .calendar-color-box[categories~="Appointment"] {
> background-color: #FF0000 !important;
> }

Try "appointment". All names are converted to lower case and special
characters are encoded to ensure CSS compatibility.

Hint: Set the category color in the preference dialog. Check
about:config or the entries in the prefs.js file for correct naming of
the category.

Example: category name is named "FOO$bar", preference name is
"calendar.category.color.foo-ux24-bar". Use "foo-ux24-bar" in your
custom CSS rules.

/Stefan