puhongyi
千年狐狸
千年狐狸
  • UID3
  • 注册日期2004-11-20
  • 最后登录2012-03-29
  • 发帖数1116
  • 经验9枚
  • 威望2点
  • 贡献值38点
  • 好评度19点
阅读:105540回复:43

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

楼主#
更多 发布于:2004-11-27 13:28
作者: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编码格式保存
nibar
火狐狸
火狐狸
  • UID318
  • 注册日期2004-11-28
  • 最后登录2005-04-25
  • 发帖数273
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
1楼#
发布于:2004-11-27 13:28
沙发?

好贴虽然我还不懂其中的意思
谢谢楼主提供
使用FireFox的一分子。
kim_su
小狐狸
小狐狸
  • UID111
  • 注册日期2004-11-25
  • 最后登录2005-02-14
  • 发帖数10
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
2楼#
发布于:2004-11-27 13:28
好使!!!
CONOCO
小狐狸
小狐狸
  • UID472
  • 注册日期2004-12-02
  • 最后登录2004-12-02
  • 发帖数1
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
3楼#
发布于:2004-11-27 13:28
-0-!!!

现成的皮肤我都搞不清怎么装进去...T-T

我都笨死了,有空再研究~

谢谢楼主~~
╭═…× 説明書㊣℡ ×…═╮ ║一生鍾愛網絡︱勢不可擋︱所向披靡║ ┇不願聊天︱但願交友︱脾氣古怪至極┇ ┇做做主頁︱修修博客︱希望認同自己┇ ║哭哭笑笑閙閙︱不枉人生此行︱足以║ ╰═┅═┅═┅═┅┅═┅═┅═┅═╯ ε=ε=ε=┏( ·_·)┛
宇宙火星
非常火狐
非常火狐
  • UID182
  • 注册日期2004-11-26
  • 最后登录2006-04-19
  • 发帖数660
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
4楼#
发布于:2004-11-27 13:28
巨好的东西
应该贴到交流板块,这边太少人来了。

而且这些东西,老外应该研究了不少。收集一些链接方便大家研究也是很好的。
宇宙火星
非常火狐
非常火狐
  • UID182
  • 注册日期2004-11-26
  • 最后登录2006-04-19
  • 发帖数660
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
5楼#
发布于:2004-11-27 13:28
Ryandol
非常火狐
非常火狐
  • UID1379
  • 注册日期2004-12-25
  • 最后登录2019-08-17
  • 发帖数970
  • 经验11枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
6楼#
发布于:2004-11-27 13:28
逼我去学编程语言.........?
刚搞了一个 for Firefox & Opera only 的 Blog:
http://www.onepx.com/
puhongyi
千年狐狸
千年狐狸
  • UID3
  • 注册日期2004-11-20
  • 最后登录2012-03-29
  • 发帖数1116
  • 经验9枚
  • 威望2点
  • 贡献值38点
  • 好评度19点
7楼#
发布于:2004-11-27 13:28
Ryandol:逼我去学编程语言.........?回到原帖


你当然可以使用现成的别人做好的主题,来改变自己Firefox的外观啊
Greatrobert
小狐狸
小狐狸
  • UID1441
  • 注册日期2004-12-26
  • 最后登录2007-08-25
  • 发帖数13
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
8楼#
发布于:2004-11-27 13:28
那我要把字体改为汉仪中黑简font-family: 后面要怎么写;要改为windows自带的宋体又要怎么写?
demonseyes
小狐狸
小狐狸
  • UID102
  • 注册日期2004-11-25
  • 最后登录2007-08-10
  • 发帖数45
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
9楼#
发布于:2004-11-27 13:28
好文章
enjoy your firefox !
fiag
管理员
管理员
  • UID1188
  • 注册日期2004-12-21
  • 最后登录2024-02-19
  • 发帖数4681
  • 经验686枚
  • 威望0点
  • 贡献值402点
  • 好评度51点
10楼#
发布于:2004-11-27 13:28
Greatrobert:那我要把字体改为汉仪中黑简font-family: 后面要怎么写;要改为windows自带的宋体又要怎么写?回到原帖

/* 设置窗口的字体样式和字体大小 */
window {
  font-size: 12px !important;
  font-family: 宋体 !important;
}


注意保存为UTF-8格式
loyis
小狐狸
小狐狸
  • UID1972
  • 注册日期2005-01-09
  • 最后登录2005-01-11
  • 发帖数5
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
11楼#
发布于:2004-11-27 13:28
我能知道這是用什么語言寫的嗎?
我能知道這是用什么語言寫的嗎?
生命如蜉蝣,朝生久死.
fiag
管理员
管理员
  • UID1188
  • 注册日期2004-12-21
  • 最后登录2024-02-19
  • 发帖数4681
  • 经验686枚
  • 威望0点
  • 贡献值402点
  • 好评度51点
12楼#
发布于:2004-11-27 13:28
Re: 我能知道這是用什么語言寫的嗎?
loyis我能知道這是用什么語言寫的嗎?回到原帖


XUL

XULPlanet.com
hnstxx
千年狐狸
千年狐狸
  • UID1952
  • 注册日期2005-01-09
  • 最后登录2013-05-14
  • 发帖数4977
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
13楼#
发布于:2004-11-27 13:28
呵呵,难喽
puhongyi

你当然可以使用现成的别人做好的主题,来改变自己Firefox的外观啊
回到原帖


看来还是要去学习编程阿,不然那天真的落伍了。哎........不是我不认真学习,而是世界变化太快了!? 跟着后辈后面只有追的份,郁闷!!!!!!!!
MM:你是个外表冷酷,内心却很甜蜜的男人。
听涛看海
千年狐狸
千年狐狸
  • UID190
  • 注册日期2004-11-26
  • 最后登录2012-10-12
  • 发帖数1567
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
14楼#
发布于:2004-11-27 13:28
这个东西一定要自己动手改过几个主题之后才会看着比较顺眼。
之前看过N遍都是雾里看花。
现在雾稍微小了点,花儿也看的清楚了点。
上一页
游客

返回顶部