我怎樣才能將 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;
}

您需要為要更改顏色的每個類別執行此操作。 請注意，更改 Lightning 選項中的類別顏色不會更改您在此處設置的類別顏色。

選項 B：更完整

您需要在這里修改 Lightning.xpi 中的一些文件。 此解決方案只需要您在 Lightning 中設置類別顏色，也適用於新添加的類別。 請注意，這種沒有類別的事件是透明的，如果您想要更多，則必須自己完成。

1. 使用 zip 程序打開 Lightning.xpi
2. 進入目錄 chrome/
3. 使用 zip 程序打開包含 calendar.jar
4. 下降到內容/日歷/
5. 打開日歷-multiday-view.xml
   • 搜索“日歷顏色框”並將其從類屬性中刪除
   • 上面幾行有一個 <content> 標簽，添加 class="category-color-box"
6. 打開 calendar-month-view.xml 和 calendar-view-core.xml 並執行相同操作
7. 將文件保存回 calendar.jar
8. 將 calendar.jar 保存回 Lightning.xpi
9. 安裝修改后的lightning.xpi

如果您希望看到補丁，這適用於最新的 comm-central 源：

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~=...]添加一個規則，在有類別的情況下覆蓋默認規則。 這樣，如果沒有設置類別，則使用日歷顏色，否則使用所需的類別顏色。

玩得開心 ：）

Answer 2

此擴展程序看起來非常適合您想要的功能。

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

要做到這一點，請取消選中所有選項，然后選中這些：

• 將類別顏色應用於事件背景
• 如果沒有類別顏色，則使用日歷顏色

Answer 3

您應該安裝DOM Inspector 插件以了解事件的 XUL 結構。 與userChrome.css一起，您應該能夠按照您想要的方式對其進行樣式設置。

Answer 4

每日日歷的圖像
周歷的圖像

ALL CODE BY: TOUT SELECTIONNER
這是我從一個法國網站翻譯的幾個步驟過程。 我只是記下對我有用的東西。 這適用於雷鳥 3.1.9。 對於 Lightning-1-1.0b2-tb-macosx.xpi 插件。 這些說明寫於 2011 年 4 月 8 日。這些說明專門針對 Mac 用戶，盡管您也可以將它們用於 Windows。

---

全部大寫的任何內容都意味着您需要換出自己的信息。 示例：YOUREMAIL@gmail.com

第1部分：

1. 找到您的個人資料文件夾。 類似於：MachintoshHD/Users/YOURUSERNAME/Library/Thunderbird/Profiles/RANDOMLETTERS.default
2. 在此處創建一個名為“chrome”的文件夾
3. 創建一個名為 userChrome.css 的文件並將其保存到 chrome 文件夾中。 您可以使用常規文本編輯器創建 .css 文件，只要它具有 .css 擴展名。 我使用了 Dreamweaver 和一個名為 JEdit 的免費程序，以及文本編輯——對我來說一切都很好。
4. 在 CSS 文件中，您將粘貼以下代碼。 （請注意，由/* */包圍的任何文本都不會被雷鳥（或任何讀取 .css 的東西）識別為代碼，它僅作為編碼人員的符號存在。示例/*TEXT*/

編碼：

@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;}

---

第 2 部分：現在是復雜的部分 - 一步一步地拆開閃電插件，將其重新組合在一起，然后將其作為修改后的插件加載到 Thunderbird 中。

1. 下載雷鳥的閃電插件 (lightning-1-1.0b2-tb-macosx.xpi)。 它將有一個 .xpi 擴展名。
2. .xip 文件與 zip 文件相同。 右鍵單擊該文件，單擊“獲取信息”並將擴展名更改為 .zip 而不是 .xpi。 它應該看起來像這個 Lightning-1-1.0b2-tb-macosx.zip。 或者您可以重命名它。 示例：ORIGINLPLUGIN.zip
3. 雙擊文件解壓縮文件。 如果這不起作用，您可能需要下載解壓縮軟件（例如 mac 的 stuffit expander）。
4. 在文件夾中，找到 calendar.jar 文件。 你可以在這里找到它：ORIGINLPLUGIN FOLDER/chrome/calendar.jar
5. 將 calendar.jar 重命名為 calendar.zip，解壓此文件。
6. 現在您需要找到另外三個文件（將它們復制到一個新區域。）
   /content/calendar/calendar-month-view.xml
   /content/calendar/calendar-multiday-view.xml
   /content/calendar/calendar-view-core.xml
7. 使用 JEdit 等程序在這些文件中進行以下編輯。
   符號“<”表示刪除這一行
   符號“>”表示在它的位置添加這一行
   編碼：TOUT SELECTIONNER

-> 日歷/內容/日歷/日歷月視圖.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-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-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">

---

第 3 部分：

1. 進行更改后，保存每個文件。
2. 替換解壓后的日歷文件夾中的原始文件
3. 選擇“皮膚”和“內容”文件夾。 右鍵單擊並選擇“壓縮 2 個項目”。 如果您壓縮文件夾而不是單個文件，這可能不起作用。
4. 重命名這個文件 calendar.jar
5. 用您剛剛創建的新文件替換原來的 calendar.jar 文件。 （見第 2 部分，第 4 步）ORIGINLPLUGIN FOLDER/chrome/calendar.jar

6. 選擇 ORIGINLPLUGIN 文件夾的內容。

   日歷-js
   鉻合金
   chrome.manifest
   成分
   默認值
   安裝文件
   模塊
   時區.sqlite

7. 右鍵單擊所選項目並選擇“壓縮 8 個項目”

8. 將 zip 文件重命名為 ANYNAMEYOUWANT.xpi 例如，您可以將其命名為 modifiedLightningPlug.xpi
9. 加載插件：打開thunderbird>Tools>Add-ons>Plugins>install
10. 找到 ANYNAMEYOUWANT.xpi 文件，讓它加載，然后重新啟動 Thunderbird。

. . . 應該就是這樣。 它對我有用。 我會回來查看是否有其他人在這方面有運氣，如果沒有，我會仔細檢查我的筆記。感謝 TOUT SÉLECTIONNER 編寫原始代碼。

Answer 5

剛剛用這個頁面上的不同想法更新了我做事的方式......我是“法國帖子”的作者，我只需要另一種方法來反轉顏色......

所以這是為了您的樂趣（還有我的用戶！！）

這是對 Lightning xpi 所做修改的統一差異輸出（更准確地說是其中的 calendar.jar 包）

您可以在原始帖子中找到所有信息： http : //www.geckozone.org/forum/viewtopic.php?f=22&t= 89384& start=15#p646027

對於非法語人士，這里有一些翻譯：大家好，

這是更改的更正確版本。 與我之前的提議相比，最大的好處是我們不再需要在文件 userChrome.css 中定義類別/日歷的顏色，而這個文件也根本沒有使用！

總體：

• 對 XML 文件應用更改以允許在 DOM 的各種元素上使用“日歷 ID”和“類別”。

• 更新文件“calendar-views.js”以應用參數化的顏色類別和日歷，但要反轉它們。

• 最后，“calendar-views.css”中的一些 css 更改為：

  • 始終顯示邊框和 1px 的邊距（我認為渲染更好......）
  • 未分類事件的灰色 (# ACACAC ")
  • 選擇元素時僅更改日歷的顏色（即右邊框）（通過添加屬性“.calendar-event-box-container”）

此外，圖像 /skin/calendar/category-overlay.png 已被擴展以增加邊框的大小......

注：只剩下把所有這些東西作為一個選項，但我暫時沒有時間看那里......但如果你們中的一個人能給我一些研究的途徑，我會試一試！

祝一切順利 ：）

文森特

Answer 6

十年過去了，以前所有的答案要么已經過時，要么過於復雜。

此答案針對最新的 Thunderbird (v102.6.0)，支持原生類別顏色，並且僅包含 3 行自定義 CSS。

前	后

請按照以下步驟操作：

1. 如本文所述解鎖自定義 CSS：

   轉到Tools > Settings > General > Config Editor... ，並將toolkit.legacyUserProfileCustomizations.stylesheets設置為true 。

   

   

2. 找到您在這篇文章中提到的個人資料文件夾：

   • Windows： %APPDATA%\Thunderbird\Profiles\xxxxxxxx.default\
   • Linux： ~/.thunderbird/profiles/xxxxxxxx.default/
   • Mac： ~/Library/Thunderbird/Profiles/xxxxxxxx.default/

   在配置文件文件夾下創建chrome/userChrome.css 。 例如，Windows 的完整路徑如下所示： %APPDATA%\Thunderbird\Profiles\xxxxxxxx.default\chrome\userChrome.css

   修改chrome/userChrome.css以包含以下 CSS：

    .calendar-category-box { width: 100%;important; }

3. 重啟雷鳥

4. 將日歷顏色更改為白色以獲得更好的視覺效果：

   

   

5. （可選）自定義類別顏色：

   轉到Tools > Settings > Calendar > Categories並設置自定義類別顏色。

   

6. 全部做完！

將來，如果 Thunderbird 引入重大更改，您可能需要根據Tools > Developer Tools > Developer Toolbox中的檢查結果稍微修改 CSS。

Answer 7

我不是編程人員，所以我找到了修改代碼的方法。

您可以通過創建多個單獨的日歷（例如，您可以調用工作、個人、生日等）來解決這個問題。 您可以選擇每個日歷的背景顏色。 如果您同時使所有日歷都可見（通過選中左側的日歷框），您在每個日歷中輸入的內容將具有不同的背景顏色，而不僅僅是右側的條紋。

當您創建新事件時，不要選擇類別，而是為類別保留“無”，而是在日歷下拉菜單中選擇一個日歷並將您的事件分配給特定日歷（每個都有不同的背景顏色）。

唯一的缺點是，如果您想在某個時候導出日歷，則需要導出所有單獨的日歷。 但否則它的工作原理。

Answer 8

感謝speedballs 的回答，我能夠找到控制類別疊加的文件：下面有一個 PNG 文件：

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

此文件的寬度為 7px，放大它的寬度將放大日歷視圖中的類別顏色疊加。 （我只是使用 GIMP 來水平縮放它。）

因此，似乎 無法使用類別為整個事件着色，因為它的顏色僅通過疊加層 png 的“硬連線”像素寬度進行映射。