以下將會分為幾個章節來探討這個瀏覽器：
一、常用的附加元件
二、少用的附加元件
三、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; }*//*這行是完全隱藏圖標*/
/* ==UserStyle==
隱藏書籤-訂閱此頁面(因 為我不用Firefox內建的rss)
// ==/UserStyle==*/
#subscribeToPageMenuitem, #subscribeToPageMenupopup
{ display:none !important;
}
/* 隱藏狀態欄進度條 */
#statusbar-progresspanel {display: none !important;}
/*使用前*/
/*使用後*/
/* 狀態欄背景設為透明 */
#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 使用後*/
/* ==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; }
/* ==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 使用後*/
/* ==UserStyle==
隱藏書籤選單"將本頁加入書籤"、 "管理書籤"、 "將所有標籤頁加為書籤" (因為使用地址欄上的星號來加入書籤更方便)
// ==/UserStyle==*/
menuitem[key="addBookmarkAsKb"],
/*menuitem[key="manBookmarkKb"],*//*此行為隱藏管理書籤*/
menuitem[key="bookmarkAllTabsKb"] {
display: none !important;
}
/* ==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;
}
}
/* ==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 ;
}
/* ~~~~ 圖片置中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 使用後 */
/* ~~~~ 顯示圖片無法顯示的"圖示"Show image placeholders ~~~~ */
@-moz-document url-prefix(http), url-prefix(file) {
img:-moz-broken{
-moz-force-broken-image-icon:1;
width:24px;
height:24px;
}
}
/*使用前*/
/*使用後*/
雖說在這邊修改的同樣也可以在 Stylish 中修改達成，但這些功能我覺得是基本就該具備的。
所以採用直接寫進設定的做法。
好了~~主軸總算到了一段落了!!~想寫的都寫得差不多了，剩下幾章就做為說說無法歸類的一些東西吧~~
五月 30th, 2010 |
、
，
，
←(其實這是擦汗..)，
、
