深入瞭解 FireFox 八、userChrome.css & userContent.css 介面的修改

以下將會分為幾個章節來探討這個瀏覽器:

一、常用的附加元件
二、少用的附加元件
三、Plug-in 外掛程式
四、搜尋引擎
五、GreasMonkey 增強網頁功能!
六、免安裝版與精簡 Firefox 來加速啟動
七、userChrome.js 功能的強化
八、userChrome.css & userContent.css 介面的修改
九、火狐的安全
十、編譯版、參數、雜項跟加速
十一、自製皮膚
十二、總結

八、userChrome.css & userContent.css 介面的修改

userChrome.js 是用來增加各種功能的。而這邊要介紹的 userChrome.css 和 userContent.css 則是修改各種:介面!!

先複習下:附加元件 Stylish 的就是讓你可以直接將你所要修改的管理樣是套用,而在 userstyles.org 這個樣式蒐集網站中就可以看到許多修改 Firefox介面的樣式。

我們在這裡可以將你要的樣式編碼複製下來,貼到 userChrome.css 中,重新啟動及可看到效果,不需要安裝 Stylish !!(stylish的好處就是不用重啟就看的到效果了)

先重複一遍:

資料夾 chrome 的位置是在:

XP是在 C:\Documents and Settings\使用者名稱\Application Data\Mozilla\Firefox\Profiles\8位亂數.default\chrome

Vista和win7是在 C:\Users\使用者名稱\AppData\Roaming\Mozilla\Firefox\Profiles\8位亂數.default\chrome

可將預設的 UserChrome-example.css 改名為 userChrome.css  後使用。

userChrome.css—-控制Firefox介面

它所用的語法為:

/*註解開始~~~

註解的部分不會執行~可利用此來關閉不想要的功能

~~~註解結束*/

它所能修改的範圍之廣也是要寫寫不完的~在此就只略略提供我自己有所使用的設定:

/* ==UserStyle==
地址欄RSS圖標透明化or隱藏
// ==/UserStyle==*//*

#feed-button {opacity: 0.35 !important;}

#feed-button:hover {opacity: 1.5 !important;}

/*#feed-button{ display:none !important; }*//*這行是完全隱藏圖標*/
feed-button

/* ==UserStyle==
隱藏書籤-訂閱此頁面(因 為我不用Firefox內建的rss)
// ==/UserStyle==*/

#subscribeToPageMenuitem, #subscribeToPageMenupopup

{ display:none !important;

}

/* 隱藏狀態欄進度條 */

#statusbar-progresspanel {display: none !important;}

/*使用前*/

statusbar-progresspanelOFF

/*使用後*/

statusbar-progresspanelON

/* 狀態欄背景設為透明 */

#status-bar {-moz-appearance: none  !important;background: transparent !important;}

/* ==UserStyle==
項目整齊排列 Customize Toolbar window – dynamic columns
// ==/UserStyle==*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* allow any number of columns in Customize Toolbar box */

#palette-box {

float: left !important;

overflow-x: hidden !important;

}

#palette-box .paletteRow {

display: inline !important;

}

#palette-box toolbarpaletteitem {

display: inline !important;

width: 105px !important;

height: 85px !important;

margin: 0 !important;

padding: 0 !important;

}

#palette-box toolbarpaletteitem > hbox,

#palette-box toolbarpaletteitem label {

display: inline !important;

}

/* fix separator */

#wrapper-separator #separator {

display: inline !important;

font-size: 40px !important;

}

/* make all buttons’ text be on the bottom – thanks Grist! */

#palette-box toolbarpaletteitem toolbarbutton {

-moz-box-orient: vertical !important;

text-align: center !important;

}

/* show button that AIOS hides by mistake */

#wrapper-console2-button #console2-button {

display: -moz-box !important;

}

/*使用前 VS 使用後*/

Customize Toolbar Window-dynamic Columns OFF Customize Toolbar Window-dynamic Columns ON

/* ==UserStyle==
合併重新整理-停止按鈕 Combine Stop/Reload buttons(要自行將停止按鈕移到重新整理的左邊才有作用)
// ==/UserStyle==*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#stop-button[disabled="true"] { display:none; }

#stop-button:not([disabled]) + #reload-button { display:none; }

Combine Stop\Reload buttons

/* ==UserStyle==
添加書籤時直接顯示Tag欄
// ==/UserStyle==*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* Mostrare i campi indirizzo, descrizione e keyword nel pannello per l’aggiunta di un nuovo segnalibro */

#editBMPanel_descriptionRow, /* campo descrizione */

#editBMPanel_locationRow, /* campo indirizzo */

#editBMPanel_keywordRow /* campo keyword (parola chiave) */{

visibility: visible;

-moz-box-align: center;

}

/*使用前 vs 使用後*/

Tag OFF Tag ON

/* ==UserStyle==
隱藏書籤選單"將本頁加入書籤"、 “管理書籤"、 “將所有標籤頁加為書籤" (因為使用地址欄上的星號來加入書籤更方便)

// ==/UserStyle==*/

menuitem[key="addBookmarkAsKb"],

/*menuitem[key="manBookmarkKb"],*//*此行為隱藏管理書籤*/

menuitem[key="bookmarkAllTabsKb"] {

display: none !important;

}

bookmarkAllTabs

/* ==UserStyle==
隱藏書籤右鍵"全部用分頁開啟"
// ==/UserStyle==*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

@-moz-document url(“chrome://browser/content/browser.xul") {

menuitem[oncommand="openUILink(this.getAttribute(‘siteURI’), event);"],

menuitem[oncommand="PlacesUIUtils.openContainerNodeInTabs(this.parentNode._resultNode, event);"],

menuseparator[builder="end"] {

display:none   !important;

}

}

openUILink

/* ==UserStyle==
隱藏添加搜索引擎選項(Add Engines)(搜尋引擎都已經完全整理好了,就把這個選項隱藏~)
// ==/UserStyle==*/

#search-proxy-button menuitem[label=Add engines …] {display: none;

}

/* ==UserStyle==
隱藏右鍵菜單 ,不希望隱藏的就把它給註解掉
// ==/UserStyle==*/

/* ==右鍵選單- 鍵結==*/

#context-openlink, /* 在新視窗中打開 */

#context-openlinkintab, /* 在新分頁中打開 */

#context-sep-open, /* “在新分頁中打開"下的分隔線 */

#context-bookmarklink, /* 將此鍵結加入書籤* /

/* #context-savelink,  鍵結令存為… */

#context-sendlink, /* 郵寄鍵結 */

/*#context-copyemail,  複製Email地址 */

/*#context-copylink,  複製鍵結地址 */

#context-sep-copylink, /* “複製鍵結地址"下的分隔線 */

/* ==右鍵選單- 圖片==*/

#context-viewimage, /* 查看圖片 */

#context-copyimage-contents, /* 複製圖片 */

/*#context-copyimage, 複製圖片地址 */

#context-sep-copyimage, /* “複製圖片地址"下的分隔線 */

/*#context-saveimage, 圖片另存為… */

#context-sendimage, /* 郵寄圖片 */

#context-setWallpaper, /* 設為桌布 */

#context-setDesktopBackground, /* Set As Desktop Background… */

#context-blockimage, /* 阻擋…的圖片 */

/* ==右鍵選單- 頁面==*/

#context-back, /* 後退 */

#context-forward, /* 前進 /

#context-reload, /* 重新整理 */

#context-stop, /* 停止 */

/*#context-sep-stop, “停止"下面的分隔線 */

#context-bookmarkpage, /* 將此頁加入書籤 */

#context-savepage, /* 另存頁面為… */

#context-sendpage, /* 郵寄此頁面 */

#context-sep-viewbgimage, /* “查看背景圖片"上面的分隔線 */

#context-viewbgimage, /*  查看背景圖片 */

/* ==右鍵選單-文字輸入區塊==*/

#context-undo, /* 復原 */

/*#context-sep-undo,  “復原"下面的分隔線 */

/*#context-cut,  剪下 */

/*#context-copy,  複製 */

/*#context-paste,  貼上 */

/*#context-delete,  刪除 */

#context-sep-paste, /* “貼上"下面的分隔線 */

#context-selectall, /* 全選 */

#context-sep-selectall, /* “全選"下面的分隔線 */

/* ==右鍵選單-其他==*/

#context-keywordfield, /* 將關鍵字加入搜尋引擎 */

#context-searchselect, /* 以…搜尋 */

#frame-sep, /* 分隔線 */

#frame, /* 框架 */

#context-sep-properties, /* 分隔線 */

#context-viewpartialsource-selection, /* 檢視選擇範圍原始碼 */

#context-viewpartialsource-mathml, /* 檢視MathML原始碼 */

#context-viewsource, /* 檢視原始碼 */

#context-viewinfo, /* 檢視頁面資訊 */

#context-metadata, /* Properties */

#context-sep-bidi, /* 分隔線 */

#context-bidi-text-direction-toggle, /* 轉變文字方向 */

#context-bidi-page-direction-toggle /* 轉變頁面方向 */{

display:none !important;

}
#edit-menu { display: none;}

隱藏右鍵選單

其餘的,可以自行 google 或到 userstyles.org 找尋~,以下列出幾個蒐集的帖子:

MozTW:Firefox 一分鐘教室-userChrome.css

Mozest社區:userChrome.css 相關技巧

userContent.css—用來改變網頁的外觀

這裡的也可以到 userstyles.org 來找尋修改網頁樣式的

我在此只使用了三個:

/* ~~~~讓 Firefox 的網頁輸入框也像Safari一樣高亮發光~~~~ */

input:focus, select:focus, textarea:focus {

outline: 2px solid #10bae0 ;

-moz-outline-radius: 3px ;

}

safari 風格輸入框

/* ~~~~ 圖片置中Center Images ~~~~ */

@namespace url(http://www.w3.org/1999/xhtml);

html > body > img:only-child {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

padding: 3px;

}

/* Force text to wrap when it is longer than the screen width */

pre {white-space:-moz-pre-wrap}

/*使用前 vs 使用後 */

Center Images OFF Center Images ON

/* ~~~~ 顯示圖片無法顯示的"圖示"Show image placeholders ~~~~ */

@-moz-document url-prefix(http), url-prefix(file) {

img:-moz-broken{

-moz-force-broken-image-icon:1;

width:24px;

height:24px;

}

}

/*使用前*/

Show Image Place holders OFF

/*使用後*/

Show Image Place holders ON

雖說在這邊修改的同樣也可以在 Stylish 中修改達成,但這些功能我覺得是基本就該具備的。

所以採用直接寫進設定的做法。

好了~~主軸總算到了一段落了!!~想寫的都寫得差不多了,剩下幾章就做為說說無法歸類的一些東西吧~~

  • Kay

    版大你好@@
    我將你上面提供的那個{讓 Firefox 的網頁輸入框也像Safari一樣高亮發光}貼進去之後,火狐只有在網頁裡面(例如我現在輸入的留言欄)有高亮外框,卻沒有向你的那樣連網址欄和搜索欄也一起高亮呢!請問是否還要寫其他的語法呢??O.O

  • Flymia

    To Kay:
    在firefox4中確實只有網頁內容有效喔!截圖中是firefox3的。
    至於更新的語法,目前我還沒看到XD
    等我目前在做的事告一段落後會再補打一篇firefox4的增訂~