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

Asked 4/3, 2011 at 22:18 Answered 18/12, 2022 at 14:23

Solved css thunderbird thunderbird-addon thunderbird-lightning

_{(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)

enter image description here

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?

Compartment answered 4/3, 2011 at 22:18 Comment(0)

Ten years later, all previous answers are either out-of-date or are too complicated.

This answer targets the latest Thunderbird (v102.6.0), supports native category colors, and only contains 3 lines of custom CSS.

Before	After

Please follow the steps below:

Unlock custom CSS as mentioned in this post:

Goto Tools > Settings > General > Config Editor..., and set toolkit.legacyUserProfileCustomizations.stylesheets to true.
Locate your profile folder as mentioned in this post:
- Windows: %APPDATA%\Thunderbird\Profiles\xxxxxxxx.default\
- Linux: ~/.thunderbird/profiles/xxxxxxxx.default/
- Mac: ~/Library/Thunderbird/Profiles/xxxxxxxx.default/
Create chrome/userChrome.css under the profile folder. For example, the full path for Windows will look like: %APPDATA%\Thunderbird\Profiles\xxxxxxxx.default\chrome\userChrome.css

Modify chrome/userChrome.css to contain the following CSS:
```
.calendar-category-box {
    width: 100% !important;
}
```
Restart Thunderbird
Change the calendar color to white for better visuals:
(Optional) Customize the category colors:

Goto Tools > Settings > Calendar > Categories and set custom category colors.
All done!

In the future, if Thunderbird introduce breaking changes, you may need to slightly modify the CSS based on the inspection results in Tools > Developer Tools > Developer Toolbox.

Hail answered 18/12, 2022 at 14:23 Comment(1)

The folder in Windows is easy to find. After some Googling and manually searching, I haven't found the profile folder yet. How do I find it on macOS Ventura with TB 102.14? – Holton 8/8, 2023 at 6:51

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.

Open lightning.xpi with a zip program
Enter the directory chrome/
Open the containing calendar.jar with a zip program
Descend into content/calendar/
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
Open calendar-month-view.xml and calendar-view-core.xml and do the same
Save the files back to calendar.jar
Save calendar.jar back to lightning.xpi
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 :)

Winifred answered 26/3, 2011 at 14:37 Comment(5)

wow. cheers. I haven't tried this yet, but I'll mark yours as answer anyway. – Compartment 26/3, 2011 at 19:2

First approach works like a charm, note the chrome directory and userChrome.css files don't exist by default (you have to create them manually). More on that here - eriwen.com/css/tweaking-thunderbirds-chrome – Trilingual 4/11, 2011 at 16:19

Actually, I spoke a little too soon. The first approach doesn't work for the month view, digging through the XUL it looks like they put the categories attribute on a different element. To do all the calendars you need the following for each category

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

. I've edited @Philipp's original answer with this change. He just needs to accept it. – Trilingual 6/11, 2011 at 17:1

One more question, for easy you put "more easy but not as reliable". Why isn't it more reliable? I would think it's more reliable than B which can get wiped by a lightning update... – Trilingual 6/11, 2011 at 17:4

Indeed, A would be more reliable than B due to the update issue. The Problem with A is that if you rename your category, then you will also have to rework your CSS. – Winifred 8/7, 2012 at 11:4

This extension looks perfect for the functionality you want.

https://addons.mozilla.org/en-us/thunderbird/addon/calendar-tweaks/

To have just this, uncheck all the options, and check these:

apply category color to event backgruonds
use calendar color if no category color

Gittern answered 27/12, 2012 at 11:32 Comment(0)

Ten years later, all previous answers are either out-of-date or are too complicated.

This answer targets the latest Thunderbird (v102.6.0), supports native category colors, and only contains 3 lines of custom CSS.

Before	After

Please follow the steps below:

Unlock custom CSS as mentioned in this post:

Goto Tools > Settings > General > Config Editor..., and set toolkit.legacyUserProfileCustomizations.stylesheets to true.
Locate your profile folder as mentioned in this post:
- Windows: %APPDATA%\Thunderbird\Profiles\xxxxxxxx.default\
- Linux: ~/.thunderbird/profiles/xxxxxxxx.default/
- Mac: ~/Library/Thunderbird/Profiles/xxxxxxxx.default/
Create chrome/userChrome.css under the profile folder. For example, the full path for Windows will look like: %APPDATA%\Thunderbird\Profiles\xxxxxxxx.default\chrome\userChrome.css

Modify chrome/userChrome.css to contain the following CSS:
```
.calendar-category-box {
    width: 100% !important;
}
```
Restart Thunderbird
Change the calendar color to white for better visuals:
(Optional) Customize the category colors:

Goto Tools > Settings > Calendar > Categories and set custom category colors.
All done!

In the future, if Thunderbird introduce breaking changes, you may need to slightly modify the CSS based on the inspection results in Tools > Developer Tools > Developer Toolbox.

Hail answered 18/12, 2022 at 14:23 Comment(1)

You should install the DOM Inspector addon to understand the XUL structure of an event. Together with userChrome.css you should be able to style it the way you want it.

Tver answered 5/3, 2011 at 10:39 Comment(1)

The DOM Inspector addon is out of date, but Dom Inspector Plus! can be used instead – Inhospitality 9/10, 2017 at 13:55

Image of daily calendar
Image of weekly calendar

ALL CODE BY: ‪TOUT SÉLECTIONNER‬
This is a several step process that I have translated from a french website. I am simply making a note of what worked for me. This is for thunderbird 3.1.9. for the lightning-1-1.0b2-tb-macosx.xpi plugin. These directions were written April 8th, 2011. These directions are specifically for Mac users, although you can probably use them for windows as well.

Anything in ALL CAPS, means that you need to swap out your own information. Example: [email protected]

Part 1:

Find your profile folder. Something similar to: MachintoshHD/Users/YOURUSERNAME/Library/Thunderbird/Profiles/RANDOMLETTERS.default
Create a folder in here called "chrome"
Create a file called userChrome.css and save it into the chrome folder. You can create a .css file with a regular text editor, as long as it has a .css extention. I used dreamweaver, and a free program called JEdit, and text edit - all worked fine for me.
Inside of the CSS file you will paste the code below. (Note any text surrounded by /* */ is not recognized as code by thunderbird (or anything that reads .css) It is only there as a notation by the person(s) that coded it. Example /*TEXT*/

The Code:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

.calendar-event-box-container[categories] { margin: 1px !important;} /* add margin to the category-box */
.calendar-color-box:not([categories]) { color: black !important; background-color: #A6A6A6 !important;} /* events without category will appear grey */
calendar-category-box:not([categories]) { display: block !important; } /* category-box always displayed even if event doesn't have a category */

/* 2- using the calendar uri (much better) */
.category-color-box[calendar-uri="http://my.caldav.server/path/to/file"]{ background-color: #FF0000 !important; display:block !important; float:right;}
/* display the category-box with the specified color (forced color of the calendar) */

/* for each category, assign a forced color 
each category must be spelled lowercase in the css, spaces replaced with '_'
I didn't make any test with accents... but they may work (lowercase, spaces -> _) eg: "Appel Téléphonique" -> "appel_téléphonique"
*/
.calendar-color-box[categories="CATEGORY_NAME1"] { color: black !important; background-color: #CCCCFF !important;}
.calendar-color-box[categories="CATEGORY_NAME2"] { color: black !important; background-color: #FF99FF !important;}
.calendar-color-box[categories="CATEGORY_NAME3"] { color: black !important; background-color: #FF0000 !important;}
.calendar-color-box[categories="CATEGORY_NAME4"] { color: black !important; background-color: #CC33CC !important;}
.calendar-color-box[categories="CATEGORY_NAME5"] { color: black !important; background-color: #0000FF !important;}

Part 2: Now comes the complex part - taking apart the lightening plugin, one step at a time, putting it back together and loading it as a modified plugin into Thunderbird.

Download the lightning plugin for thunderbird (lightning-1-1.0b2-tb-macosx.xpi). It will have a .xpi extension.
An .xip file is the same thing as a zip file. Right-click the file, click on "get info" and change the extension to .zip instead of .xpi. It should look like this lightning-1-1.0b2-tb-macosx.zip. Or you can rename it. Example: ORIGINALPLUGIN.zip
Unzip the file by double-clicking on it. If this does not work, you may need to download an unzipping software (such as stuffit expander for mac).
Inside the folder, find the calendar.jar file. You can find it here: ORIGINALPLUGIN FOLDER/chrome/calendar.jar
Rename calendar.jar to calendar.zip, unzip this file.
Now you need to find three more files (copy them into a new area.)
/content/calendar/calendar-month-view.xml
/content/calendar/calendar-multiday-view.xml
/content/calendar/calendar-view-core.xml
Make the following edits in these files using a program such as JEdit.
The symbol "<" means remove this line
The symbol ">" means add this line in it's place
CODE BY: ‪TOUT SÉLECTIONNER

-> calendar/content/calendar/calendar-month-view.xml

Line 64
<                    xbl:inherits="calendar-uri,calendar-id"
>                    xbl:inherits="calendar-uri,calendar-id,categories"
Line 95
<                     <xul:calendar-category-box anonid="category-box" xbl:inherits="categories" pack="end"/>
>                     <xul:calendar-category-box anonid="category-box" xbl:inherits="categories,calendar-uri" pack="end"/>

-> calendar/content/calendar/calendar-multiday-view.xml

Line 2135
<                   <xul:calendar-category-box anonid="category-box" xbl:inherits="categories" pack="end" />
>                   <xul:calendar-category-box anonid="category-box" xbl:inherits="categories,calendar-uri" pack="end" />

-> calendar/content/calendar/calendar-view-core.xml

Line 59
<                    xbl:inherits="calendar-uri,calendar-id"
>                    xbl:inherits="calendar-uri,calendar-id,categories"
Line 84
<                                                xbl:inherits="categories"
>                                                xbl:inherits="categories,calendar-uri"
Line 394
<                 xbl:inherits="categories">
>                 xbl:inherits="categories,calendar-uri">

Part 3:

Once the changes are made save each file.
Replace the original files in the unzipped calendar folder
Select the "skin" and "content" folders. Right-click and select "compress 2 items". If you zip the folder and not the individual files, this may not work.
Rename this file calendar.jar
Replace the original calendar.jar file with the new one you just created. (see Part 2, step 4) ORIGINALPLUGIN FOLDER/chrome/calendar.jar
Select the contents of the ORIGINALPLUGIN FOLDER.

Calendar-js
chrome
chrome.manifest
components
defaults
install.rdf
modules
timezones.sqlite
Right-click the selected items and select "compress 8 items"
Rename the zip file to ANYNAMEYOUWANT.xpi For instance you can name it modifiedLightningPlug.xpi
Load the plug-in: Open thunderbird>Tools>Add-ons>Plugins>install
Locate the ANYNAMEYOUWANT.xpi file, let it load, and restart Thunderbird.

. . . and that should be it. It worked for me. I will check back to see if anyone else had luck with this, if not, I will double check my notes.Thanks to ‪TOUT SÉLECTIONNER‬ for writing the oringial code.

Isomerous answered 8/4, 2011 at 5:53 Comment(3)

@user695630: Your solution looks like a combination of (A) and (B) of Philipp's answer. Can you elaborate on any possible differences of the outcome? – Compartment 8/4, 2011 at 6:32

Hi Martin, no problem. The main difference is that my instructions are written for non-technical types, who want every step spelled out for them, including common pit-falls that I ran into along the way. The terminology is geared towards mac users. I wasn't able to figure out Philipp's method on my own, but technically the outcome should be the same. – Isomerous 8/4, 2011 at 6:56

This method also works for Sunbird. You simply have to find the profile folder for Sunbird, and drop the same userChrome.css file in there. For Part 2, step 7 you will need to replace the same code, but some of it will be located on different lines. Just run a search for the line you want to replace. – Isomerous 8/4, 2011 at 17:32

Just updated the way i've done things with the different ideas on this page... I was the author of the "french post" and I just needed another way to inverse colors...

So there it is for your pleasure (and my users too !!)

This is a unified diff ouptut of the modifications made on the lightning xpi (more precisely the calendar.jar package inside of it)

You may find all the informations on the original post : http://www.geckozone.org/forum/viewtopic.php?f=22&t=89384&start=15#p646027

For the non french speakers, here is some translation : Hello everybody,

Here is a more correct version of the changes. The big plus compared to my previous proposal is that we do not need anymore to define the colors of categories / calendars in the file userChrome.css that is also not used at all!

Overall:

Apply changes to XML files to allow the use of "calendar-id" and "categories" on the various elements of the DOM.
Update the file "calendar-views.js" to apply the parameterized color categories and calendars but by inverting them.
Finally, some css changes in "calendar-views.css" for:
- Always show the border and a margin of 1px (rendering is better I think ...)
- A gray color (# ACACAC ") to the uncategorized events
- Change only the color of the calendar (ie the right border) when selecting an element (by adding the property ".calendar-event-box-container")

Also, the image /skin/calendar/category-overlay.png has been expanded to increase the size of the border ...

Note: It only remains to put all this stuff as an option, but I did not have time to look over there at the moment ... But if one of you can give me some avenues of research, I will give it a try !

All the best :)

Vincent

Goalie answered 2/9, 2011 at 17:12 Comment(0)

Thanks to speedballs answer I was able to locate the file that controls the Category Overlay: There is a PNG file under:

....\extensions\{e2fda1a4-762b-4020-b5ad-a41df1933103}\chrome\calendar.jar\
    skin\calendar\category-overlay.png

The width of this file is 7px, and enlarging it's width will enlarge the Category Color Overlay in the calendar view. (I just used GIMP to scale it horizontally.)

~~So it would appear that it is not possible to use the category to fully color the whole event, as it's color is only mapped in via a "hardwired" pixel-width of the overlay png.~~

Compartment answered 5/3, 2011 at 16:45 Comment(2)

I'm very sure that it can be done but don't have the time to dig deeper. You could try and contact development team (mozilla.org/projects/calendar/help.html). They might be able to give you some pointers. – Tver 5/3, 2011 at 20:54

Note that I asked this question on NG mozilla.dev.apps.calendar and mozilla.support.calendar on 06.03.2011 and did not get any replies there. – Compartment 14/3, 2011 at 9:20

I am not a programming person so I found a way around modifying codes.

You can go around that by creating several individual calendars (e.g. that you can call work, personal, birthdays, etc.). You can choose the background color of each calendar. If you make the calendars all visible at the same time (by checking the calendar boxes on the left side), what you enter in each calendar will have a different background color, not just a stripe to the right.

When you create a new event, instead of selecting a category, leave 'none' for category but select a calendar in the calendar dropdown menu and assign your event to a particular calendar (each have different background colors).

The only downside of that is that you need to export all individual calendars if you would like to export your calendars at some point. But otherwise it works.

Radioscope answered 25/9, 2013 at 17:24 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Option A: Easy

Option B: More complete

Option C: Change Javascript

Recommended topics

Hot tags