我如何知道該從何處下手修改?

現在你已經把所有需要的檔案解壓縮了，而且你也知道如何修改它們，但是你可能會想知道"要怎麼知道想修改的東西在哪裡啊？"，有個簡單的方法可以找到 - 使用DOM inspector。如果你第一次安裝Mozilla的時候沒有安裝它的話，你需要再執行一遍安裝程式。

載入Mozilla，打開一個瀏覽器視窗，開啟DOM Inspector (工具->Development->DOM Inspector)

點一下 檔案->Inspect and select the browser window，底下就會出現介面程式碼的樹狀圖，幫助我們找到物件到底在哪裡，還能看到這個物件套用了哪些classes或id，最重要的，這個style是儲存在哪個檔案當中。

點一下Inspect圖示，然後再按瀏覽器的回到上一頁按鈕，這樣就可以找到上一頁按鈕的程式碼並在DOM Inspector中顯示出來，在樹狀圖上會看到xul:toolbarbutton已被選取起來。這只是按鈕的圖案部份而已，但其實回到上一頁按鈕包含了兩部份(回到上一頁 與 瀏覽記錄)，所以如果我們檢視樹狀圖中的上一層就可以看到toolbarbutton，這才是我們想找的東西。

在DOM inspector的右邊列出了DOM Node的資訊，不過我們感興趣的是在CSS樣式規則。點一下DOM information上的圖示然後選擇CSS樣式規則。

現在旁邊的資訊方塊列會被分成兩個部份，上面是這個物件所有被套用的樣式群組，當你選擇了其中一個項目，就會在資訊方塊列的下面顯示實際會套用的樣式。一項一項的檢查就可以找到套用在按鈕影像的樣式 (.toolbarButton-1)。

接著看看file column，它告訴我們這個檔案位於chrome://navigator/skin/，這是Mozilla 1.2顯示上的小錯誤，其實它是指\navigator\navigator.css (大部份情況會顯示正確的檔案，不過有時候像在這個例子當中則否)。

接著到\mySkin\navigator目錄並開啟navigator.css檔案，你會注意到其中有.toolbar-1類別，然後你就可以修改它指向你要的影像。

這邊預設的影像(chrome://navigator/skin/icons/btn1.gif) 其實是一群小圖示存在同一個檔案中，所以在某處會有段css命令告訴Mozilla要顯示大圖中的哪一部分。如果你回到DOM inspector看Rule column，會找到#back-button項目，把它選擇起來會列出一群指令如-x-image-region-left The image that is listed there by default (chrome://navigator/skin/icons/btn1.gif) is actually a bunch of images grouped together in one file, so somewhere one of the CSS attributes is telling it what portion of the larger image to cut out and display.機 If you go back into the DOM inspector and look at the Rule column again, you'll see the #back-button id. Select that one and it lists a bunch of -x-image-region-left type styles in chrome://navigator/skin/. Open up navigator.css, again (if you closed it), and look for the #back-button section. It has a -moz-image-region style in there which you can change. If you look through the rest of this file, you'll also notice that there are regions for the different states of #back-button. Change those to match your new image as well.

Just continue this process for everything that you wish to change and you'll have a new skin in no time.