「Project/Doc/Creating Skin For Mozilla/findstuff」修訂間的差異
出自 MozTW Wiki
（→'''我如何知道該從何處下手修改?'''） |
|||
| 行 7： | 行 7： | ||
點一下 檔案->Inspect and select the browser window，底下就會出現介面程式碼的樹狀圖，幫助我們找到物件到底在哪裡，還能看到這個物件套用了哪些classes或id，最重要的，這個style是儲存在哪個檔案當中。 | 點一下 檔案->Inspect and select the browser window，底下就會出現介面程式碼的樹狀圖，幫助我們找到物件到底在哪裡，還能看到這個物件套用了哪些classes或id，最重要的，這個style是儲存在哪個檔案當中。 | ||
| + | 點一下Inspect圖示，然後再按瀏覽器的回到上一頁按鈕，這樣就可以找到上一頁按鈕的程式碼並在DOM Inspector中顯示出來，在樹狀圖上會看到xul:toolbarbutton已被選取起來。這只是按鈕的圖案部份而已，但其實回到上一頁按鈕包含了兩部份(回到上一頁 與 瀏覽記錄)，所以如果我們檢視樹狀圖中的上一層就可以看到toolbarbutton，這才是我們想找的東西。 | ||
| − | + | 在DOM inspector的右邊列出了DOM Node的資訊，不過我們感興趣的是在CSS樣式規則。點一下DOM information上的圖示然後選擇CSS樣式規則。 | |
| − | |||
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). | 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). | ||
於 2005年5月11日 (三) 23:01 的修訂
我如何知道該從何處下手修改?
現在你已經把所有需要的檔案解壓縮了，而且你也知道如何修改它們，但是你可能會想知道"要怎麼知道想修改的東西在哪裡啊？"，有個簡單的方法可以找到 - 使用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樣式規則。
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.
