Firefox 2 佈景主題之更動
From MDC
本文涵括使佈景主題相容 Firefox 2 的各種修改須知。
目錄 |
[編輯] 與瀏覽器更動相關
瀏覽器中有許多更動甚至刪除的檔案,所以佈景主題可能需要修改才能正確套用。此表格列出 XUL 及相對應的 CSS 檔案更動處,供您編修查照。
| 檔案名稱 | CSS 檔 | 細節 |
| feeds/addFeedReader.xul | feeds/addFeedReader.css | 新檔案,提供添加新消息來源閱讀工具的使用介面。 |
| feeds/subscribe.xhtml | feeds/subscribe.css | 新檔案,提供訂閱消息來源(RSS)的介面。 |
| preferences/downloads.xul | - | 自 Firefox 2 起移除。 |
| preferences/general.xul | - | 自 Firefox 2 起移除。 |
| safebrowsing/warning-overlay.xul | safebrowsing/browser-protection.css | 新檔案,為使用者瀏覽疑似詐騙網站時覆蓋瀏覽器的警告介面。 |
| search/engineManager.xul | engineManager.css | 新檔案,為搜尋引擎管理員視窗的介面。 |
[編輯] 預設佈景主題的更動
以下列出 Firefox 2 預設佈景主題的變動之處,您可依循本表找出該修改的地方。
[編輯] Changes in browser
[編輯] bookmarks/addBookmark.css
addBookmarks.css 檔的最開頭應該加上下列幾行:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
還有些與即時摘要相關的 CSS 也要加上,以便調整即時摘要選取工具的樣式。這個選取工具僅在頁面有即時摘要時才以可編輯式下拉選單呈現,否則就長得跟一般文字輸入區相同。
-
menulist#name[droppable="false"] -
menulist#name[droppable="false"] > .menulist-editable-box -
menulist#name[droppable="false"] > .menulist-editable-box > html|*.textbox-input -
menulist#name[droppable="false"] > .menulist-dropmarker -
menulist#name[droppable="false"] > menupopup
此檔案將為 addBookmark2.xul 調整樣式。
[編輯] bookmarks/bookmarksProperties.css
這是 Firefox 2 新增的檔案,其 CSS 碼應該跟你剛才加到 addBookmark.css 裡的一樣。此檔案為 bookmarksProperties.xul 調整樣式。
[編輯] browser.css
以下是 Firefox 2 之後不再使用的樣式,應予移除:
-
#bookmarks-button:active -
#copy-button:active -
#cut-button:active -
#downloads-button:active -
#forward-button[buttondown="true"] -
#history-button:active -
#home-button:active -
#mail-button -
#mail-button:active -
#mail-button[disabled="true"] -
#mail-button[open="true"] -
#new-tab-button:active -
#new-tab-button[checked="true"] -
#new-window-button:active -
#new-window-button[checked="true"] -
#paste-button:active -
#print-button:active -
#reload-button:active -
#stop-button:active -
.messageButton -
.messageImage -
.messageText -
browsermessage -
toolbar[iconsize="small"] #bookmarks-button:active -
toolbar[iconsize="small"] #copy-button:active -
toolbar[iconsize="small"] #cut-button:active -
toolbar[iconsize="small"] #downloads-button:active -
toolbar[iconsize="small"] #history-button:active -
toolbar[iconsize="small"] #home-button:active -
toolbar[iconsize="small"] #mail-button -
toolbar[iconsize="small"] #mail-button:active -
toolbar[iconsize="small"] #mail-button[disabled="true"] -
toolbar[iconsize="small"] #mail-button[open="true"] -
toolbar[iconsize="small"] #new-tab-button:active -
toolbar[iconsize="small"] #new-window-button:active -
toolbar[iconsize="small"] #paste-button:active -
toolbar[iconsize="small"] #print-button:active -
toolbar[iconsize="small"] #reload-button:active -
toolbar[iconsize="small"] #stop-button:active -
toolbar[mode="icons"] .toolbarbutton-text -
toolbar[mode="text"] .toolbarbutton-1 > .toolbarbutton-text -
toolbar[mode="text"] .toolbarbutton-1 > stack > toolbarbutton > .toolbarbutton-text -
toolbar[mode="text"] .toolbarbutton-icon
而以下是 Firefox 2 佈景主題應加上的樣式:
-
#back-button .toolbarbutton-menubutton-dropmarker -
#back-button:hover -
#back-button:hover .toolbarbutton-menubutton-dropmarker -
#back-button:hover:active -
#back-button:hover:active .toolbarbutton-menubutton-dropmarker -
#back-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker -
#back-button[buttonover="true"] -
#back-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker -
#back-button[disabled="true"] .toolbarbutton-menubutton-dropmarker -
#back-button[open="true"] -
#bookmarks-button:hover -
#bookmarks-button:hover:active -
#bookmarks-button[checked="true"] -
#copy-button:hover -
#copy-button:hover:active -
#cut-button:hover -
#cut-button:hover:active -
#downloads-button:hover -
#downloads-button:hover:active -
#feed-button[chromedir="rtl"][feeds]:active -
#feed-button[chromedir="rtl"][feeds]:hover -
#feed-button[feeds]:active -
#feed-button[feeds]:hover -
#forward-button .toolbarbutton-menubutton-dropmarker -
#forward-button:hover -
#forward-button:hover .toolbarbutton-menubutton-dropmarker -
#forward-button:hover:active -
#forward-button:hover:active .toolbarbutton-menubutton-dropmarker -
#forward-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker -
#forward-button[buttonover="true"] -
#forward-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker -
#forward-button[disabled="true"] .toolbarbutton-menubutton-dropmarker -
#go-button:hover -
#go-button[chromedir="rtl"] -
#history-button:hover:active -
#history-button:hover:active -
#history-button[checked="true"] -
#home-button:hover -
#home-button:hover:active -
#new-tab-button:hover -
#new-tab-button:hover:active -
#new-window-button:hover -
#new-window-button:hover:active -
#paste-button:hover -
#paste-button:hover:active -
#print-button:hover -
#print-button:hover:active -
#reload-button:hover -
#reload-button:hover:active -
#searchbar[empty="true"] .searchbar-textbox -
#stop-button:hover -
#stop-button:hover:active -
#urlbar-icons-spacer -
#urlbar-spacer -
#urlbar[level="high"] #lock-icon:active -
#urlbar[level="high"] #lock-icon:hover -
#urlbar[level="low"] #lock-icon:active -
#urlbar[level="low"] #lock-icon:hover -
.autocomplete-treebody::-moz-tree-cell(suggesthint) -
.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment) -
.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment) -
.bookmark-item[livemark] -
.openintabs-menuitem -
.toolbarbutton-icon -
.toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #back-button .toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #back-button:hover -
toolbar[iconsize="small"] #back-button:hover .toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #back-button:hover:active -
toolbar[iconsize="small"] #back-button:hover:active .toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #back-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #back-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #back-button[disabled="true"] .toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #bookmarks-button:hover -
toolbar[iconsize="small"] #bookmarks-button:hover:active -
toolbar[iconsize="small"] #copy-button:hover -
toolbar[iconsize="small"] #copy-button:hover:active -
toolbar[iconsize="small"] #cut-button:hover -
toolbar[iconsize="small"] #cut-button:hover:active -
toolbar[iconsize="small"] #downloads-button:hover -
toolbar[iconsize="small"] #downloads-button:hover:active -
toolbar[iconsize="small"] #forward-button .toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #forward-button:hover -
toolbar[iconsize="small"] #forward-button:hover .toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #forward-button:hover:active -
toolbar[iconsize="small"] #forward-button:hover:active .toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #forward-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #forward-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #forward-button[disabled="true"] .toolbarbutton-menubutton-dropmarker -
toolbar[iconsize="small"] #history-button:hover -
toolbar[iconsize="small"] #history-button:hover:active -
toolbar[iconsize="small"] #home-button:hover -
toolbar[iconsize="small"] #home-button:hover:active -
toolbar[iconsize="small"] #home-button[disabled="true"] -
toolbar[iconsize="small"] #new-tab-button:hover -
toolbar[iconsize="small"] #new-tab-button:hover:active -
toolbar[iconsize="small"] #new-window-button:hover -
toolbar[iconsize="small"] #new-window-button:hover:active -
toolbar[iconsize="small"] #paste-button:hover -
toolbar[iconsize="small"] #paste-button:hover:active -
toolbar[iconsize="small"] #print-button:hover -
toolbar[iconsize="small"] #print-button:hover:active -
toolbar[iconsize="small"] #reload-button:hover -
toolbar[iconsize="small"] #reload-button:hover:active -
toolbar[iconsize="small"] #stop-button:hover -
toolbar[iconsize="small"] #stop-button:hover:active -
toolbarbutton.bookmark-item-microsummarized
可能還有其他的樣式也要一併修改一下。
[編輯] searchbar.css
以下是 Firefox 2 不再使用的樣式,應予移除:
-
.searchbar-dropmarker
以下是 Firefox 2 應加上的樣式:
-
#search-container[chromedir="rtl"] .search-go-button -
#search-container[chromedir="rtl"] .searchbar-engine-button -
.search-go-button -
.search-go-button:hover -
.search-go-button:hover:active -
.search-go-button[disabled="true"] -
.searchbar-engine-button -
.searchbar-engine-button:hover -
.searchbar-engine-button[addengines="true"] -
.searchbar-engine-button[open="true"] -
.searchbar-engine-menuitem[selected="true"] > .menu-iconic-text -
.searchbar-left
同樣的,你可能也需要更動其他部分。
[編輯] preferences/preferences.css
以下是 Firefox 2 不再使用的樣式,應予移除:
-
#browserStartupHomepage -
#browserStartupHomepage -
#paneDownloads description -
#paneGeneral description -
radio[pane=paneDownloads] -
radio[pane=paneDownloads]:active
以下是 Firefox 2 佈景主題應加上的樣式:
-
#paneContent description -
#paneMain description -
#paneSecurity description -
radio[pane=paneAdvanced]:hover -
radio[pane=paneAdvanced][selected="true"] -
radio[pane=paneContent]:hover -
radio[pane=paneContent][selected="true"] -
radio[pane=paneFeeds] -
radio[pane=paneFeeds]:active -
radio[pane=paneFeeds]:hover -
radio[pane=paneFeeds][selected="true"] -
radio[pane=paneGeneral]:hover -
radio[pane=paneGeneral][selected="true"] -
radio[pane=paneMain] -
radio[pane=paneMain]:active -
radio[pane=paneMain]:hover -
radio[pane=paneMain][selected="true"] -
radio[pane=panePrivacy]:hover -
radio[pane=panePrivacy][selected="true"] -
radio[pane=paneSecurity] -
radio[pane=paneSecurity]:active -
radio[pane=paneSecurity]:hover -
radio[pane=paneSecurity][selected="true"] -
radio[pane=paneTabs]:hover -
radio[pane=paneTabs][selected="true"]
你依然可能得修改其他部分。
[編輯] feeds/addFeedReader.css
這是 Firefox 2 中的新檔案,用於調整新增消息來源閱讀工具視窗樣式,即 browser/feeds/addFeedReader.xul。
-
#imageBox- 顯示消息來源圖示的區塊。
-
#content- 視窗內容的樣式資訊。
-
#siteLabel- 網站文字的樣式。
[編輯] feeds/subscribe.css
這是 Firefox 2 的新檔案,用以調整訂閱消息來源視窗的樣式,即 browser/feeds/subscribe.xhtml。
-
#application -
#feedBody -
#feedChangeSubscribeOptions -
#feedError -
#feedHeader -
#feedHeader[firstrun="true"] -
#feedHeader[firstrun="true"] #feedIntroText -
#feedHeader[firstrun="true"] #feedSubscribeLine -
#feedIntroText -
#feedSubscribeDoneChangingOptions -
#feedSubscribeHandleText -
#feedSubscribeHandler -
#feedSubscribeLine -
#feedSubscribeOptions -
#feedSubscribeOptionsGroup -
#feedSubscribeOptionsGroupTitle -
#feedTitleContainer -
#feedTitleImage -
#feedTitleLink -
#readerContainer -
#readerGroup -
#readers -
#readers > listitem -
.feedEntryContent -
.feedSubscribeButton -
.feedSubscribeButton .button-icon -
.feedSubscribeLink -
.feedSubscribeLinkBox -
.field -
.link -
.link:hover:active -
.plain -
.plain > .button-box -
.plain:focus > .button-box -
.styleLessBorderLess
預設佈景主題中也含有 a[href] img、body、h1、h2 及 html 等樣式規則。
[編輯] safebrowser/browser-protection.css
這個 Firefox 2 的新檔案用以調整偵測詐騙網站功能的樣式。下列樣式一定要設定好、在使用者碰上疑似詐騙網站時提醒他們:
-
#safebrowsing-dim-area-canvas -
#safebrowsing-page-canvas -
#safebrowsing-palm-close -
#safebrowsing-palm-close-container -
#safebrowsing-palm-google-logo -
#safebrowsing-palm-message -
#safebrowsing-palm-message-actionbox -
#safebrowsing-palm-message-content -
#safebrowsing-palm-message-tail -
#safebrowsing-palm-message-tail-container -
#safebrowsing-palm-message-titlebox -
.safebrowsing-palm-bigtext -
.safebrowsing-palm-fixed-width -
.safebrowsing-palm-paragraph -
.safebrowsing-palm-smalltext
而以下樣式則調整碰上疑似詐騙網站時網址列的小圖示,安全跟警告各有不同:
-
#safebrowsing-urlbar-icon -
#safebrowsing-urlbar-icon[level="safe"] -
#safebrowsing-urlbar-icon[level="warn"]
[編輯] engineManager.css
此檔案為 Firefox 2 新增,要調整的樣式如下:
-
#engineList treechildren::-moz-tree-image(engineName)
[編輯] Changes in global
[編輯] about.css
此檔案為 Firefox 2 新增、用以調整「關於 Mozilla Firefox」視窗的樣式。檔案中至少要有下列樣式資訊:
-
#aboutLogoContainer -
#aboutPageContainer -
#version
預設的佈景主題則額外調整了 body、html、img、ul 及 ul > li。
[編輯] browser.css
Firefox 2 已不使用下列樣式,應予移除:
-
tab:focus -
tab[beforeselected="true"] > .tab-image-right -
tab[selected="true"] > .tab-image-left -
tab[selected="true"] > .tab-image-middle -
tab[selected="true"] > .tab-image-right
而以下則是 Firefox 2 佈景主題該新增的樣式:
-
.alltabs-item > .menu-iconic-left > .menu-iconic-icon -
.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon -
.alltabs-item[selected="true"] -
.tab-close-button -
.tab-close-button > .toolbarbutton-icon -
.tab-close-button-placeholder -
.tab-close-button:hover -
.tab-close-button:hover:active -
.tabbrowser-arrowscrollbox > .scrollbutton-down -
.tabbrowser-arrowscrollbox > .scrollbutton-down:hover -
.tabbrowser-arrowscrollbox > .scrollbutton-up -
.tabbrowser-arrowscrollbox > .scrollbutton-up:hover -
.tabbrowser-tab > .tab-close-button -
.tabbrowser-tab:not([selected="true"]) > .tab-close-button -
.tabbrowser-tab:not([selected="true"]):hover > .tab-close-button -
.tabbrowser-tab[selected="true"] > .tab-close-button -
.tabbrowser-tab[selected="true"] > .tab-close-button:hover -
.tabbrowser-tab[selected="true"] > .tab-close-button:hover:active -
.tabbrowser-tabs[overflow="true"] .tabs-alltabs-box -
.tabs-alltabs-box -
.tabs-alltabs-box:hover -
.tabs-alltabs-box[flash="true"] -
tab > .tab-image-left -
tab > .tab-image-middle -
tab > .tab-image-middle > .tab-text -
tab > .tab-image-right -
tab:focus > .tab-image-middle > .tab-text -
tab:hover:not([selected="true"]) > .tab-image-left -
tab:hover:not([selected="true"]) > .tab-image-middle -
tab:hover:not([selected="true"]) > .tab-image-right -
tab:not([selected="true"]) > .tab-image-left -
tab:not([selected="true"]) > .tab-image-middle -
tab[selected="true"] .tab-image-middle > .tab-text
除此之外,依然可能要調整相關的樣式。
[編輯] menu.css
這是 Firefox 2 用不上的樣式,應予刪除:
-
menulist > menupopup > menuitem[_moz-menuactive="true"]
而 Firefox 2 佈景主題還應該加上下列樣式:
-
.menu-iconic-icon -
menubar > menu -
menubar > menu[_moz-menuactive="true"][open="true"] -
menuitem[type="checkbox"] > .menu-iconic-left -
menuitem[type="radio"] > .menu-iconic-left
若有相關樣式,可能得另外調整。
[編輯] notification.css
此外 Firefox 2 新增的檔案,用以調整阻擋彈出視窗、提示安裝 plugin 等的訊息列樣式。至少應定義下列樣式:
-
.messageButton -
.messageCloseButton -
.messageImage -
.messageText -
.notification-inner -
notification -
notification[type="info"] -
notification[type="warning"] -
notification[type="critical"]
[編輯] scrollbox.css
請為 Firefox 2 佈景主題的這個檔案加上下列樣式:
-
.autorepeatbutton-down[disabled="true"] -
.autorepeatbutton-down[orient="horizontal"] -
.autorepeatbutton-down[orient="horizontal"][disabled="true"] -
.autorepeatbutton-up[disabled="true"] -
.autorepeatbutton-up[orient="horizontal"] -
.autorepeatbutton-up[orient="horizontal"][disabled="true"] -
.scrollbutton-down -
.scrollbutton-down > .toolbarbutton-text -
.scrollbutton-down[disabled="true"] -
.scrollbutton-down[orient="horizontal"] -
.scrollbutton-down[orient="horizontal"][disabled="true"] -
.scrollbutton-up -
.scrollbutton-up > .toolbarbutton-text -
.scrollbutton-up[disabled="true"] -
.scrollbutton-up[orient="horizontal"] -
.scrollbutton-up[orient="horizontal"][disabled="true"]
You may wish to make changes to other styles as well.
-
toolbar[mode="icons"] .toolbarbutton-text -
toolbar[mode="text"] .toolbarbutton-1 > .toolbarbutton-text -
toolbar[mode="text"] .toolbarbutton-1 > stack > toolbarbutton > .toolbarbutton-text -
toolbar[mode="text"] .toolbarbutton-icon
或許也要更動其他相關的部分。
[編輯] mozapps 更動處
[編輯] extensions/about.css
Firefox 2 已經用不著以下樣式了,應予刪除:
-
#contributorsBox -
#creatorBox -
#extensionContributors -
#extensionContributors -
#extensionCreatorLabel
此外應新增下列樣式:
-
.indent -
.sectionTitle
其他關聯的樣式也可能需要變動。
[編輯] extensions/update.css
Firefox 2 已經用不著以下樣式了,應予刪除:
-
#foundList -
#statusbar-updates -
.updateCategoryBox -
.updateCategoryContent -
.updateCategoryIcon -
.updateCategoryLabel[selected="true"] -
.updateIcon -
.updateIcon[severity="0"] -
.updateIcon[severity="1"] -
.updateIcon[severity="2"] -
.updateIndicator > label -
.updateIndicator[updateCount="0"] -
.updateItemChecked -
.updateItemChecked .checkbox-label-box -
.updateItemFromLabel -
.updateItemIcon -
.updateItemIcon -
.updateItemName -
.updateItemNameRow -
.updateItemURL -
.warning -
radio[type="update-type"] -
radiogroup[type="update-types"] -
toolbarbutton[type="updates"] -
toolbarbutton[type="updates"] > .toolbarbutton-icon -
toolbarbutton[type="updates"][severity="0"] > .toolbarbutton-icon -
toolbarbutton[type="updates"][severity="1"] > .toolbarbutton-icon -
toolbarbutton[type="updates"][severity="2"] > .toolbarbutton-icon -
toolbarbutton[type="updates"][updateCount="0"] -
updateitem
此外應新增下列樣式:
-
.alertBox -
.throbber
