訪客無法瀏覽此圖片或連結,請先 註冊 或 登入會員 。
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主題以外好像都有效..