打造个性化的Firefox浏览器外观

打造个性化的Firefox浏览器外观内容简介： 　　您是否经常被恶意病毒、木马、插件困扰?火狐浏览器可以解决这一难题!您是否经常开一排窗口?Firefox有类似腾讯浏览器的多窗口功能。

　　Firefox火狐浏览器拥有人性化界面，能够阻止病毒、间谍软件和弹出窗口的侵扰。便捷的导入您的收藏。集成更多有用的功能，例如分页浏览，及时书签，整合搜索框, Firefox将会带给您全新的网络体验。

　　在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主题以外好像都有效..