Changing Borders and Colours

This is the part where knowing CSS comes in handy. To find all of the CSS files that we're going to be modifying, we must first understand the directory structure.

Directories

In \mozilla\chrome\classic\skin\classic there are a number of different directories which contain the skin information for the default packages that come with Mozilla. The most important directory is \global. The default Widgets are defined here, and anything that is modified will change throughout Mozilla. If you want to modify how checkboxes, radio buttons, and scrollbars appear, this is the place.

The next directory is the \communicator directory. This is a catchall directory which holds all of the images and styles for portions of Mozilla that don't merit their own individual directory. You'll be able to change the bookmark manager and the profile migration window here.

The 3 remaining directories are pretty self-explanatory. They contain the images/styles for the browser, email client, or html editor.

CSS Files

The CSS files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, etc. For this next part, let's modify the standard button.

Go into \mozilla\chrome\classic\skin\classic\global and open button.css in your favourite text editor. Scroll down to button {. This section defines the normal button in its basic state (There is no mouse over it, it's not disabled, and it's not selected).

Change the background-color: to DarkBlue and the color: to White. Save the file and run Mozilla. When the browser pops up, you probably won't be able to see much. Open the preferences dialog box and take a look at all of the buttons in there. They should all be blue with white text.

Back .: Contents :. Next

改變邊框和色彩

這一部份將會講到一些大略的CSS。為了可以找到所有需要修改的CSS檔案，我們首先必須懂得目錄的結構。

Directories

在 mozilla\chrome\classic\skin\classic 這個資料夾裡有許多不同的目錄，其中包含這個預設skin的資料。 \global是其中最重要的目錄。此處定義預設介面上的一些小元件，任何此處的修改使的Mozilla連帶改變。 如果你想要修改checkbox，radio buttons和scrollbars 的呈現，那麼這裡就是你該來的地方。

下一個資料夾是 \communicator。這是一個多用途的資料夾，這裡存放著所有的圖片和Mozilla所使用的樣式， 這些樣式並不存放在Mozilla自己特有的資料夾。你可以在這裡改變bookmark mangager和profile migration window。

剩下的三個資料夾，它們的名稱已經解釋了它們的功用。它們分別為browser，email client和html editor存放了 圖片和CSS樣式檔案。

CSS Files

在這些目錄裡面的CSS檔案告訴瀏覽器如何呈現按鈕和其他的控制元件，圖片要放在哪裡，border和padding 該如何沿著圖片設置...等等。下一個部分讓我們來修改預設的按鈕。

打開 \mozilla\chrome\classic\skin\classic\global\ 資料夾並且使用你慣用的文字編輯器來開啟button.css。 將游標移到 button{. 這部分定義基本狀態按鈕的外觀(滑鼠並未移到上面、按鈕也並沒有關閉、並且它也沒有被選取)。

將background-color:之後的顏色改成DarkBlue，color:之後的顏色改成White。儲存檔案並且執行Mozilla。 當瀏覽器啟動的時後，很有可能你並無法看到太多變動。打開偏好設定的對話視窗，看看裡面的所有的按鈕。 他們應該會有著藍色的底和白色的文字。

Back .: Contents :. Next