新しいスキンのため、上のような findfile/skin サブディレクトリーを作ります。オリジナルの findfile.css をこのディレクトリーにコピーします。これを新しいスキンのための基礎として使いましょう。まず、どんな変更をしたいのか決めます。カラーの幾つかと、ボタンの境界、そしてチェックボックスのイメージを変更することにします。メニュー、ツールバー、タブパネル全般から始めましょう。

findfile.css に追加する以下のスタイルルールによって、外見は、下のイメージで示した様になります。

window > box {
  background-color: #CCCCCC;
}
  
menubar,toolbar,tabpanel {
  background-color: lightblue;
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
}

ウィンドウの内部にあるボックス (これは、実際は、ウィンドウの内容全体を囲んでいるものです) のカラーは、ライトグレーに変わりました。このグレーは、タブとウィンドウの底部で確認できます。3 つの要素 menubar、toolbar、tabpanel は、ライトブルーで表示されています。これら 3 つの要素の境界は、微妙な 3D の外見となるよう変更されています。注意して見ると分かるでしょう。

('window > box' のための) 上の最初のルールは、ウィンドウの子供のボックスが別のカラーをもつよう指定しています。おそらく、これが最善策という訳ではないでしょう。実際には、これはスタイルシートを使って行なうべきです。そうすることにしましょう。このように XUL を変更することで、ボックスは、ウィンドウの最初の子供である必要はなくなります。

box.findfilesbox {
  background-color: #CCCCCC;
}

XUL:

<box class="findfilesbox" orient="vertical" flex="100%">
<toolbox>

次に、タブを変更しましょう。現在のところ、それは通常のボタンのような外見をしています。どのタブが現在選択されているのかはっきり分かりません。太字のテキストで示されているだけだからです。このため、それは注意を引くものになっていません。

tab {
  background-color: lightblue;
  -moz-border-radius: 8px 8px 0px 0px;
}
  
tab[selected="true"] {
  background-color: #CCCCCC;
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
}

2 つのルールによって、通常のタブの外見を変更しました。最初のルールによって、カラーをライトブルーにしています。2 番目のルールは、Mozilla の特殊なルールで、-moz-border-radius は、角の丸い境界を作ります。ここでは、上部の左右の角が 8 ピクセルの丸みになり、それ以外の角は 0 ピクセルの丸みになります。これは、丸みを付けないということです。これによって、タブはもっとタブらしくなります。

2 番目のルールセットは、selected 属性が true に設定されているタブだけに適用されます。このルールによって、選択されているタブは (その他のタブがライトブルーであるのに対して) ライトグレーで表示され、境界はくぼんで表示されるように変更されます。

ツールバーにある 2 つのボタンも、マウスをその上に動かすとボタンらしく見えますが、ボタンらしくありません。以下のスタイルルールを使うと、ツールバーのボタンは、もっとボタンらしくなります。パッディングを追加して、ボタンを少し大きくします。これがなければ、テキストは境界に対して押し広げられます。同じ理由から、マージンも追加しています。これによって、ボタンは、ツールバーの境界に対して押し広げられることはありません。

toolbar > button.borderless {
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  margin: 2px;
  padding: 2px;
}

次に、下部にある 2 つのボタンを変更しましょう。ボタンは角を丸め、デフォルトボタンのイメージも変更することにします。

button.dialog {
  background-color: #bfbfbf;
  -moz-border-radius: 8px 8px 8px 8px;
}

button.dialog[default] {
  font-weight: bold;
  list-style-image: url("chrome://findfile/skin/defbutton.gif");
  padding-right: 0px;
}

最初のルールによって、ボタンの背景色を (ウィンドウの背景よりも少し濃い) グレーにします。境界の角度を変更し、ボタンの角が丸くなるようにしました。この値を増やすと、ボタンはもっと丸みを帯び、この値を減らすと、通常の外見に近くなります。

2 番目のルールセットは、デフォルトボタンのために使われています。ここでは、Find ボタンです。イメージの簡単な変更をしただけです。padding-right ルールは、ボタンにパッディングを適用するデフォルトの global.css の設定を上書きするのに使われています。

イメージも変更しましたが、2 番目のタブページにあるチェックボックスを描画するために使われているイメージも変更することにしましょう。

checkbox {
  list-style-image: url("chrome://findfile/skin/check-off.gif");
  padding-bottom: 2px;
}
  
checkbox[checked="true"] {
  list-style-image: url("chrome://findfile/skin/check-on.gif");
  margin-bottom: 2px;
}

イメージを変更した結果、もっとカラフルなチェックボックスになりました。マージンを適用したため、チェックボックスは互いに間隔を置いて表示されるようになりました。

最後に、スプリッターのカラーに小さな変更をして、タブパネルの周囲に多少のマージンを表示させます。

tabbox {
  margin: 4px;
}

splitter {
  background-color: #6699CC;
} 

grippy {
  min-width: 60px;
}

これらの変更を行なうと、「ファイル検索」ダイアログは、次のような外見になります。