舊文件

此處文件僅供參考,請自行考量時效性與適用程度,其他庫藏文件請參考文件頁面
我們亟需您的協助,進行共筆系統搬移、及文件整理工作,詳情請查閱參與我們

「Firefox 一分鐘教室-userChrome.css」修訂間的差異

出自 MozTW Wiki

不使用時,隱藏選單列(Compact Menu套件效果)
自訂自己的瀏覽器介面
 
(未顯示由 2 位使用者於中間所作的 13 次修訂)
行 1: 行 1:
'''userChrome.css''' 設置了Firefox用戶瀏覽器界面中可變元素的顯示規則。
+
'''userChrome.css''' 設置了Firefox用戶瀏覽器介面中可變元素的顯示規則。
 
==建立userChrome.css==
 
==建立userChrome.css==
 
#到[[設定檔詳解|Profiles]]下的 \chrome\ 子目錄裡,新建一個userChrome.css。
 
#到[[設定檔詳解|Profiles]]下的 \chrome\ 子目錄裡,新建一個userChrome.css。
行 12: 行 12:
 
<br /><br />
 
<br /><br />
  
==自訂自己的瀏覽器界面==
+
==自訂自己的瀏覽器介面==
 
===[[Firefox 一分鐘教室-縮放字體大小]]===
 
===[[Firefox 一分鐘教室-縮放字體大小]]===
*修改瀏覽器界面的字體大小
+
*修改瀏覽器介面的字體大小
 
:#以Notepad或WordPad開啟userChrome.css
 
:#以Notepad或WordPad開啟userChrome.css
 
:#把
 
:#把
行 20: 行 20:
 
:::貼進去。(14pt可以改成15pt、20pt、或其它你想要的值)
 
:::貼進去。(14pt可以改成15pt、20pt、或其它你想要的值)
 
::3. 將此檔案存檔,最後把Firefox關掉,重開一次。
 
::3. 將此檔案存檔,最後把Firefox關掉,重開一次。
 +
===分頁標籤列置底===
 +
<pre>
 +
/* Display the Tabbar at the bottom */
 +
#content > tabbox {-moz-box-direction: reverse;}
 +
</pre>
 +
:::*貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。
 +
<!--http://forums.mozillazine.org/viewtopic.php?t=47192 -->
 +
===主視窗上下反轉===
 +
<pre>
 +
/*主視窗上下反轉*/
 +
#main-window {
 +
-moz-box-direction: reverse !important;
 +
}
 +
/*導航列上下反轉*/
 +
#navigator-toolbox {
 +
-moz-box-direction: reverse !important;
 +
}
 +
</pre>
 +
:::*貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。
 
===設定搜尋列寬度===
 
===設定搜尋列寬度===
 
<pre>
 
<pre>
行 49: 行 68:
 
}
 
}
 
-->
 
-->
 
+
 
 +
===允許書籤工具列多行顯示===
 +
[[圖像:Multi-row.jpg]]
 +
<pre>
 +
/* Multi-row bookmarks toolbar
 +
當書籤工具列內的書籤過多時,以多行顯示*/
 +
#bookmarks-ptf {display:block !important; }
 +
#bookmarks-ptf toolbarseparator {display:inline !important; }
 +
#bookmarks-ptf .bookmark-item { visibility: visible !important;}
 +
#overflow-padder { width: auto !important; }
 +
#bookmarks-chevron { display: none !important; }
 +
</pre>
 +
:::*貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。
  
 
==隱藏選單列==
 
==隱藏選單列==
行 74: 行 105:
  
  
===不論使用or不使用,隱藏選單列===
+
===永遠隱藏選單列===
 
<pre>
 
<pre>
 
/*隱藏選單列*/
 
/*隱藏選單列*/
#menubar-items > #main-menubar {
+
#toolbar-menubar
  display: none !important;
+
{ display: none !important }  
}
 
 
</pre>
 
</pre>
 
+
*貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。
 
 
 
 
  
行 132: 行 162:
  
 
==美化==
 
==美化==
===維基娘===
+
[http://img50.imageshack.us/img50/2738/04112801mvb9.png http://img50.imageshack.us/img50/2738/04112801mvb9.th.png]
 +
===教學===
 +
*[http://forum.moztw.org/viewtopic.php?t=20205 自訂 Firefox 的 About 對話框]
 +
<!--
 +
http://firefox2007.blogspot.com/2007/08/about-dialog.html
 +
http://atelier-wini.blogspot.com/2007/08/firefox-about.html
 +
-->
 +
===實例===
 +
====小狐貍====
 +
*參見[http://bobchao.wordpress.com/2006/11/06/%e9%97%9c%e6%96%bc-firefox-%e4%b9%8b-%e7%81%ab%e7%84%b0%e5%b0%8f%e7%8b%90%e8%b2%8d/ 柏強的城市探險記-關於 Firefox 之 火焰小狐貍]
 +
====維基娘====
 
*參見[http://zh.wikipedia.org/wiki/Wikipedia_talk:%E7%B6%AD%E5%9F%BA%E5%A8%98 Wikipedia talk:維基娘]
 
*參見[http://zh.wikipedia.org/wiki/Wikipedia_talk:%E7%B6%AD%E5%9F%BA%E5%A8%98 Wikipedia talk:維基娘]
 +
 
==參見==
 
==參見==
 
*[[CSS]]
 
*[[CSS]]
 +
*[http://userstyles.org/ userstyles.org]
 
*[http://crazylion.myweb.hinet.net/Introduction_to_the_DOM_Inspector/DI_zh_tw.html DOM Inspector 導覽手冊]
 
*[http://crazylion.myweb.hinet.net/Introduction_to_the_DOM_Inspector/DI_zh_tw.html DOM Inspector 導覽手冊]
 
*[http://forum.moztw.org/viewtopic.php?p=63425#63425 以 DOM 觀察器來查詢 Fx 操作介面物件名稱的教學]
 
*[http://forum.moztw.org/viewtopic.php?p=63425#63425 以 DOM 觀察器來查詢 Fx 操作介面物件名稱的教學]
 
*[http://forum.moztw.org/viewtopic.php?t=13247 用 Stylish 來自訂網頁樣式]
 
*[http://forum.moztw.org/viewtopic.php?t=13247 用 Stylish 來自訂網頁樣式]
 
*[http://forum.moztw.org/viewtopic.php?t=13497 用 Stylish 修改 Fx 介面]
 
*[http://forum.moztw.org/viewtopic.php?t=13497 用 Stylish 修改 Fx 介面]
 
+
*[http://forum.moztw.org/viewtopic.php?t=17813 給 userChrome.js 套件用的實用 script]
 
{{link2|Firefox 一分鐘教室||文件專案}}
 
{{link2|Firefox 一分鐘教室||文件專案}}

於 2009年9月26日 (六) 18:17 的最新修訂

userChrome.css 設置了Firefox用戶瀏覽器介面中可變元素的顯示規則。

建立userChrome.css

  1. Profiles下的 \chrome\ 子目錄裡,新建一個userChrome.css。
  2. 以Notepad或WordPad開啟userChrome.css
  3. 將以下內容貼進去後,存檔。
/*
 * 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 */



自訂自己的瀏覽器介面

Firefox 一分鐘教室-縮放字體大小

  • 修改瀏覽器介面的字體大小
  1. 以Notepad或WordPad開啟userChrome.css
*{font-size: 14pt !important}
貼進去。(14pt可以改成15pt、20pt、或其它你想要的值)
3. 將此檔案存檔,最後把Firefox關掉,重開一次。

分頁標籤列置底

/* Display the Tabbar at the bottom */
#content > tabbox {-moz-box-direction: reverse;}
  • 貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。

主視窗上下反轉

/*主視窗上下反轉*/
#main-window {
-moz-box-direction: reverse !important;
}
/*導航列上下反轉*/
#navigator-toolbox {
-moz-box-direction: reverse !important;
}
  • 貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。

設定搜尋列寬度

/* 設定搜尋列寬度 */
#search-container, #searchbar {
min-width: 10px !important;
width: 100px !important;}
  • 貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。(100px可以改成70px、200px、或其它你想要的值)

 

允許書籤工具列多行顯示

Multi-row.jpg

/* Multi-row bookmarks toolbar 
當書籤工具列內的書籤過多時,以多行顯示*/
#bookmarks-ptf {display:block !important; }
#bookmarks-ptf toolbarseparator {display:inline !important; }
#bookmarks-ptf .bookmark-item { visibility: visible !important;}
#overflow-padder { width: auto !important; }
#bookmarks-chevron { display: none !important; }
  • 貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。

隱藏選單列

不使用時,隱藏選單列(Compact Menu套件效果)

Sliding Menubar.jpg

/*不使用時,隱藏選單列  Sliding Menubar*/
#menubar-items {  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsSAAALEgHS3X78AAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAEJElEQVR42mL8//8/g56kvvbvf4wfrr+88JQBCDiNaoSY/v4M+sfMbgriSwp+eK3Lf/qDHO8n11u3mS8fOclQ9/XvlW8gOYAAYgERZSlGi1TUtaQc7NK0rn3nmxBsyBlnqybAcP2XLMN7bmmGV68/Mry6ycOwMHT/f34eZrclO7kiZXh0Y558ubwfIIAYQS44OqXgjYGloTDTi+0MjEysDD9EgxhmHv7AwKFuwMAoLMHw5x8Dw9effxjET9YxpJpdZ/jLwMKw9yzzp+j6d/YAAQBBAL7/AiASNBEA+eoCBvXTAAAD/AD6AyYA/9+2APTNngDDu74A2Ov1AOPy+QDx+v4Azyx9AJDOOgADAPwARzb6Di4hAmUCiDnOWas1zovf6fe3Fwx/Xj1m+PvuNcNfZlkGczV5hiWnXzKc59FieP7lD8PXX38ZfgKdcuqbHIMf2y4Gbk5gWP1nkgUIAEEAvv8EEQPzJf/u4QD9AQQA/fL1AAL8/gAOCOcAlM4CAMQWUgD87/gABQP6AOYFAQATCgUA9/X+AN/qAgAWE/8AQCwEFQIAQQC+/wTt9f0D/ezvAP4FAAD8+P8A6N72AH647gDHDDMA/SgQAAD8/AD7/gIA7/wBAPn7/QD829UA7CT9AAAsBACw0QYDAojp64MPwn9eAw349o3h21dmBmZWFgZ93rcMHDx8DOuepzJU3ahk4L9+mOHvv78Mn7//ZuB9fY3BU+0/0P0cDNzifxkAAgBBAL7/AuDqBOLz4PMAAPLyAAwMBwARIxwAbDUFAMIhpgA7EekAcB3SADLyzgAA/P0AAff1ACb/4AACIgwAAAsHAPXpAwACAEEAvv8C2fcBotTV/AD96/YABP7qAAz/7AAB/fcAuMz0AFu/LAAd1W0AwDBoAAL39QBIzpEAmEHnAAAZLQD++QAAjrPxswIAQQC+/wP0/uzd7vgXbTz/8wkGEv0ABQ8NAAH25AAUEgwAwfETAO0EFAAV5M8Aae6oAJpK8AAVUC8AAO/9AIKH1QCzyPVVAgickLgFzPLrf1ye4K71g4HXQpBBUI4d6OT/DGxfuBn+/vrP8A8YkEzsTAzMOn8Z2OUUGM5u/MjgsoTryJe3Jx0BAghsACMjI7egkMXe4o+XzF15vjFwqjAx8KhyM/CKczMwsjEA0x0bAyPrfwYOuX8Mu85wMyRt4X/4+sVpc6DelwABBDOAEZglRNjEHWcbfH3mH/btIYPmvx8MQEsZ2MUYGdhVWBhesPMyzH8qwrD9g8TFHy8OhQLVPwDq/Q0QQGADQABoBlA5gyATl5QpC596LdAT+lz//nIzMvxn+MbE+usHI8vTf38/zvrz6uQyoLoXQH2/QPoAAghuAAwADeIAuQaIRYGYl4lLgu/ftxevgew3QPwKiL8C9fyDqQcIMACDoJbT47bbfAAAAABJRU5ErkJggg==") !important;
  background-repeat: no-repeat !important;
  background-position: 5px center !important;
  padding-left: 24px !important;
}

#menubar-items > #main-menubar {
  display: none !important;
}

#menubar-items:hover > #main-menubar {
  display: -moz-box !important;
}
  • 貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。
  • 參見http://userstyles.org/style/show/993


永遠隱藏選單列

/*隱藏選單列*/
#toolbar-menubar
{ display: none !important } 
  • 貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。

 

隱藏書籤裡的"全部同時開啟"

/*隱藏書籤裡的"全部同時開啟"*/
menuitem[class="openintabs-menuitem"], menuseparator[class="openintabs-menuseparator"]
{ display: none !important; }
貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。

隱藏右鍵選單裡的項目

隱藏用新視窗開啟鏈結

#context-openlink{ display: none !important; }/*隱藏用新視窗開啟鏈結*/
  • 貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。

隱藏郵寄...

#context-sendlink, /*郵寄此鏈結*/
#context-sendpage, /*郵寄網址*/
#context-sendimage /*郵寄此圖片*/ 
{ display: none !important; }
  • 貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。

隱藏翻頁,重載,停止

#context-back, /*上一頁*/
#context-forward, /*下一頁*/
#context-reload, /*重新載入*/
#context-stop /*停止*/ 
{ display: none !important; }
  • 貼進userChrome.css,將此檔案存檔,把Firefox關掉,重開一次。

隱藏...

  • 參見http://kb.mozillazine.org/Chrome_element_names_and_IDs


找到想要的元素的id

  • Firefox,它的介面架構是使用一個稱為 DOM 的樹狀結構來表示,你可以在安裝Firefox的時候,使用 [自訂安裝] 即可選擇一個稱為 "DOM Inspector" 的套件來安裝。這個套件的功能正如其名: 它能讓您輕易的觀察 DOM 的樹狀結構。有安裝的話,就可以在 [工具] 選單下找到它。
  • 執行 "DOM 觀察器",
  1. 主選單->檔案->觀察視窗...。這裡會列出所有目前 Firefox 已開啟的視窗標題,選取第一個表示我們想要觀察 Firefox 主視窗。
  2. 接下來按下 DOM 觀察器的工具列上第一個按鈕(它的描述是"選擇節點以觀察之")。
  3. 按一下後拿滑鼠去點 Firefox 主選單上的 "瀏覽(G)",您會看見該項目周邊閃紅框表示指定成功!
  4. 回到 DOM 觀察器就可以看到,它已經找到並展開您剛點取的 "瀏覽(G)" 在 DOM 中的位置。
  5. 右方窗格中您可以看到該 Node 的詳細資訊。
  • 使用 DOM 觀察器,這是找出介面上您想要元素資訊的一個好方法。而在進行 Overlay 時,其實可以用來指定的不只是 id,您可以用該元素的任何屬性來指定。

隱藏無ID物件

  • 用它的 src
menuitem[src="chrome://XXX"] { display: none !important; }
隨便又方便的方法,可能有副作用;只要它有特殊的屬性, 就可以利用這屬性來隱藏它。


美化

http://img50.imageshack.us/img50/2738/04112801mvb9.th.png

教學

實例

小狐貍

維基娘

參見

[[Category:{{{4}}}|Firefox 一分鐘教室-userChrome.css]] [[Category:{{{5}}}|Firefox 一分鐘教室-userChrome.css]] [[Category:{{{6}}}|Firefox 一分鐘教室-userChrome.css]]

個人工具