舊文件

此處文件僅供參考，請自行考量時效性與適用程度，其他庫藏文件請參考文件頁面；
我們亟需您的協助，進行共筆系統搬移、及文件整理工作，詳情請查閱參與我們。

「Project/Doc/Creating Skin For Mozilla/findstuff」修訂間的差異

出自 MozTW Wiki

 
（→‎'''我如何知道該從何處下手修改?'''）
 
(未顯示同一使用者於中間所作的 1 次修訂)
行 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，這才是我們想找的東西。
  
−
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.
+
在DOM inspector的右邊列出了DOM Node的資訊，不過我們感興趣的是在CSS樣式規則。點一下DOM information上的圖示然後選擇CSS樣式規則。
  
−
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.
+
現在旁邊的資訊方塊列會被分成兩個部份，上面是這個物件所有被套用的樣式群組，當你選擇了其中一個項目，就會在資訊方塊列的下面顯示實際會套用的樣式。一項一項的檢查就可以找到套用在按鈕影像的樣式 (.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).
+
接著看看file column，它告訴我們這個檔案位於chrome://navigator/skin/，這是Mozilla 1.2顯示上的小錯誤，其實它是指\navigator\navigator.css (大部份情況會顯示正確的檔案，不過有時候像在這個例子當中則否)。
  
−
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).
+
接著到\mySkin\navigator目錄並開啟navigator.css檔案，你會注意到其中有.toolbar-1類別，然後你就可以修改它指向你要的影像。
  
−
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.
+
這邊預設的影像(chrome://navigator/skin/icons/btn1.gif) 其實是[[Project/Doc/Creating Skin For Mozilla/organize|一群小圖示存在同一個檔案中]]，所以在某處會有段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.
−
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.
 
Just continue this process for everything that you wish to change and you'll have a new skin in no time.

於 2005年5月12日 (四) 17:04 的最新修訂

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

現在你已經把所有需要的檔案解壓縮了，而且你也知道如何修改它們，但是你可能會想知道"要怎麼知道想修改的東西在哪裡啊？"，有個簡單的方法可以找到 - 使用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.

取自 "https://wiki.moztw.org/index.php?title=Project/Doc/Creating_Skin_For_Mozilla/findstuff&oldid=22669"
個人工具