css - 如何将 "hack"Thunderbird Lightning 扩展到全彩色类别

Question

_{(注意:虽然我不完全确定在 SuperUser 上问这个问题是否更好，但我猜你可能不得不在带有 css 设置的 xpi/jar 文件中乱搞，应该做到这一点适用于 SO。)}

Mozilla Thunderbird 的日历扩展 Lightning 将为不同的日历使用不同的颜色，并且只使用一个窄的垂直条作为类别颜色:(浅蓝色作为日历颜色，红色作为类别颜色)

我想知道的是如何更改/“破解”css 样式，这些样式 - 当然 - 必须与此相关联，埋在插件目录中的某个地方，以便在上面的示例中，事件将完全变成红色。

有人知道如何实现吗？

Answer 1

category-overlay.png 图像只是一个渐变叠加层，用于为类别栏提供正确的外观。

这里有两个选项。一个更简单但不那么可靠，另一个更难一些:

选项 A:简单

在您的 $profile/chrome/目录中创建一个 userChrome.css。它应该包含以下内容:

.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">

选项 C:更改 Javascript

这将是最有效的 hack，尽管它需要更改 javascript。按照选项 B 中的描述打开 calendar.jar 并查看 calendar-views.js，有两个函数:updateStyleSheetForViews() 和 updateStyleSheetForCategory()。我会把它留给那些想自己修改它的人，但我的想法是为 .calendar-color-box[categories~=...] 添加一个规则来覆盖默认值规则，以防有类别。这样，如果没有设置类别，则使用日历颜色，否则使用所需的类别颜色。

玩得开心:)