How can I "hack" the Thunderbird Lightning extension to fully color categories

Question

_{(Note: While I'm not entirely sure if this be better asked on SuperUser, I guess the fact that you probably will have to mess around in the xpi/jar file with the css settings, should make it suitable for SO.)}

Mozilla Thunderbird's Calendar extension, Lightning, will use different colors for different calendars, and just use a narrow vertical bar for the category color: (Light blue as calendar color and red as category color)

What I would like to find out is how I could go about changing/"hacking" the css styles that - surely - must be associated with this, buried somewhere in the plugin directory, so that in the example above, the event would be fully colored red.

Anyone know how to achieve this?

Answer 1

The category-overlay.png image is merely a gradient overlay to give the category bar the right looks.

Two options here. One more easy but not as reliable, the other a bit more difficult:

Option A: Easy

Create a userChrome.css in your $profile/chrome/ directory. It should contain the following:

.calendar-color-box[categories~="mycategory"],
.calendar-event-box-container[categories~="mycategory"] { 
   background-color: #abc123 !important;
}

You'll need to do this for each category you'd like to change the color for. Note that changing the color of the category in the Lightning options won't change the category color you set here.

Option B: More complete

You'll need to modify some files inside lightning.xpi here. This solution merely requires you to set the category colors in Lightning and will also work for newly added categories. Note that this way events without a category are transparent, if you want more you'll have to do it on your own.

1. Open lightning.xpi with a zip program
2. Enter the directory chrome/
3. Open the containing calendar.jar with a zip program
4. Descend into content/calendar/
5. Open calendar-multiday-view.xml
   • search "calendar-color-box" and remove it from the class attribute
   • a few lines above there is a <content> tag, add class="category-color-box" to it
6. Open calendar-month-view.xml and calendar-view-core.xml and do the same
7. Save the files back to calendar.jar
8. Save calendar.jar back to lightning.xpi
9. Install the modified lightning.xpi

If you'd rather see a patch, this applies to the latest comm-central source:

diff --git a/calendar/base/content/calendar-month-view.xml b/calendar/base/content/calendar-month-view.xml
--- a/calendar/base/content/calendar-month-view.xml
+++ b/calendar/base/content/calendar-month-view.xml
@@ -52,21 +52,20 @@

 <bindings id="calendar-month-view-bindings"
   xmlns="http://www.mozilla.org/xbl"
   xmlns:html="http://www.w3.org/1999/xhtml"
   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   xmlns:xbl="http://www.mozilla.org/xbl">

   <binding id="calendar-month-day-box-item" extends="chrome://calendar/content/calendar-view-core.xml#calendar-editable-item">
-    <content mousethrough="never" tooltip="itemTooltip">
+    <content mousethrough="never" tooltip="itemTooltip" class="category-color-box">
       <xul:vbox flex="1">
         <xul:hbox>
           <xul:box anonid="event-container"
-                   class="calendar-color-box"
                    xbl:inherits="calendar-uri,calendar-id"
                    flex="1">
             <xul:box class="calendar-event-selection" orient="horizontal" flex="1">
               <xul:stack anonid="eventbox"
                          class="calendar-event-box-container"
                          xbl:inherits="readonly,flashing,alarm,allday,priority,progress,status,calendar,categories"
                          flex="1">
                 <xul:hbox class="calendar-event-details">
diff --git a/calendar/base/content/calendar-multiday-view.xml b/calendar/base/content/calendar-multiday-view.xml
--- a/calendar/base/content/calendar-multiday-view.xml
+++ b/calendar/base/content/calendar-multiday-view.xml
@@ -2119,20 +2119,19 @@
       ]]></handler>
     </handlers>
   </binding>

   <!--
      -  An individual event box, to be inserted into a column.
     -->
   <binding id="calendar-event-box" extends="chrome://calendar/content/calendar-view-core.xml#calendar-editable-item">
-    <content mousethrough="never" tooltip="itemTooltip">
+    <content mousethrough="never" tooltip="itemTooltip" class="category-color-box">
         <xul:box xbl:inherits="orient,width,height" flex="1">
           <xul:box anonid="event-container"
-                   class="calendar-color-box"
                    xbl:inherits="orient,readonly,flashing,alarm,allday,priority,progress,status,calendar,categories,calendar-uri,calendar-id"
                    flex="1">
             <xul:box class="calendar-event-selection" orient="horizontal" flex="1">
               <xul:stack anonid="eventbox"
                          align="stretch"
                          class="calendar-event-box-container"
                          flex="1"
                          xbl:inherits="context,parentorient=orient,readonly,flashing,alarm,allday,priority,progress,status,calendar,categories">
diff --git a/calendar/base/content/calendar-view-core.xml b/calendar/base/content/calendar-view-core.xml
--- a/calendar/base/content/calendar-view-core.xml
+++ b/calendar/base/content/calendar-view-core.xml
@@ -46,21 +46,21 @@
     xmlns="http://www.mozilla.org/xbl"
     xmlns:html="http://www.w3.org/1999/xhtml"
     xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
     xmlns:xbl="http://www.mozilla.org/xbl">

   <binding id="calendar-editable-item">
     <content mousethrough="never"
              tooltip="itemTooltip"
-             tabindex="-1">
+             tabindex="-1"
+             class="category-color-box">
       <xul:vbox flex="1">
         <xul:hbox>
           <xul:box anonid="event-container"
-                   class="calendar-color-box"
                    xbl:inherits="calendar-uri,calendar-id"
                    flex="1">
             <xul:box class="calendar-event-selection" orient="horizontal" flex="1">
               <xul:stack anonid="eventbox"
                          class="calendar-event-box-container"
                          flex="1"
                          xbl:inherits="readonly,flashing,alarm,allday,priority,progress,status,calendar,categories">
                 <xul:hbox class="calendar-event-details">

Option C: Change Javascript

This would be the best working hack, although it requires javascript changes. Open calendar.jar as described in Option B and check out calendar-views.js, there are two functions: updateStyleSheetForViews() and updateStyleSheetForCategory(). I'll leave this to people that want to tinker with it themselves, but the idea would be to add a rule for .calendar-color-box[categories~=...] that overrides the default rule in case there are categories. This way if there is no category set, the calendar color is used, otherwise the desired category color.

Have fun :)