在工具列的右邊加上影像

這篇指南是針對Mozilla 1.2，一些檔案的配置可能會隨著時間及版本不同而改變，不過基本的部份應該是相同的。

Mozilla 1.2的預設值是不支援在工具列的右邊加上影像，不過我們可以對XBL稍作修改來達成目的，將這個xml檔案置於\classic\skin\classic\communicator\toolbar\toolbarBindings.xml (你可能需要自行建立這些子目錄)。 What this file does, is it takes the standard toolbar that is used in Mozilla and adds an image to the one side of it. If you look at the modern skin, you'll notice that it adds the image to the other side of the toolbar.

現在我們已經讓工具列可以被修改了，開啟\classic\skin\classic\communicator\communicator.css 然後找到.toolbar-primary段落，裡頭有一行命令-moz-binding，將URL指向新的位置。

將 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-primary");

改成 -moz-binding: url("chrome://communicator/skin/toolbar/toolbarBindings.xml#toolbar-primary");

現在所有工具列的右邊都可以顯示影像了，接下來就開始加入要顯示出來的影像，首先先確認我們可以看到要加入的影像，還要在communicator.css加入一段：

.toolbar-primary-icon { width: 100px; background-repeat: no-repeat; background-position: top; }

開啟\classic\skin\classic\navigator\navigator.css並捲動到文末，為了加入影像，我們要能夠處理工具列及工具列內的方塊和要加入的影像。

使用DOM inspector可以找到瀏覽工具列的資訊，id是nav-bar。它包含一個類別為.toolbar-holder的xul:hbox(物件??)。在toolbarBindings.xml檔案中也有定義這個.toolbar-holder類別，Mozilla就是從這些地方取出xml檔案中的程式碼並合併在一起。在這個xml檔案中有個影像，類別為toolbar-primary-icon

將這三個部份擺在一起，你就得到了#nav-bar > .toolbar-holder > .toolbar-primary-icon

在這個段落內你可以加入影像了，給background-image設定一個url，就像：

#nav-bar > .toolbar-holder > .toolbar-primary-icon {
 background-image: url("chrome://navigator/skin/icons/dino.png"); }

將影像擺在指定目錄下，開啟mozila看看你的創作吧。如果瀏覽工具列消失或是有其它問題，就再回來檢查每一個步驟，特別是-moz-binding命令。