Firefox 29 ツールバー アイコンの変更


Firefox 29 ツールバー アイコンの変更


■ Firefox 29 ツールバー アイコン

  Toolbar-.png

■ アイコン変更 検証用アイコン [684×18] [18×18×38]

  TImage.png

■ アイコンサイズは 18×18px それを横にならべます↑

  Toolicon.png

※ 自分でアイコンを作るのがめんどくさいなら
Classic Small Toolbar Buttons」のアイコンを利用するといいです。


■ スタイル適用後

  yftddhs.png

  
■ アイコン変更用スタイル(もちろんパス部分は変えてください)
  
#nav-bar :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button), #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
list-style-image: url("file:///C:/Users/zubo/Desktop/Image/Toolbar.png") !important;
}

#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
list-style-image: url("file:///C:/Users/zubo/Desktop/Image/Toolbar.png") !important;
}

#home-button.bookmark-item {
list-style-image: url("file:///C:/Users/zubo/Desktop/Image/Toolbar.png") !important;
}

#downloads-indicator-icon {
background-image: -moz-image-rect(url("file:///C:/Users/zubo/Desktop/Image/Toolbar.png"), 0, 198, 18, 180) !important;
}

#downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
background-image: -moz-image-rect(url("file:///C:/Users/zubo/Desktop/Image/Toolbar.png"), 0, 198, 18, 180) !important;
background-size: 12px auto;
}

/* 以下のパスは変えないでください */
.tabs-newtab-button, #TabsToolbar > #new-tab-button, #TabsToolbar > toolbarpaletteitem > #new-tab-button {
list-style-image: url("chrome://browser/skin/tabbrowser/newtab.png") !important;
}
#alltabs-button {
list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png") !important;
}
.tabbrowser-arrowscrollbox > .scrollbutton-up, .tabbrowser-arrowscrollbox > .scrollbutton-down {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left.png") !important;
}




■ Firefox 29 ツールバー アイコン

  Toolbar-.png

■ アイコンの並び

ボタン名(機能) ID
戻る(大)#back-button
戻る(使用しない)#back-button
進む#forward-button
更新(使用しない)(reload-button)
中止(使用しない)(stop-button)
スタートページ#home-button
ブックマーク#bookmarks-menu-button[cui-areatype="toolbar"]
ブックマーク済ページ#bookmarks-menu-button[cui-areatype="toolbar"][starred]
履歴#history-panelmenu
ダウンロード#downloads-button
アドオン#add-ons-button
ファイルを開く#open-file-button
ページを保存#save-page-button
Sync(シンク)#sync-button
購読(フィード)#feed-button
???#social-share-button
文字エンコーデング#characterencoding-button
新しいウィンドウ#new-window-button
新しいタブを開く#new-tab-button
新しいプライベートブラウジング#privatebrowsing-button
検索#find-button
印刷#print-button
全画面表示#fullscreen-button
開発ツール#developer-button
オプション#preferences-button
メニュー(三ボタン)#PanelUI-menu-button
切り取り#cut-button
コピー#copy-button
貼り付け#paste-button
拡大#zoom-out-button
縮小#zoom-in-button
???#webrtc-status-button
タブを一覧表示#nav-bar-overflow-button
ブックマークメニュー#bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon
タブグループ#tabview-button
メールアドレス#email-link-button
サイドバー(Fx30.0から使用)#sidebar-button


  
■ Rect 値(アイコンサイズを変えた場合ここの調整 + ツールバーの高さ等も調整必要)
  
/* 戻る(大) */
#back-button {
-moz-image-region: rect(0px, 36px, 18px, 18px);
}
/* 進む */
#forward-button {
-moz-image-region: rect(0px, 72px, 18px, 54px);
}
/* スタートページ */
#home-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 126px, 18px, 108px);
}
/* ブックマーク */
#bookmarks-menu-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 144px, 18px, 126px);
}
/* ブックマーク済ページ */
#bookmarks-menu-button[cui-areatype="toolbar"][starred] {
-moz-image-region: rect(0px, 162px, 18px, 144px);
}
/* 履歴 */
#history-panelmenu[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 180px, 18px, 162px);
}
/* ダウンロード */
#downloads-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 198px, 18px, 180px);
}
/* アドオン */
#add-ons-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 216px, 18px, 198px);
}
/* ファイルを開く */
#open-file-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 234px, 18px, 216px);
}
/* ページを保存 */
#save-page-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 252px, 18px, 234px);
}
/* Sync(シンク) */
#sync-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 270px, 18px, 252px);
}
#sync-button[cui-areatype="toolbar"][status="active"],
#sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
-moz-image-region: rect(0px, 18px, 18px, 0px);
list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
}
#sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
#sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
}
/* 購読(フィード) */
#feed-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 288px, 18px, 270px);
}
/* ??? */
#social-share-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 306px, 18px, 288px);
}
/* 文字エンコーデング */
#characterencoding-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 324px, 18px, 306px);
}
/* 新しいウィンドウ */
#new-window-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 342px, 18px, 324px);
}
/* 新しいタブを開く */
#new-tab-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 360px, 18px, 342px);
}
/* 新しいプライベートブラウジング */
#privatebrowsing-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 378px, 18px, 360px);
}
/* 検索 */
#find-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 396px, 18px, 378px);
}
/* 印刷 */
#print-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 414px, 18px, 396px);
}
/* 全画面表示 */
#fullscreen-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 432px, 18px, 414px);
}
/* 開発ツール */
#developer-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 450px, 18px, 432px);
}
/* オプション */
#preferences-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 468px, 18px, 450px);
}
/* メニュー */
#PanelUI-menu-button {
-moz-image-region: rect(0px, 486px, 18px, 468px);
}
/* 切り取り */
#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),
[overflowedItem="true"])) > #cut-button {
-moz-image-region: rect(0px, 504px, 18px, 486px);
}
/* コピー */
#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),
[overflowedItem="true"])) > #copy-button {
-moz-image-region: rect(0px, 522px, 18px, 504px);
}
/* 貼り付け */
#edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),
[overflowedItem="true"])) > #paste-button {
-moz-image-region: rect(0px, 540px, 18px, 522px);
}
/* 拡大 */
#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),
[overflowedItem="true"])) > #zoom-out-button {
-moz-image-region: rect(0px, 558px, 18px, 540px);
}
/* 縮小 */
#zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]),
[overflowedItem="true"])) > #zoom-in-button {
-moz-image-region: rect(0px, 576px, 18px, 558px);
}
/* ??? */
#webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]),
[overflowedItem="true"])) {
-moz-image-region: rect(0px, 594px, 18px, 576px);
}
/* タブを一覧表示 */
#nav-bar-overflow-button {
-moz-image-region: rect(0px, 612px, 18px, 594px);
}
#nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
transform: scaleX(-1);
}
/* ブックマークメニュー */
#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-moz-image-region: rect(0px, 630px, 18px, 612px);
}
/* タブグループ */
#tabview-button {
-moz-image-region: rect(0px, 648px, 18px, 630px);
}
/* メールアドレス */
#email-link-button[cui-areatype="toolbar"] {
-moz-image-region: rect(0px, 666px, 18px, 648px);
}




■ メニュー(三)ボタンを右へ移動
  
#PanelUI-button {
-moz-box-ordinal-group: 0 !important;
}




■ Firefox 29 のブックマーク追加 ボタン(☆)を消す [修正:7/08]
  
#nav-bar #bookmarks-menu-button.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:before {
display: none !important;
}
#nav-bar #bookmarks-menu-button.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
display: none !important;
}
/* 適当に調整してください */
#nav-bar #bookmarks-menu-button.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
margin-left: -2px !important;
margin-right: -2px !important;
}

  ※ ロケーションバーにスターボタンを復活させることができる「Star-Button In Urlbar



■「Classic Small Toolbar Buttons」のアイコンを拝借

ダウンロードページ へ行き

「インストールボタン」を右クリック → メニューから「名前を付けてリンク先を保存」で
「classic_toolbar_buttons-1.4.0-sm+fx+tb-windows.xpi」をダウンロードします。


  classic_toolbar_s.png

「classic_toolbar_buttons-1.4.0-sm+fx+tb-windows.xpi」を解凍します。

・拡張子を「.xpi」から「.zip」に変え、展開します。(ただのzipファイルなので)
・自分の場合、eo で解凍してます(拡張子変更の必要はありません)。


classic_toolbar_buttons-1.4.0-sm+fx+tb-windows フォルダを開き →
content フォルダ内の icons フォルダの中にアイコンが保存されています。


  Toolbar_s.png




関連記事
プロフィール

Author:zubolla
  
あ~
めんどくちゃい めんどくちゃい

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム