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

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

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

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

Click on the Inspect icon and then click on the back button in the browser window. What this will do is find the code for the back button and display it in the DOM Inspector. Selected in the Tree view will be xul:toolbarbutton. This is the portion of the icon with only the image. But the back button is made up of two parts (The back portion and the history portion), so if we move one level up in the tree we'll see toolbarbutton. This is what we want.

On the right hand side of the DOM inspector, what will be listed is the DOM Node information. But what we're interested in is the CSS Style Rules. Click the icon located above the DOM information and choose CSS Style Rules.

The side bar will now be split into two parts. At the top, there is a list of all the groups of styles that are applied to this object. When you select an item in the list the bottom portion will display the actual styles that are applied. Go through this list one item at a time and find the one which applies the image to the button (.toolbarButton-1).

Look at the file column. It says that the file is located in chrome://navigator/skin/. This is a small problem with the display in Mozilla 1.2 what it means is \navigator\navigator.css (Most of the time it displays the file correctly, but sometimes, like in this case, it does not).

Go into \mySkin\navigator and load navigator.css. You'll notice that the .toolbar-1 class is located here. Now you can point the image to wherever you like.

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.