firefoxのカスタマイズをしているのですが。。

質問

ユーザースタイルをいじりフラットなデザインにしています。
「ブックマーク」のところだけフラットになりません。
どのようにしたら変わりますでしょうか。

また、フォルダアイコンを以前変えようといじったのですがうまく変わってくれませんでした。
こちらも変更方法があれば教えてください。

回答No.1

neddoheny · ベストアンサー

添付画像を見る限りでは「ブックマーク」と表示のあるサイドバーのヘッダー部分のことかな。

その部分はFirefoxのデフォルトのテーマでは元々フラットなので、CSSで何か変更してるかまたは他のテーマを適用して立体っぽくしてるかでしょう。

例えば、以下のように記述すれば、基本的にはフラットな筈です。

sidebarheader {
-moz-appearance: none !important;
background: black !important;
border: none !important;
}

＞フォルダアイコン

例えばサイドバーでしたら基本的には、以下のような感じで記述すればいいでしょう。

#bookmarksPanel treechildren::-moz-tree-image(container) {
list-style-image: url(フォルダ画像URL) !important;
-moz-image-region: auto !important;
}

わかりやすく例題的にコードを書いておくと、

#bookmarksPanel treechildren::-moz-tree-image(container),
#bookmarksToolbarFolderMenu, #bookmarksToolbarFolderMenu [container],
.bookmark-item[container] {
list-style-image: url("chrome://browser/skin/Toolbar-small.png") !important;
-moz-image-region: rect(16px 128px 32px 112px) !important;
}

と記述してみてください。
Firefox3.6で試してみれば、フォルダが変更されたのがわかるはずです。(サイドバーは一度閉じて再度サイドバー自体を開くと反映される）
尚、Firefox4は上記のフォルダ画像のURLは適用外。

あとは、自分でいろいろ勉強してみてください。

補足

ありがとうございます。

フラットになりました！
感動です。

フォルダアイコンですが、真っ黒です。。。
firefoxのインストールフォルダ中のchromeフォルダに「FOLDER_16x16-32.png」をいれてます。

以下、コード全文です。

toolbox#navigator-toolbox {
border-left: 1px solid ThreeDHighlight !important;
}

hbox#browser {
border-left: 1px solid ThreeDHighlight !important;
}

hbox#browser .plain {
-moz-appearance: listbox !important;
}

tabbrowser {
background: ThreeDFace !important;
}

tab {
-moz-appearance: tab !important;
margin-top: 3px !important;
}

tab[selected="true"] {
margin-top: 1px !important;
}

#searchbar .search-go-button{
display: none !important;
}

#bookmarksPanel treechildren::-moz-tree-image(container),
#bookmarksToolbarFolderMenu, #bookmarksToolbarFolderMenu [container],
.bookmark-item[container] {
list-style-image: url("chrome://FOLDER_16x16-32.png") !important;
-moz-image-region: rect(16px 128px 32px 112px) !important;
}

sidebarheader {
-moz-appearance: none !important;
background: black !important;
border: none !important;
}