發新話題

[分享] 教你如何個性化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主題以外好像都有效..

本帖最近評分記錄
  • sendoh96 經驗 +10 內容精彩 2007-6-19 02:24
  • sendoh96 金幣 +10 內容精彩 2007-6-19 02:24

TOP

如果你屬於下列幾種人之一:
1. 不想看到網路廣告
2. 重視網路安全性
3. 追求網頁的載入速度
4. 只想裝自己想要的功能
5. 就是不爽用微軟

那麼,歡迎加入訪客無法瀏覽此圖片或連結,請先 註冊登入會員 使用者的行列!^0^
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
附:日文版Firefox的推廣吉祥物訪客無法瀏覽此圖片或連結,請先 註冊登入會員 ,很可愛吧~
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
以下介紹一下Firefox的優缺點和我目前使用的附加元件(add-on)。

我在05年開始使用Firefox(以下簡稱Fx)。當時因為電腦被駭,中了木馬和廣告病毒,花了將近兩天掃毒才把瀕臨壽終正寢的電腦拯救回來。之後除了更換防毒軟體(切身之痛!請不要相信「批西西林」的掃木馬功能!)與加裝反廣告軟體,也毅然把瀏覽器從IE改為據說較安全的Fx。用了那麼多年的IE,剛開始轉到Fx自然也有訪客無法瀏覽此圖片或連結,請先 註冊登入會員 。而且,Fx也並非十全十美,但我可以肯定,Fx的好處會讓我再也不想回頭用IE!

先說一下Fx的缺點吧。第一就是因為微軟惡勢力太龐大,目前仍有不少網站只賣IE的帳(個人經驗是日本網站居多),不過此問題可用「IE Tab」套件解決90%(意思是10%可能沒辦法,例如從MSN點MSN Space的話,肯定會用IE開啟)。第二是,假如是那種打死都不想自己設定瀏覽器功能的人,那就還是用IE吧,免得用了Fx又哇哇叫這功能沒有那功能沒有。
Fx的優點一開始也說過了,就是「安全、快速、便利」。由於Fx標榜小而美,有些進階功能需要安裝附加元件(add-on,或稱套件)才辦得到,但安裝套件很簡單,只要下載,系統會自動安裝,重新開啟Fx後,套件就啟用了(有些需要進階設定)(註:Fx有恢復先前瀏覽狀態的功能,所以不用怕重新開啟程式後先前瀏覽的網頁會不見)。

下面就來介紹我覺得最好用的套件(有些套件會因應Fx升級或作者debug而有更新版,建議去訪客無法瀏覽此圖片或連結,請先 註冊登入會員 下載最新版的程式):

訪客無法瀏覽此圖片或連結,請先 註冊登入會員
必備套件第一名!只需訂閱過濾條件集便可消滅90%的網路廣告(包括Google Adsense)。唯一不能消滅的是文字和flash廣告,但它也具有擋flash的功能,所以遇到惱人的flash音樂播放器也很好用!

訪客無法瀏覽此圖片或連結,請先 註冊登入會員
比Adblock更絕的一招!若要用Adblock擋flash,必須手動加入過濾條件才會有效,而這個套件是把網頁上的所有flash檔、不管音樂影片遊戲圖片,全都變成小箭頭,要按下去才會播放。一來可節省網頁載入時間,二來是可以完全杜絕flash內嵌音樂自動播放。但壞處就是現在一堆網站全是flash構成,假如要去那類網站就會點小箭頭點到手軟,不然就得把該網站列入白名單。

訪客無法瀏覽此圖片或連結,請先 註冊登入會員
PCMan作者開發的套件喔!前面說到,有些網站就是機車只准你用IE看,這時就用這個套件來破解!非常簡單,下載後會有個小圖示常駐在網頁右下角,只要按那圖示就可以隨時切換用Fx或IE瀏覽囉。

訪客無法瀏覽此圖片或連結,請先 註冊登入會員
如果你超痛恨會自動播放音樂的網頁,除了加入訪客無法瀏覽此圖片或連結,請先 註冊登入會員 之外,也請絕對要下載這個套件。它可以用來取消網頁內嵌影音(如mp3、midi)的自動播放,不過沒辦法擋flash播放器。
下面則是我覺得可用來補足Fx缺點的套件,也就是要實際用過Fx才會發現需要的:
Copy Link Name:複製連結名稱。
Download Statusbar:讓下載工作顯示在下方狀態列。
Menu Editor:可自訂工具列及滑鼠右鍵選單內容。
Right Encoding:在滑鼠右鍵選單中加入「語言及字元編碼」的選項。
Show Image:在滑鼠右鍵選單中加入「顯示圖片」的選項。
Tab Mix Plus:強化分頁功能。
Text Link:將網頁上的純文字URL自動轉為網址開啟。

可參考中文官網由網友票選的訪客無法瀏覽此圖片或連結,請先 註冊登入會員 ,選擇喜歡的套件下載。

TOP

推~推~推~推推推~推啦~~~!!!

TOP

謝謝分享推推推

TOP

發新話題

本站所有圖文均屬網友發表,僅代表作者的觀點與本站無關,如有侵權請通知版主會盡快刪除。