自訂 Firefox 的 About 對話框

前言：這篇是參考自 Jackbin 的教學(MozTW 上的相關討論串)而製作的概要版，圖片編輯方面，請參考我另一篇介紹 Pixia 的文章，或參考 Jackbin 的教學文件中，所提到的 PhotoImpact 。

本篇文章，要教各位，如何修改 Firefox 選單工具列「說明 → 關於 Firefox」中，打開的對話框的樣式。

大致步驟如下：

1. 準備一張寬度在 300px(像素,pixel) 以內的圖片
2. 將圖片丟到 Firefox 設定檔底下的 chrome 資料夾（建議）
3. 修改 userChrome.css （可以利用的方法至少有三種）
4. 關閉後重新啟動 Firefox 程式（視情況也可能不必）

準備圖片

總之弄喜歡的圖片來修改，寬度改成 300px 以內，高度盡量控制在 300px 以內會比較好。

需要編輯圖片的話，可以試試跨平台的 GIMP ，或我個人目前在 Windows 平台上使用的 Pixia （我寫的簡介）。

安置圖片

參考 MozTW 的共筆頁面中的「設定檔詳解」教學，把圖片丟到設定檔資料夾底下，一個叫「 chrome 」的資料夾中放著就好。（註：沒有該資料夾時，請自行建立。）

（註：本引用文的文件授權是採 C.C. Attribution-ShareAlike 2.5 的。）

在Windows 2000/XP 中，通常在
%AppData%\Mozilla\Firefox\Profiles\xxxxxxxx.default\
其中 xxxxxxxx 是一組8字元長度的任意字串。到
C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\
看看就能夠明白。

修改介面

要控制 Firefox 介面的顏色、字型大小、一部分圖示……等樣式的話，只需知道一些些 CSS 語法就可以了（參考此篇教學）。

不過這裡會給各位所需的程式碼，各位只需要知道，該輸入這些程式碼，到哪個地方，就可以了。

首先，最陽春的方法，是在前面提到的 chrome 資料夾下，建立一個 userChrome.css 檔案。隨便拿個純文字編輯器（比如說 Windows 內附的記事本），存檔時，在檔名那欄，填入 userChrome.css 存檔，然後在檔案管理中，確認該檔案類型是「 Cascading Style Sheets 」就好。

接下來，在 userChrome.css 檔案裡，填入以下程式碼，把 YourPicture.png 的地方，改成你要換的圖片(包含副檔名)的檔名，然後把 userChrome.css 存檔就好。

#aboutDialog #clientBox {
background-image: url("YourPicture.png") !important;
}

重新啟動

存檔好了，把 Firefox 視窗全關掉（請先確認瀏覽中的視窗沒有待處理的工作了），再重開 Firefox ，然後從選單工具列「說明 → 關於 Firefox」打開的對話框，應該就會有你設定的背景圖片了。

還想再多改點什麼

比如說版號的位置看起來很礙眼，或是想把對話框拉大一點之類的，建議參考這篇文開頭提到的 Jackbin 的教學弄。

基本上，想把對話框弄高一點，就調整 #clientBox 元素的 height 跟 padding-top 。（預設是 height:380px 跟 padding-top:203px ）

而要調整裡面各段文字的位置的話，就是調整 #version 、 #copyright 跟 #userAgent 這三項的 margin-top 跟 margin-left 就好。（比如說 margin-top 寫負值就可以把 #version 向上移了這樣）

詳細的 CSS 語法，請參考這篇 CSS 教學。

#aboutDialog #version { }
#aboutDialog #copyright { }
#aboutDialog #userAgent { }

完成圖

補充說明

有些人可能會安裝 Stylish 擴充套件，而想要用這個來處理的話，只要點擊「撰寫」，然後「插入」「 XUL Namespace 」在文件開頭，下面再照著寫我上面提到的那些程式碼，修改好按預覽還儲存，就可以馬上看到變化結果了。只是要注意一件事， Stylish 好像只能放絕對路徑的圖片，所以你可能得指定完整的網際網路網址，或本機路徑，不然是跑不出圖來的。所以要指定本機的圖片時，請寫成「 file:///R:/Firefox/chrome/YourPicture.png 」這類的（前面這路徑是舉例的而已），要注意，斜線是由右上向左下撇下來的。