How can I hack the Thunderbird Lightning extension to full color categories

Question

_{(Note: Although I'm not quite sure it is better to ask SuperUser, I assume that you probably have to css in the xpi / jar file with css settings, this should make it suitable for SO.)}

The Mozilla Thunderbird calendar extension, Lightning, will use different colors for different calendars and just use a narrow vertical bar for the category color: (cyan as the calendar color and the red color of the category)

What I would like to know is how I could change / “hack” CSS styles, which, of course, should be related to this, somewhere in the plugin directory, so in the above example the event will be completely colored in Red color.

Does anyone know how to achieve this?

Answer 1

The category image-overlay.png is just a gradient overlay so that the category bar looks right.

Two options. Another simple, but not so reliable, the other is a bit more complicated:

Option A: Simple

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

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

You will need to do this for each category for which you want to change the color. Please note that changing the color of a category in the Lightning options will not change the color of the category that you set here.

Option B: more complete

You need to change some files inside lightning.xpi here. This solution just requires that you set the category colors in Lightning and also work for the newly added categories. Please note that in this way events without a category are transparent, if you want more, you will have to do it yourself.

• Open lightning.xpi with zip program
• Enter the chrome / directory
• Open the calendar.jar file with a zip program.
• Descent to the content / calendar /
• Open calendar-multiday-view.xml
  • find "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 want to see the patch, this refers to the last central-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 a better working hack, although it does require changes to JavaScript. Open calendar.jar as described in Option B, and check calendar-views.js, there are two functions: updateStyleSheetForViews() and updateStyleSheetForCategory() . I will leave this to people who want to work with them themselves, but the idea is to add a rule for .calendar-color-box[categories~=...] , which overrides the default rule if there are categories. Thus, if there is no set of categories, the calendar color is used, otherwise the desired category color.

Good luck :)

Answer 2

This extension is ideal for the required functionality.

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

To have this, uncheck all the options and check them:

• Apply category color to event backgruonds.
• use calendar color if there is no category color

Answer 3

You must install the DOM Inspector addon to understand the structure of the XUL event. Together with userChrome.css you can style it the way you want.

Answer 4

Daily Calendar Image
Image of the weekly calendar

ALL CODE: TOUT SÉLECTIONNER
These are a few steps that I have translated from a French website. I just notice what worked for me. This is for thunderbird 3.1.9. for the lightning plug-1-1.0b2-tb-macosx.xpi. These directions were written on April 8, 2011. These directions are specifically designed for Mac users, although you can probably use them for windows as well.

---

Everything in ALL CAPS means that you need to change your information. Example: [e-mail]

Part 1:

• Find your profile folder. Something like: MachintoshHD / Users / YOURUSERNAME / Library / Thunderbird / Profiles / RANDOMLETTERS.default
• Create a folder in the name "chrome"
• Create a userChrome.css file and save it in the chrome folder. You can create a .css file with a regular text editor if it has a .css extension. I used Dreamweaver and a free program called JEdit, as well as text editing - everything was fine for me.
• Inside the CSS file, you paste the code below. (Note that any text surrounded by /* */ is not recognized as a code from thunderbird (or anything that reads .css). It is only used to indicate the person (s) that encoded 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 hard part - separating the plug-in for lighting, step by step, combining it and loading it as a modified plug-in in Thunderbird.

• Download the lightning plug-in for thunderbird (lightning-1-1.0b2-tb-macosx.xpi). It will have the extension .xpi.
• A .xip file is the same as a zip file. Right-click the file, click Get Info and change the extension to .zip instead of .xpi. It should look like 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 unzip software (for example, the Mac Extender Extender).
• 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 to a new area).
  /content/calendar/calendar-month-view.xml
  /content/calendar/calendar-multiday-view.xml
  /content/calendar/calendar-view-core.xml
• Make the following changes to these files with a program such as JEdit.
  The character "<" means deleting this line
  The symbol ">" means add this line to this 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:

• After making changes, save each file.
• Replace the source files in the unzipped calendar folder
• Select the "skin" and "content" folders. Right-click and select Compress 2 Elements. If you zip up a folder rather than 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 folder.

  Js calendar
  chromium
  chrome.manifest components
  defaults
  install.rdf
  
  
  timezones.sqlite

• Right-click the selected items and select Compress 8 Items

• Rename the zip file to ANYNAMEYOUWANT.xpi. For example, you can call it modifiedLightningPlug.xpi
• Download the plugin: Open thunderbird> Tools> Add-ons> Plugins> install
• Locate the ANYNAMEYOUWANT.xpi file, download it and restart Thunderbird.

., and it should be. It worked for me. I'll be back to find out if anyone else can do this, if not, I'll double-check my notes. Thanks TOUT SÉLECTIONNER for writing the oral code.

Answer 5

Just updated the way I dealt with various ideas on this page ... I was the author of the "French post", and I just needed a different way to invert colors ...

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

This is a unified diffupupout change made on xpi zipper (more precisely, the calendar.jar package inside it)

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

For non-French speakers, here is the translation: Hello everyone,

Here is a more correct version of the changes. A big plus compared to my previous sentence is that we no longer need to define the colors of categories / calendars in the userChrome.css file, which is also not used at all!

Generally:

• Apply changes to the XML files to allow the use of "calendar-id" and "categories" for various DOM elements.

• Update the calendar-views.js file to apply the parameterized color categories and calendars, but by inverting them.

• Finally, some css changes in "calendar-views.css" for:

  • Always show border and 1px field (rendering is better, I think ...)
  • Gray (# ACACAC) for non-aggregated events
  • When selecting an item (just adding the property ".calendar-event-box-container"), change only the color of the calendar (ie the right frame)

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

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

All the best :)

Vincent

Answer 6

Thanks to speedballs answer, I managed to find a file that controls the inscription Category: there is a PNG file in the section

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

The width of this file is 7px, and increasing its width will increase the color outline of the category in the calendar view. (I just used GIMP to scale horizontally.)

Thus, it would be impossible to use the category for the full bloom of the entire event, since the color is displayed only with the help of the "hard" width of the png overlay pixel.

Answer 7

I am not a programmer, so I found a way to change the codes.

You can get around this by creating several separate calendars (for example, you can name work, personal, birthdays, etc.). You can choose a background color for each calendar. If you make calendars visible at the same time (checking the calendar fields on the left side), then what you enter in each calendar will have a different background color, not just the bar on the right.

When you create a new event, instead of choosing a category, leave “no” for the category, but select a calendar from the calendar drop-down menu and assign your event to a specific calendar (each of which has a different background color).

The only drawback is that you need to export all individual calendars if you want to export your calendars at some point. But otherwise it works.