略谈userChrome.css(自己动手设置Firefox的外观)转载

作者：otherside  原文地址

在Firefox的外观定义中，Mozilla使用了类似XML的XUL界面语言来实现，并且引入CSS定义各个元素的属性，即userChrome.CSS。

由于每个人的系统设置不同，加之中文和西文的字体显示有些不同，所以我们在使用hills的主题之前，一般都会根据自己的需要对useChrome做适当的修改（比如修改字形字号）。so..为了便于以后修改，先简单讲一下在默认情况下涉及到的CSS属性吧。在userChrome中涉及的CSS属性主要有：

font-family (字体系列）
允许值 [[<系列名>|<一般系列>],]*[<系列名>|<一般系列>]
初始值 与用户代理有关
可否继承 是
适用于 所有元素

font-weight （字体加粗）
允许值 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值 normal
可否继承 是
适用于 所有元素

font-size （字体尺寸）
允许值 可以定义成xx-small, large等值，但是这里一般使用pt(磅)作为单位
初识值 medium
可否继承 是
适用于 所有元素

padding（补白）
允许值 [<长度> | <百分比>]

margin （边界）
允许值 [<长度> | <百分比>]

!important (important rule，重要规则)
表示此规则无视其它规则的继承性

注意!!! 由于中文字形很少有9pt（也就是12px）以下的点阵字体，所以如果你想要更好的现实效果，建议将所有8pt的字体尺寸改为9pt。如果发现修改字形以后发生元素错位（比如偏高或偏低）可以利用修改该元素的padding属性来调整高度。

虽然只是CSS的冰山一角，但是有了以上的知识我们就可以根据自己的需要来修改userchrome啦..比如你知道，如果你想给书签栏换一个字体，就应该修改它的 font-family属性，如果你想让它用粗体显示呢，就要把font-weight从normal改为bold。如果你继续钻研一下CSS，还会有更多的修改方法。当然，最好不要改掉原userchrome中设置的!important标记。


以下是userChrome.CSS中各个部分的作用域，虽然用的是otherside自己的userChrome，但是结构和顺序与原userChrome相比没有变化。

/*
* Edit this file and copy it as userChrome.CSS into your
* profile-directory/chrome/
*/

/*
* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.
*/

/*
* Do not remove the @namespace line -- it's required for correct functioning
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; /* set default namespace to XUL */
}

/* ::::: fixed font settings ::::: */

声明名字空间及说明部分，请勿修改。


#urlbar {
font-family: lucida grande, lucida grande !important;
font-weight: normal !important;
font-size: 9pt !important;
}

地址栏字体定义，定义了字体系列，字体加粗，字体尺寸。


.textbox-input-box {
font-family: lucida grande, lucida grande !important;
font-weight: normal !important;
font-size: 9pt !important;
margin-bottom: 1px !important;
}

文字输入框字体定义，定义了字体系列，字体加粗，字体尺寸，下边距。


.searchbar-engine-image {
margin-bottom: -1px !important;
}

.searchbar-dropmarker-image {
margin-bottom: -1px !important;
}

搜索引擎栏图片定义，定义了下边距。


.bookmark-item > .toolbarbutton-text {
font-family: lucida grande !important;
font-weight: bold !important;
font-size: 8pt !important;
padding-top: 3px !important;
}

书签栏字体定义，定义了字体系列，字体加粗，字体尺寸，下边留白。


tab {
font-family: lucida grande, lucida grande !important;
font-weight: normal !important;
font-size: 8pt !important;
}

.tabbrowser-tabs .tab-text {
font-family: lucida grande !important;
font-weight: bold !important;
font-size: 8pt !important;
padding-top: 1px !important;
}

.tabbrowser-tabs *|tab[selected="true"] .tab-text {
padding-top: 1px !important;
}

.tabbrowser-tabs .tab-text2 {
font-family: lucida grande !important;
font-weight: bold !important;
font-size: 8pt !important;
padding-top: 1px !important;
}

标签栏字体定义，定义了字体系列，字体加粗，字体尺寸，下边留白。
注意!!! 如果你修改了.tabbrowser-tabs中其中一项的某一属性，其他项的属性应该与其保持一致。


.tabbrowser-tabs .tab-icon {
margin: 3px 1px 3px 0px !important;
}

.tabbrowser-tabs *|tab[selected="true"] .tab-icon {
margin: 3px 1px 3px 0px !important;
}

标签栏图标位置定义，定义了图表的下边距。


.autocomplete-treebody::-moz-tree-cell-text {
font-family: lucida grande, lucida grande !important;
font-weight: normal !important;
font-size: 9pt !important;
}

自动填充完成列表的字体定义，定义了字体系列，字体加粗，字体尺寸。


tree {
font-family: lucida grande, lucida grande !important;
font-weight: normal !important;
font-size: 9pt !important;
}

树形列表字体定义，定义了字体系列，字体加粗，字体尺寸。
本部分定义对Sidebar部分的字体有效，比如书签纪录(Ctrl+b)和历史纪录(Ctrl+h)。


popup, menu, menuitem {
font-family: lucida grande, lucida grande !important;
font-size: 9pt !important;
text-align: left !important;
}

菜单字体的定义，定义了字体系列，字体尺寸以及对齐方式。


menulist {
font-family: lucida grande, lucida grande !important;
font-size: 9pt !important;
}

菜单栏字体定义，定义了字体系列，字体尺寸。


#status-bar,
#bookmark-window statusbar {
font-family: lucida grande, lucida grande !important;
font-weight: normal !important;
font-size: 8pt !important;
}

状态栏字体定义，定义了字体系列，字体加粗，字体尺寸。


#FindToolbar {
font-family: lucida grande, lucida grande !important;
font-size: 9pt !important;
}

查找栏(Ctrl+f)字体定义，定义了字体系列，字体尺寸。


以下是一些修改方法的举例，你可以举一反三的派生出更多方法。

关于标签字体颜色。

如果你想修改标签字体颜色，可以修改以下字段
sample:


.tabbrowser-tabs .tab-text2 {
color: red !important;
font-family: lucida grande !important;
font-weight: bold !important;
font-size: 8pt !important;
padding-top: 1px !important;
}

给tabbrowser-tabs .tab-text2类加上color属性，值可以是标准16色或RGB颜色或16进制颜色(比如#FFFFFF是白色)。
如果你不知道想使用的颜色值，可以在photoshop或fireworks的调色板下查到16进制颜色值。

关于书签栏上方的分隔线。

如果你想去掉这条分隔线
在userChrome.CSS中加入


toolbar, menubar {
border-bottom: 2px solid !important;
-moz-border-bottom-colors: transparent transparent !important;
}

除了safari主题以外好像都有效..
如有疏漏之处还请大家指正

---------------------------------------------------
mugedy
不好意思，老大，直接编辑你的文章了
1、另一篇关于此的帖子
https://www.firefox.net.cn/forum_posts.asp?TID=414&PN=2
2、请大家注意
如果你的版本是中文版，请不要套用这些内容，例如英文版中menu[label="Go"]，在中文版中应该为menu[label="转到"]。这个如何得知，可以用dom inspector查看
另外一点需要注意的是，如果是中文版，保存的时候一定要选择用utf-8编码格式保存

好文,顶起!
路径的比较方便的定位是:
地址栏输入: about:support
点击 打开所在文件夹, 然后该文件夹下就有个chrome目录
在它下面建立个userchrome.css文件即可,  如果已经存在,编辑即可

我想把strata40主题中地址栏的书签星号放到左边，通过userchrome.css或者什么方式，有没有什么办法？

Jeremy：怎样取消加粗当前标签的字体？回到原帖

.tabbrowser-tab[selected="true"] {font-weight: normal !important;}

看得头晕。。

怎样取消加粗当前标签的字体？

头都看晕了，我觉得还是用扩展和主题修改界面更方便一些。。。

不错，正需要这个来学习一下，谢谢！！！

好东西，

清问userChrome.css这个文件在哪里啊,能给个地址吗,我是XP的系统

userChrome-example.css 或 userChrome.css 都没找到啊

究竟在哪里呢？ 我是VISTA

今天我终于领会了这种方法哈哈，真是师傅领进门，修行靠自己啊，谢谢

这个东西也太专业了,还是用主题,扩展,插件什么的来达到目的很直观.

我那帖子里面没有介绍右键的ID的用法

你可以这样定位，先找到id为ContentAreaContextMenu，展开到xul：scrollbox，然后展开它，到xul：box，在展开就是右键菜单项目了，从ID基本上也就可以知道了。

还有记得论坛以前有人回帖他是怎么找的，他是打开扩展，里面的xul文件里面搜索出来的。具体搜索论坛把

lord：如何用dom inspector？我想去掉一些右键菜单的项目，比如adblock的，该如何查看它的id呢？回到原帖

https://www.firefox.net.cn/newforum/view ... hp?t=15863