Firefox の「omni.ja」を開く

Firefox の「omni.ja」を開く


omni.ja ファイルには、アプリケーションのリソースが分類されているので
この中を覗くと カスタマイズするとき参考になるかも...
  
すべての Firefox を終了させてから
Firefoxのインストールフォルダ内の
browserフォルダ ⇒「omni.ja」をコピーして開きます。
  
拡張子は .ja ですが zipファイルなので、拡張子をzipに変更することで展開できます。
  
注意 !! 必ずコピーしたほうのファイルをいじってください。


  
■ ファイルパス(自分の場合・Windows 7)

C:\Program Files (x86)\Mozilla Firefox\browser\omni.ja

  
※ わからない方は ファイルの検索で omni.ja を検索してください。

  omni01s.png

コピーした omni.ja ファイルの拡張子を zip に変更します。

  omni02s.png

隠しファイル・フォルダを表示 拡張子も表示 設定にして作業を行ってください。




■ \omni\chrome\browser\skin\classic\browser フォルダ内 ファイル・フォルダ

  omni03s.png




■ Toolbar.png

  Toolbar-.png

■ Toolbar-inverted.png

  Toolbar-inv.png




■ browser.css

  omni05s.png




展開した「omni.ja」を元に戻す
  
※ 注意:実際に使えるのかは めんどくさいことになるのが嫌なので検証してません。

■ omni フォルダ

  omni11s.png

■ omni フォルダ内 すべてのフォルダ・ファイルを選択

  omni12es.png

■ 選択フォルダ・ファイルを zip 圧縮

  omni13s.png

chrome.zip のできあがり

  omni14es.png

chrome.zipomni.ja にリネーム

  omni15es.png

■ omni フォルダから外に出して omni.ja のできあがり

  omni16s.png




関連記事

Firefox を Firebug で 調査する方法

ブラウザの中にブラウザを開き、Firebug で 調査


一般には DOM Inspector で調査するのがスジでしょうが、
素人には敷居が高すぎるので Firebug で 調査します。


ロケーションバーに『 chrome://browser/content/browser.xul 』を入力して、
 
ブラウザの中にブラウザを開く。

chrome://browser/content/browser.xul

  
  ffbke001.png
▲ ショートカットを作っておけば便利


■ Firebug を有効にします。

  ffbke002s.png

■ Firebug で調査します。
調べたい要素をクリックするとHTMLパネルに ツリーノードが展開されます。


  ffbke003as.png

■ ノード上をカーソル移動させ周辺要素を調査

  ffbke004s.png

■ ○○をカーソル移動させ上位要素を調査

  ffbke005s.png

■ ○○の右クリックメニューから「CSSパスをコピー」

  ffbk007s.png

■ HTMLパネル選択状態の右クリックメニューから「CSSパスをコピー」

  ffbk006s.png




〚 右ペインタブ 〛

■ スタイル ⇒ ドロップダウンメニュー
:hover = マウスオーバー時の状態を調べたい時


  ffbk008s.png

■ レイアウト確認
マージンやパディングなどの情報が表示されます。
レイアウト上の各数字をクリックすると、値を変更することもできます。


  ffbk009s.png




■ CSS を開く
ルール宣言をコピー
スタイル宣言をコピー


  ffbk010s.png

■ CSS(browser.css)の表示

  ffbk011s.png

■ CSS ○○○

  ffbk012s.png

■ すべて選択 [Ctrl+A] ⇒ コピー

  ffbk013s.png

■ エディタに貼り付け 検索(↓例 urlbar 関連コードをすべて書き出し 分析します)

  ffbk014s.png




Firefox に browser.css を表示する方法

ロケーションバーに『 chrome://browser/content/browser.css 』を入力して
Firefox に browser.css を表示


chrome://browser/content/browser.css




関連記事

Firefox 29 タブの形・デザイン・背景・文字を変更

Firefox 29 タブの形・デザイン・背景・文字を変更


dydyus.png



  

タブの形を変える


■ タブの形を変更
  
/* 角タブ化 */
#tabbrowser-tabs,
.tab-background-start[selected=true]:after,
.tab-background-start[selected=true]:before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]:after,
.tab-background-end[selected=true]:before {
background: transparent !important;
}
.tab-background-start,
.tab-background-end {
visibility: hidden !important;
}
.tabs-newtab-button,
.tab-background-middle {
background: none !important;
}
.tab-background {
background: transparent !important;
}

/* -------------------------------------------------- */
/* タブの高さ・左端スペース調整 */
#TabsToolbar {
margin-left: -15px !important;
min-height: 31px !important;
height: 31px !important;
}

/* タブ右スペース */
.tabbrowser-tab {
margin-right: 1px !important;
}

/* 最大・最小 タブ幅制限 */
/* .tabbrowser-tab:not([pinned]) {
max-width: 150px !important;
min-width: 50px !important;
}
.tabbrowser-tab:not([pinned])[selected="true"] {
max-width: 150px !important;
min-width: 50px !important;
} */

/* 新しいタブ 幅調整 */
.tabs-newtab-button {
width: 32px !important;
margin: 0px 0px 2px 0px !important;
}


  

タブデザイン・背景を変更


■ {  } 内に○○○ タブのデザイン・背景・文字 を変更
  
/* 通常のタブデザイン・背景 */
.tabbrowser-tab {

}
/* アクティブタブ */
.tabbrowser-tab[selected] {

}
/* 非アクティブタブ */
.tabbrowser-tab:not([selected]) {

}

/* アクティブなタブにカーソルがのった時 */
.tabbrowser-tab[selected]:hover {

}
/* 非アクティブタブにカーソルがのった時 */
.tabbrowser-tab:not([selected]):hover {

}

/* 新しいタブを作るボタン(タブ) */
.tabs-newtab-button {

}
.tabs-newtab-button :hover {

}


デザイン

  
ボーダー
border ・・・・・・・・・・・・・・・・・ ボーダーのスタイル・太さ・色を指定する
border-color ・・・・・・・・・・・・ ボーダーの色を指定する
border-style ・・・・・・・・・・・・ ボーダーのスタイルを指定する
border-width ・・・・・・・・・・・ ボーダーの太さを指定する
  
・border-bottom-style: none; ・・・・・・・・・・ 下ボーダーは表示されず、太さも0
・border-bottom-color: transparent; ・・・ 下ボーダー色を透明にする


■ 角丸
border-radius ・・・・・・・・・・・ 角丸をまとめて指定する
border-top-left-radius ・・・ 左上の角丸を指定する
border-top-right-radius ・・ 右上の角丸を指定する


box-shadow ・・・・・・・・・・・・ ボックスに影をつける

アウトラインアウトラインとボーダーの違い
outline ・・・・・・・・・・・・・・・・・ アウトラインのスタイル・太さ・色を指定する
outline-color ・・・・・・・・・・・ アウトラインの色を指定する
outline-color: invert;  (地の色を反転させた色)
outline-style ・・・・・・・・・・・ アウトラインのスタイルを指定する
outline-width ・・・・・・・・・・ アウトラインの太さを指定する
outline-offset ・・・・・・・・・・ アウトラインのオフセット値を指定する


border-image ・・・・・・・・・・・ 画像ボーダーを指定する


背景

  
■ 範囲・位置・サイズ
background-clip ・・・・・・・・・ 背景の適用範囲を指定する
background-origin ・・・・・・・ 背景の基準位置を指定する
background-size ・・・・・・・・・ 背景画像のサイズを指定する


■ 背景色を指定
background ・・・・・・・・・・・・・ 背景に関する指定をまとめて行う
background-color ・・・・・・・・ 背景色を指定する


■ 背景画像を指定
background-image ・・・・・・・ 背景画像を指定する
background-position ・・・・・・ 背景画像の表示開始位置を指定する
background-repeat ・・・・・・・ 背景画像のリピートの仕方を指定する


■ 透過
rgba() ・・・・・・・・・・・・・・・・・・・ RGBAカラーモデルで色を指定する
opacity ・・・・・・・・・・・・・・・・・・ 要素の透明度を指定する


グラデーション
linear-gradient() ・・・・・・・・・ 線形グラデーションを指定する
radial-gradient() ・・・・・・・・・ 円形グラデーションを指定する
  
・グラデーション+透過


■ 画像に box-shadow 効果をプラス

■ 画像の変形 transform(拡大・縮小・回転)


関連リンク

  

透過 関連リンク 〛

rgba() -CSS3リファレンス
opacity -CSS3リファレンス
  
CSS3 RGBA Generator - CSS Portal
CSS 3.0 RGBA | CSS RGBA | CSS3 RGBA | RGBA - css3maker
Simplest CSS3 Generator
CSS RGBA Color Generator




background-image 関連リンク 〛

背景 - スタイルシートリファレンス
背景 - CSS3リファレンス
  
background - CSS | MDN
background-attachment - CSS | MDN
background-clip - CSS | MDN
background-color - CSS | MDN
background-image - CSS | MDN
background-origin - CSS | MDN
background-position - CSS | MDN
background-repeat - CSS | MDN
background-size - CSS | MDN





■ 変更例
  
dydyus.png


#tabbrowser-tabs,
.tab-background-start[selected=true]:after,
.tab-background-start[selected=true]:before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]:after,
.tab-background-end[selected=true]:before {
background: transparent !important;
}
.tab-background-start,
.tab-background-end {
visibility: hidden !important;
}
.tabs-newtab-button,
.tab-background-middle {
background: none !important;
}
.tab-background {
background: transparent !important;
}
/* -------------------------------------------------- */
#TabsToolbar {
margin-left: -15px !important;
min-height: 31px !important;
height: 31px !important;
}
.tabs-newtab-button {
width: 32px !important;
margin: 0px 0px 2px 0px !important;
}
/* -------------------------------------------------- */
.tabs-newtab-button,
.tabbrowser-tab {
background-clip: padding-box, padding-box, content-box !important;
background-color: -moz-dialog !important;
background-image: url("chrome://browser/skin/tabbrowser/tab-active-middle.png"), linear-gradient(transparent, transparent 2px, rgba(254, 254, 254, 0.72) 2px, rgba(254, 254, 254, 0.72) 2px, rgba(250, 250, 250, 0.88) 3px, rgba(250, 250, 250, 0.88) 3px, rgba(254, 254, 254, 0.72) 4px, rgba(254, 254, 254, 0.72) 4px, rgba(253, 253, 253, 0.45)), none !important;
background-repeat: repeat-x !important;
background-size: auto 100% !important;
padding: 2px 2px 2px 2px !important;
opacity: 0.4 !important;
}
.tabs-newtab-button:hover,
.tabbrowser-tab:not([selected]):hover {
opacity: 0.7 !important;
}
.tabbrowser-tab[selected] {
opacity: 1 !important;
}


  

文字・アイコンの調整


color(文字色を変更)
  
vertical-align(縦方向の揃え位置を指定する)
  
text-shadow(テキストに影をつける)


■ テキスト位置
  
.tabbrowser-tab .tab-text {
margin-top: 0px !important;
margin-left: 0px !important;
}

.tabbrowser-tab[selected] .tab-text {
margin-top: 0px !important;
margin-left: 0px !important;
}

■ アイコン位置
  
/* ローディングアイコン・アイコン */
.tabbrowser-tab :-moz-any(.tab-throbber, .tab-icon-image) {
margin-top: 0px !important;
margin-left: 0px !important;
}
.tabbrowser-tab[selected] :-moz-any(.tab-throbber, .tab-icon-image) {
margin-top: 0px !important;
margin-left: 0px !important;
}

/* 閉じるボタン */
.tabbrowser-tab .tab-close-button {
margin-top: 0px !important;
margin-left: 0px !important;
}
.tabbrowser-tab[selected] .tab-close-button {
margin-top: px !important;
margin-left: 0px !important;
}


  

ほか


■ タブの最大・最小幅・アニメーションスピード
  
.tabbrowser-tab:not([pinned]) {
max-width: 210px !important;
min-width: 100px !important;
transition-delay: 0s, 0s;
transition-duration: 200ms, 230ms !important;
transition-property: min-width, max-width;
transition-timing-function: ease-out, ease-out;
}




関連記事

Firefox 29 ツールバーの背景変更

Firefox 29 ツールバーの背景変更



ツールバーの背景を変更


■ ツールバーの背景色を一度に変更
各バーを透明にして 奥のパネル(?)に描画

  
#TabsToolbar:after {
top: 0% !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

/* ページ表示画面の上 バー境界 1px ボーダー? */
#navigator-toolbox:after {
/* background-color: transparent !important; */
}

#main-menubar, #toolbar-menubar, /* メニューバー */
#TabsToolbar, /* タブバー */
#nav-bar, /* ナビゲーションツールバー */
#PersonalToolbar /* ブックマークツールバー */
{
/* border-color: transparent !important; */
/* border-image-source: none !important; */
/* text-shadow:none !important; */
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

#navigator-toolbox {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
box-shadow: none !important;
background-image: none !important;
  
background-color: #7F8A95 !important; /* 適当な色に変えてください */
}

■ ツールバーの背景色を個別に変更
  
#TabsToolbar:after {
top: 0% !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

#main-menubar, #toolbar-menubar, #TabsToolbar, #nav-bar, #PersonalToolbar {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
/* text-shadow:none !important; */
box-shadow: none !important;
background-image: none !important;
}

/* メニューバー */
#toolbar-menubar {
background-color: #7F8A95 !important; /* 適当な色に変えてください */
}
/* タブバー */
#TabsToolbar {
background-color: #7F8A95 !important;
}
/* ナビゲーションツールバー */
#nav-bar {
background-color: #7F8A95 !important;
}
/* ブックマークツールバー */
#PersonalToolbar {
background-color: #7F8A95 !important;
}
/* ページ表示画面の上 バー境界 1px ボーダー? */
#navigator-toolbox:after {
/* background-color: #000000 !important; */
}

#navigator-toolbox {
  
}



背景の透明化・グラデーションの使用


■ 透過( rgba()  opacity )例
  
#TabsToolbar:after {
top: 0% !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

/* ページ表示画面の上 バー境界 1px ボーダー? */
#navigator-toolbox:after {
/* background-color: transparent !important; */
}

#main-menubar, #toolbar-menubar,
#TabsToolbar, #nav-bar, #PersonalToolbar {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
/* text-shadow:none !important; */
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

#navigator-toolbox {
background-color: rgba(219,223,227,0.3) !important;
}

〚 関連リンク 〛

rgba() -CSS3リファレンス
opacity -CSS3リファレンス
  
CSS3 RGBA Generator - CSS Portal
CSS 3.0 RGBA | CSS RGBA | CSS3 RGBA | RGBA - css3maker
Simplest CSS3 Generator
CSS RGBA Color Generator



グラデーションlinear-gradient()  radial-gradient() )・例

kftdddfs.png


#TabsToolbar:after {
top: 0% !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

/* ページ表示画面の上 バー境界 1px ボーダー? */
#navigator-toolbox:after {
/* background-color: transparent !important; */
}

#main-menubar, #toolbar-menubar,
#TabsToolbar, #nav-bar, #PersonalToolbar {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
/* text-shadow:none !important; */
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

#navigator-toolbox {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
box-shadow: none !important;
/* background-image: linear-gradient(to top, #2F2C33 0%, #DBDBDB 100%) !important; */
/* background: -moz-linear-gradient(25% 75% 45deg, #efc7cb 0%, #d24b5a 100%) !important; */
background: -moz-linear-gradient(top, #afbdc0 0%, #333333 56.99999999999999%, #b0b0b0 100%, #b0b0b0 100%, #b0b0b0 100%, #b0b0b0 100%) !important;
}

■ グラデーション+透過
  
background: linear-gradient(to bottom right, red, rgba(255,0,0,0)) !important;



box-shadow 効果


box-shadow 効果

#navigator-toolbox {
background-color: #FFFFFF !important;
box-shadow:0 0 20px 20px rgba(200,100,200,0.5) inset !important;
}

■ box-shadowdでフィルター効果(意味あんの?)

#navigator-toolbox {
background-color: #FFFFFF !important;
box-shadow:0 0 0px 200px rgba(200,200,200,0.2) inset !important;
}



背景に画像を使用する


■ 画像を設定・例  css 絶対パス指定 - Google 検索 )

gfhiuys.png


#TabsToolbar:after {
top: 0% !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

/* ページ表示画面の上 バー境界 1px ボーダー? */
#navigator-toolbox:after {
/* background-color: transparent !important; */
}

#main-menubar, #toolbar-menubar,
#TabsToolbar, #nav-bar, #PersonalToolbar {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
/* text-shadow:none !important; */
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

#navigator-toolbox {
background-image:url("file:///C:/Users/zubo/Desktop/Image/test.png") !important;
}

■ 画像に box-shadow 効果をプラス

#navigator-toolbox {
background-image:url("file:///C:/Users/zubo/Desktop/Image/test.png") !important;
/* box-shadow:0 0 20px 20px rgba(200,100,200,0.5) inset !important; */
box-shadow:inset rgba(214,165,119, .3) 0 0 40px 30px, inset rgba(0,0,0,.3) 0 0 30px !important;
}

■ 画像にフィルター効果(意味あんの?)

#navigator-toolbox {
background-image:url("file:///C:/Users/zubo/Desktop/Image/test.png") !important;
box-shadow:0 0 0px 800px rgba(200,200,200,0.2) inset !important;
}

■ 背景画像の透過(opacity

#navigator-toolbox {
background-image:url("file:///C:/Users/zubo/Desktop/Image/test.png") !important;
opacity: 0.8 !important;
}

■ 複数の背景を適用(意味あんの? 未検証)
複数の背景を適用 - developer.mozilla
multiple background images - Google 検索


〚 関連リンク 〛

背景 - スタイルシートリファレンス
背景 - CSS3リファレンス
  
background - CSS | MDN
background-attachment - CSS | MDN
background-clip - CSS | MDN
background-color - CSS | MDN
background-image - CSS | MDN
background-origin - CSS | MDN
background-position - CSS | MDN
background-repeat - CSS | MDN
background-size - CSS | MDN



全体に画像を...


#TabsToolbar:after {
top: 0% !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

/* ページ表示画面の上 バー境界 1px ボーダー? */
#navigator-toolbox:after {
/* background-color: transparent !important; */
}

#main-menubar, #toolbar-menubar,
#TabsToolbar, #nav-bar, #PersonalToolbar,
#browser-bottombox, /* 検索バー */
#navigator-toolbox {
/* border-color: transparent !important; */
/* border-image-source: none !important; */
/* text-shadow:none !important; */
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
}

#main-window {
background-image:url("file:///C:/Users/zubo/Desktop/Image/test.png") !important;
}




関連記事

Firefox 29 ツールバー背景の もにゃもにゃ

Firefox 29 ツールバーの背景のもにゃもにゃ 霧みたいなやつ
  
ここの描画は


#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar:not(:-moz-lwtheme):after {
-moz-box-ordinal-group: 1001;
box-shadow: 0 0 50px 8px activecaption;
content: "";
display: -moz-box;
height: 0;
margin-bottom: 0;
margin-left: 50px;
margin-right: 50px;
margin-top: 0;
pointer-events: none;
position: absolute;
top: 100%;
width: -moz-available;
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar:-moz-window-inactive:not(:-moz-lwtheme):after {
box-shadow: 0 0 50px 8px inactivecaption;
}

#TabsToolbar:not(:-moz-lwtheme):after {
-moz-box-ordinal-group: 1001;
box-shadow: 0 0 30px 30px rgba(174, 189, 204, 0.85);
content: "";
display: -moz-box;
height: 0;
margin-bottom: 0;
margin-left: 60px;
margin-right: 60px;
margin-top: 0;
pointer-events: none;
position: absolute;
top: 50%;
width: -moz-available;
z-index: -1;
}

でやってるみたいです。(browser.css
  
気になる方は ここを適当にいじくってください。


#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar:not(:-moz-lwtheme):after {
box-shadow: 0 0 50px 8px activecaption !important;
height: 0 !important;
margin-bottom: 0 !important;
margin-left: 50px !important;
margin-right: 50px !important;
margin-top: 0 !important;
top: 100% !important;
}

#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar:-moz-window-inactive:not(:-moz-lwtheme):after {
box-shadow: 0 0 50px 8px inactivecaption !important;
}

#TabsToolbar:not(:-moz-lwtheme):after {
box-shadow: 0 0 30px 30px rgba(174, 189, 204, 0.85) !important;
height: 0 !important;
margin-bottom: 0 !important;
margin-left: 60px !important;
margin-right: 60px !important;
margin-top: 0 !important;
top: 50% !important;
}

この "もにゃもにゃ" を消したい場合は
  
↓のスタイルを適用してください。


#TabsToolbar:not(:-moz-lwtheme):after {
box-shadow: none !important;
background-color: transparent !important;
}





関連記事

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




関連記事

Firefox 29 ツールバー アイコンを反転させる


ツールバーの背景を暗めに設定すると アイコンが見えにくくなるので
ツールバー アイコン(モノクロ・アウトラインタイプ)を反転させます。


■ ツールバー アイコン

  Toolbar-.png
  
  Toolbar-inv.png

  
■ スタイル適用前

  Toolbar-s.png

■ スタイル適用後

  Toolbar-inverted-s.png


■ ツールバー アイコン 反転用スタイル(明るすぎるときは opacity: で調整してください)
  
#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("chrome://browser/skin/Toolbar-inverted.png") !important;
/* opacity:0.8 !important; */ /* 明度 */
}

.tabs-newtab-button,
#TabsToolbar > #new-tab-button,
#TabsToolbar > toolbarpaletteitem > #new-tab-button {
list-style-image: url("chrome://browser/skin/tabbrowser/newtab-inverted.png") !important;
/* opacity:0.8 !important; */ /* 明度 */
}

#alltabs-button {
list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png") !important;
/* opacity:0.8 !important; */ /* 明度 */
}

.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left-inverted.png") !important;
/* opacity:0.8 !important; */ /* 明度 */
}

/*
#nav-bar .toolbarbutton-1:not([type=menu-button]),
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
color: #FFFFFF !important;
} */





関連記事

Firefox 29「タブ」をツールバーの下に配置


Firefox29の「タブ」をツールバーの下に配置するスタイル

Firefox 29 タブ・ツールバーの高さを変える」スタイル専用です。

※ 適当な感じでやってるので修正の可能性大です。
戻るボタンをバーから分離するスタイル 使用時は 96行以下を削除してください。
※ メニューバーを非表示で↓のスタイルを適用すると黄枠の無駄な部分ができてしまいま...
黄枠部分ができないスタイルも作りましたが メニューバーを表示してから適用してくだ...

  
ddghfxjs.png



■ タブをツールバーの下に置くスタイル [最終修正日:5/19]
  
#main-window[sizemode="normal"] > #titlebar {
margin: -25px 0px 0px 0px !important;
height: 0px !important;
}
#main-window[sizemode="maximized"] > #titlebar {
margin: -38px 0px 0px 0px !important;
height: 0px !important;
}

#TabsToolbar {
margin: -1px 0px 0px -7px !important;
-moz-box-ordinal-group: 101 !important;
}

#navigator-toolbox {
margin-left: 1px !important;
margin-right: 1px !important;
}

#nav-bar {
margin: 12px 113px 0px -2px !important; /* 環境により変わります */
/* position: relative !important; z-index: 1 !important;*/
}
#main-window[sizemode="maximized"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #nav-bar {
margin: 12px 117px 0px 0px !important; /* 環境により変わります */
}
#main-window[inFullscreen="true"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #nav-bar {
margin: -2px 0px 0px 0px !important; /* 環境により変わります */
}
/* 全画面表示用(不具合ある場合削除) */
#main-window[inFullscreen="true"] > #tab-view-deck > #browser-panel > #navigator-toolbox:hover {
height: 51px !important;
}

/* タブデザイン */
/* tab, .tabs-newtab-button, .tab-content {
-moz-transform:scaleY(-1) !important;
}*/

#urlbar-container.chromeclass-location {
margin-left: -5px !important;
}

/* ツールバー背景色(適当な色に変えてください) */
#nav-bar {
background-color: transparent !important;
/* background-color: #000000 !important; */
}
#nav-bar.toolbar-primary{
border-color: transparent !important;
}

/* ツールバー */
#nav-bar {
height: 26px !important;
}
#urlbar {
min-height: 22px !important;
height: 22px !important;
margin-top: 0px !important;
margin-right: 0px !important;
padding-top: 2px !important;
}
#identity-box {
min-height: 18px !important;
height: 18px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: -1px !important;
}

/* ツールバーボタン */
#nav-bar .toolbarbutton-1:not([type=menu-button]),
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#PanelUI-menu-button.toolbarbutton-1 {
padding-top: 4px !important;
padding-bottom: 4px !important;
margin-top: 1px !important;
margin-bottom: 0px !important;
}

/* 戻るボタン *//* 四角ボタン */
#urlbar-container.chromeclass-location #back-button.toolbarbutton-1 {
padding: 0px 0px 0px 5px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
border-left: solid 1px #ADBCCB !important;
}
#urlbar-container.chromeclass-location #back-button > .toolbarbutton-icon {
-moz-image-region: rect(0px, 72px, 18px, 54px) !important;
-moz-transform: rotate(180deg) !important;
padding: 1px 2px 1px 2px !important;
border-radius: 2px !important;
}
#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
}

/* 進むボタン */
#urlbar-container.chromeclass-location #forward-button.toolbarbutton-1 {
padding: 0px 2px 0px 0px !important;
margin: 0px 0px 0px 0px !important;
margin-right: -4px !important;
width: 22px !important;
height: 22px !important;
}
#urlbar-container.chromeclass-location #forward-button > .toolbarbutton-icon {
border-color: #B4C2D0 !important;
box-shadow: none !important;
}

/* ------------------------------------------------------------------------ */

/* 以下、戻るボタンをバーから分離するスタイル 使用時は削除 */
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #identity-box {
padding-left: 3px !important;
}
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled][switchingtabs] + #urlbar-container > #urlbar,
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar {
margin-left: -23px !important;
}
#urlbar-container.chromeclass-location #forward-button > .toolbarbutton-icon {
border-right-color: transparent !important;
border-top-color: #768495 !important;
border-bottom-color: #768495 !important;
}


無駄なスペースができないスタイル [最終修正日:6/12]
メニューバーを表示してからスタイルを適用してください。
戻るボタンをバーから分離するスタイル 使用時は 105行以下を削除してください。
メニューバーを表示したい場合はスタイルをオフにしてください。

  
  klkgyus.png

#toolbar-menubar:not([autohide="true"]) {
display: none !important;
}

#main-window[sizemode="normal"] > #titlebar {
margin: -39px 0px 0px 0px !important;
height: 0px !important;
}
#main-window[sizemode="maximized"] > #titlebar {
margin: -32px 0px 0px 0px !important;
height: 0px !important;
}

#TabsToolbar {
margin: -1px 0px 0px -7px !important;
-moz-box-ordinal-group: 101 !important;
}

#navigator-toolbox {
margin-left: 1px !important;
margin-right: 1px !important;
}

#nav-bar {
margin: 12px 113px 0px -1px !important; /* 環境により変わります */
/* position: relative !important; z-index: 1 !important;*/
}
#main-window[sizemode="maximized"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #nav-bar {
margin: 12px 117px 0px 0px !important; /* 環境により変わります */
}
#main-window[inFullscreen="true"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #nav-bar {
margin: -2px 0px 0px 0px !important; /* 環境により変わります */
}
/* 全画面表示用(不具合ある場合削除) */
#main-window[inFullscreen="true"] > #tab-view-deck > #browser-panel > #navigator-toolbox:hover {
height: 51px !important;
}

/* タブデザイン */
/* tab, .tabs-newtab-button, .tab-content {
-moz-transform:scaleY(-1) !important;
}*/

#urlbar-container.chromeclass-location {
margin-left: -5px !important;
}

/* ツールバー背景色(適当な色に変えてください) */
#nav-bar {
background-color: transparent !important;
/* background-color: #000000 !important; */
}
#nav-bar.toolbar-primary{
border-color: transparent !important;
}

/* ツールバー */
#nav-bar {
height: 26px !important;
}
#urlbar {
min-height: 22px !important;
height: 22px !important;
margin-top: 0px !important;
margin-right: 0px !important;
padding-top: 2px !important;
}
#identity-box {
min-height: 18px !important;
height: 18px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: -1px !important;
}

/* ツールバーボタン */
#nav-bar .toolbarbutton-1:not([type=menu-button]),
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
/* ツールメニューボタン */
#PanelUI-menu-button .toolbarbutton-icon {
padding-bottom: 1px !important;
}

/* 戻るボタン *//* 四角ボタン */
#urlbar-container.chromeclass-location #back-button.toolbarbutton-1 {
padding: 0px 0px 0px 5px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
border-left: solid 1px #ADBCCB !important;
}
#urlbar-container.chromeclass-location #back-button > .toolbarbutton-icon {
-moz-image-region: rect(0px, 72px, 18px, 54px) !important;
-moz-transform: rotate(180deg) !important;
padding: 1px 2px 1px 2px !important;
border-radius: 2px !important;
}
#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
}

/* 進むボタン */
#urlbar-container.chromeclass-location #forward-button.toolbarbutton-1 {
padding: 0px 2px 0px 0px !important;
margin: 0px 0px 0px 0px !important;
margin-right: -4px !important;
width: 22px !important;
height: 22px !important;
}
#urlbar-container.chromeclass-location #forward-button > .toolbarbutton-icon {
border-color: #B4C2D0 !important;
box-shadow: none !important;
}

/* ------------------------------------------------------------------------ */

/* 以下、戻るボタンをバーから分離するスタイル 使用時は削除 */
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #identity-box {
padding-left: 3px !important;
}
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled][switchingtabs] + #urlbar-container > #urlbar,
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar {
margin-left: -23px !important;
}
#urlbar-container.chromeclass-location #forward-button > .toolbarbutton-icon {
border-right-color: transparent !important;
border-top-color: #768495 !important;
border-bottom-color: #768495 !important;
}




関連記事

Firefox 29 ツールバー用の空白とセパレーターを復活


Firefox29では ツールバー用の 空白とセパレーター(区切り)がなくなって
アイコン配置デザインがし辛くなってしまいました。

空白とセパレーターが必要な場合には

・Firefox28 にダウングレードして それを作って、のち Firefox29 にアップ

Classic Theme Restorerインストール

追記:The Addon Bar(restored) 3.2 をインストール
  
追記:Firefox ESR(延長サポート版)をインストールし使い続ける。


  
するしかないみたいです。



※ 自分の場合「Classic Theme Restorer」をインストールしたら
Firefox(一部のプロファイルで)が壊れてしまったので使ってません。

〚 カスタマイズ 関連リンク 〛

新しい Firefox のデザインについて | Firefox ヘルプ
新しい Firefox の外観を以前の Firefox に戻すには | Firefox ヘルプ
アドオンバーを復元するには | Firefox ヘルプ
新しい Firefox Sync に更新するには | Mozilla サポート
  
Firefox 29.0 への更新後に操作性に戸惑ったら見てください - MozillaZine.jp
Firefox 29.0 への更新後に操作性に戸惑ったら見て... 2 - MozillaZine.jp
Firefox 29.0 への更新後に操作性に戸惑ったら見て... 3 - MozillaZine.jp
Firefox 29.0 への更新後に操作性に戸惑ったら見て... 4 - MozillaZine.jp
  
#Firefox 29 Australis用のuserChrome.css - nuru
Firefox新デザイン「Australis」に備える(2) | 10press
Firefox29用のStylishスタイル - ネタな人
Firefox 29の調整 - rcmdnk's blog
  
Firefox 29.0をカスタマイズできるユーザースタイルあれこれ。 - Mozilla Re-Mix
タブを以前のスタイルに戻すことができる「Firefox Tab Mod」 - Mozilla Re-Mix
タブをツールバーの下に表示 Tabs On Bottom :: Add-ons for Firefox
タブをツールバーの下に表示するスタイル - userstyles.org
Firefox Tabs Back on Bottom like Safari - userstyles.org
コンパクト&スリムなUIにできる「Australis Slimmr」 - Mozilla Re-Mix
Firefoxのバー余白を調整してスペースを節約...「Smaller View」 - Mozilla Re-Mix
タブバー上部と右側のスペースを調整...「More or Less Br...」 - Mozilla Re-Mix
以前の[ブックマーク]ボタン...「Classic Bookmarks Button」 - Mozilla Re-Mix
ロケーションバーにスターボタンを復活「Star-Button In Urlbar」 - Mozilla...
・Firefox 29 のブックマーク追加 ボタン(☆)を消す スタイル - zubolla
スロッバー(ページ読み込み中アイコン)を復元する Throbber Restored | FOX...
アドオンバーを復活...「The Addon Bar」 - Mozilla Re-Mix
ステータスバー(アドオンバー)を復活「Status-4-Evar」 - Google 検索
Australis テーマで利用可能の縦置きツールバー Vertical Toolbar | FOX x FOX
Custom Buttons - Mozilla Firefox まとめサイト





関連記事

Firefox 29「戻る」ボタンをアドレスバーから分離する


Firefox 29の「戻る」ボタンをアドレスバーから分離する方法

NoUn Buttons をインストールします。
NoUn Buttons | Firefox アドオン - ダウンロード
NoUn Buttons の概要とインストール - マイナビニュース

※「戻る/進む」ボタンがおかしくなってしまったら(いじくりすぎて?)
一度アンインストールしてから 再インストールしてください。

※ タブバー上に置くと挙動がおかしくなります。


  
Back Forward separate をインストール
・戻る/進むボタンのみのシンプルタイプ

※ NoUn Buttons との同時使用はできません。
※ タブバー上に置くと挙動がおかしくなります。


  
■ ユーザースタイルでデザイン調整タブ・ツールバーの高さ変更スタイル 専用)

  globalhs.png

タブ・ツールバーの高さ変更スタイル の最下行にコピペしてください。
※「戻る/進む」ボタンはツールバー以外には置かないでください。


  
■ それ用スタイル:Firefox 31用 [最終修正日:8/05]
  
#urlbar-container.chromeclass-location > #back-button,
#urlbar-container.chromeclass-location #forward-button {
display: none !important;
}
#forward-button {
-moz-box-align: center !important;
}
/* ↑ 変更部分 */

/* 戻るボタン */
#back-button {
box-shadow: none !important;
background-image: none !important;
}
#back-button > .toolbarbutton-icon {
-moz-image-region: rect(0px, 54px, 18px, 36px) !important;
border-radius: 2px !important;
padding: 2px 2px 2px 2px !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
/* margin: -1px 0px 1px 0px !important; *//* タブバー上に置く場合 */
}
#back-button:hover:not([disabled="true"]):not([open="true"]):not(:active) > .toolbarbutton-icon {
background-color: rgba(239, 244, 249, 0.75) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(23, 51, 78, 0.25), 0 1px 0 rgba(23, 51, 78, 0.35) !important;
}
#nav-bar-customization-target.customization-target > #back-button[disabled] > .toolbarbutton-icon, /* 使用不可(disabled)状態 */
#back-button:hover:active:not([disabled="true"]) > .toolbarbutton-icon, /* クリック時 */
#back-button[open="true"] > .toolbarbutton-icon {
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
}

/* 進むボタン */
#forward-button > .toolbarbutton-icon {
clip-path: none !important;
border: none !important;
padding: 2px 2px 2px 2px !important;
margin: 0px 2px 0px 1px !important;
margin-right: 2px !important; /* ボタン右スペース */
}
#forward-button:hover:not([disabled="true"]):not([open="true"]):not(:active) > .toolbarbutton-icon {
border-radius: 2px !important;
background-color: rgba(239, 244, 249, 0.75) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(23, 51, 78, 0.25), 0 1px 0 rgba(23, 51, 78, 0.35) !important;
}
#forward-button:hover:active:not([disabled="true"]) > .toolbarbutton-icon,
#forward-button[open="true"] > .toolbarbutton-icon {
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
}

#urlbar {
margin-left: 5px !important;
border-left: solid 1px #ADBCCB !important;
border-radius: 2px !important;
}
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled][switchingtabs] + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr),
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
padding-left: 0px !important;
}

  
■ それ用スタイル:Firefox 29 30用 [最終修正日:5/23]
  
#urlbar-container.chromeclass-location > #back-button,
#urlbar-container.chromeclass-location > #forward-button {
display: none !important;
}
#urlbar-container.chromeclass-location {
margin-left: -4px !important;
}

/* 戻るボタン */
#back-button {
box-shadow: none !important;
background-image: none !important;
}
#back-button > .toolbarbutton-icon {
-moz-image-region: rect(0px, 54px, 18px, 36px) !important;
border-radius: 2px !important;
padding: 2px 2px 2px 2px !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
/* margin: -1px 0px 1px 0px !important; *//* タブバー上に置く場合 */
}
#back-button:hover:not([disabled="true"]):not([open="true"]):not(:active) > .toolbarbutton-icon {
background-color: rgba(239, 244, 249, 0.75) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(23, 51, 78, 0.25), 0 1px 0 rgba(23, 51, 78, 0.35) !important;
}
#nav-bar-customization-target.customization-target > #back-button[disabled] > .toolbarbutton-icon, /* 使用不可(disabled)状態 */
#back-button:hover:active:not([disabled="true"]) > .toolbarbutton-icon, /* クリック時 */
#back-button[open="true"] > .toolbarbutton-icon {
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
}

/* 進むボタン */
#forward-button > .toolbarbutton-icon {
clip-path: none !important;
border: none !important;
padding: 2px 2px 2px 2px !important;
margin: 0px 2px 0px 1px !important;
margin-right: 2px !important; /* ボタン右スペース */
}
#forward-button:hover:not([disabled="true"]):not([open="true"]):not(:active) > .toolbarbutton-icon {
border-radius: 2px !important;
background-color: rgba(239, 244, 249, 0.75) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(23, 51, 78, 0.25), 0 1px 0 rgba(23, 51, 78, 0.35) !important;
}
#forward-button:hover:active:not([disabled="true"]) > .toolbarbutton-icon,
#forward-button[open="true"] > .toolbarbutton-icon {
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
}

#urlbar {
margin-left: 5px !important;
border-left: solid 1px #ADBCCB !important;
border-radius: 2px !important;
}
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled][switchingtabs] + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr),
window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
padding-left: 0px !important;
}




関連記事

Firefox 29 タブ・ツールバーの高さを変える


Firefox29 のタブ・ツールバーが、がっかりするくらいでかいので
ユーザースタイルシートを使って小さくします。


■ スタイル適用前

  cafx01s.png

■ スタイル適用後

  cafx02ds.png
  

※ タイトルバー・メニューバーは非表示で使用してください。
※ 適当な感じでやってるので修正の可能性大です。[最終修正日:5/22]
自分環境用なので数値は適当に変えてください。
※ もっといじくりたい方は ブラウザの中にブラウザを開きFirebug調査 してください。




■ タブ・ツールバーの高さを小さくするスタイル(Stylishにコピペして使ってください)
  
/* タブ位置・高さ */
/* #titlebar {height: 0px !important;} */
/* 最大化時 */
#main-window[sizemode="maximized"] #toolbar-menubar {
margin-bottom: 6px !important;
}
#main-window:not([sizemode="maximized"]) #toolbar-menubar {
margin-bottom: -15px !important;
}
#navigator-toolbox {
margin-top: -6px !important;
}

/* 全画面表示時 */
#main-window[inFullscreen="true"] > #tab-view-deck > #browser-panel > #navigator-toolbox {
margin-top: 0px !important;
}
/* 全画面時 バーが隠れてくれないので(不具合ある場合削除) */
#main-window[inFullscreen="true"] > #tab-view-deck > #browser-panel > #navigator-toolbox {
min-height: 1px !important;
height: 1px !important;
}
#main-window[inFullscreen="true"] > #tab-view-deck > #browser-panel > #navigator-toolbox:hover {
height: 54px !important;
}
/* #fullscr-toggler {height: 0px !important;} */

/* タブバー */
#TabsToolbar.toolbar-primary > #tabbrowser-tabs.tabbrowser-tabs {
min-height: 27px !important;
height: 27px !important;
}
#TabsToolbar {
margin-left: -7px !important;
}

/* ツールバー */
#nav-bar {
height: 27px !important;
}
#urlbar {
min-height: 24px !important;
height: 24px !important;
margin-top: 0px !important;
margin-right: 0px !important;
padding-top: 1px !important;
}

/* ロケーションバー内 */
#identity-box {
min-height: 20px !important;
height: 20px !important;
margin-top: -2px !important;
}

/* ------------------------------------------------------ */
/* アイコンスペース */
/* ツールバーボタン */
#nav-bar .toolbarbutton-1:not([type=menu-button]),
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin: -1px 0px 0px 0px !important;
}

#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 {
padding-left: 2px !important;
padding-right: 2px !important;
}

/* ツールメニューボタン(右端の 三 ボタン) */
#PanelUI-menu-button.toolbarbutton-1 {
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-left: 4px !important;
}

/* メニュータイプボタン */
#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button
):not(#social-provider-button):not(#PanelUI-menu-button) {
padding-left: 2px !important;
padding-right: 2px !important;
}
/* メニュータイプボタン内 */
#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button
):not(#social-provider-button):not(#PanelUI-menu-button) > .toolbarbutton-icon {
padding-left: 4px !important;
padding-right: 4px !important;
}

/* アイコン内スペース */
#nav-bar .toolbarbutton-1:not(:-moz-any(#back-button,#forward-button)) > .toolbarbutton-icon {
padding-left: 3px !important;
padding-right: 3px !important;
}

/* メニューボタン(ブックマーク) */
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
padding-left: 3px !important;
padding-right: 3px !important;
}
/* ドロップダウンボタン(ブックマークメニュー) */
#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
padding-left: 3px !important;
padding-right: 3px !important;
}

/* テキストタイプボタン */
#nav-bar .toolbarbutton-1 > .toolbarbutton-text {
margin: 0px 0px 0px 0px !important;
padding: 1px 2px 1px 2px !important;
min-height: 24px !important;
height: 24px !important;
}

/* セパレーター */
/* #nav-bar-customization-target.customization-target toolbarseparator {
margin-left: 0px !important;
margin-right: -1px !important;
} */

/* ??? */
/* #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
padding-left: 2px !important;
padding-right: 2px !important;
} */

/* ------------------------------------------------------ */
/* 戻るボタン */
#back-button.toolbarbutton-1 {
padding: 0px 0px 0px 4px !important;
margin-top: -2px !important;
margin-bottom: -2px !important;
}
#back-button > .toolbarbutton-icon {
padding: 4px 5px 4px 4px !important;
/* border-radius: 2px !important; *//* 四角ボタン */
/* padding: 2px 3px 2px 3px !important; *//* 四角ボタン */
}

/* 進むボタン */
#forward-button.toolbarbutton-1 {
padding: 0px 0px 0px 0px !important;
margin-right: 0px !important;
}
#forward-button > .toolbarbutton-icon {
padding-right: 2px !important;
}




■ 旧・タブ・ツールバーの高さを小さくするスタイル [最終修正日:5/19]
  



関連記事

Firefox 29 をいじくる前には プロファイルをコピーしましょ !


Firefox をいじくる(カスタマイズ・アドオンインストール 等)前には
プロファイルをコピー(バックアップ)しておいたほうがいいかもです。

いじくったあとに Firefoxが壊れてしまったら
プロファイルを「コピーしておいたプロファイル」に戻せば
簡単にFirefoxを修復できます

  
※ 自分の場合、Firefox 29 アップデート後「Classic Theme Restorer」を
インストールしたら いきなり壊れてしまいました。(表示が壊れマウスでの操作が不能に)
なので、これからは 何かする前には必ずバックアップしておきます。
Classic Theme Restorer=別のプロファイルには正常にインストールでき 動いてます)


注意: プロファイルフォルダ間でデータのコピーを行うときは、
必ず Firefox を終了しておいてください。




プロファイルフォルダを開く


「メニューボタン(三ボタン)」→「ヘルプ」→「トラブルシューティング情報」
「アプリケーション基本情報」
「プロファイルフォルダ」→「フォルダを開く」ボタンをクリックすれば

プロファイルフォルダに簡単にアクセスできます。


■「メニューボタン(三ボタン)」→「ヘルプ」

  prof01s.png

■「メニー」→「トラブルシューティング情報」

  prof02s.png

■ トラブルシューティング情報
「プロファイルフォルダ」→「フォルダを開く」ボタンをクリック


  prof03s.png

■ プロファイルフォルダ

  prof04s.png



プロファイルフォルダをコピーする


■ 上の階層へ移動

  prof05s.png

■ プロファイルフォルダ

  prof07es.png

■ 適当な場所に プロファイルフォルダをコピーします。

prof06s.png



「profiles」フォルダ のショートカットを作る


■ プロファイルフォルダは「profiles」フォルダ内にあるので
上の階層へ移動して


  prof09sgs.png

■「profiles」フォルダ

  prof08s.png

■ 簡単に「profiles」フォルダを開けれるように ショートカットを作って
ランチャにでも入れておきます。


prof10s.png




Firefox の修復


Firefox が壊れたら そのFirefoxのプロファイルフォルダを削除し、
コピーしておいたプロファイルフォルダを戻します(ここにコピー)。
これで修復完了です。





関連記事

Firefox 29 になって トラブル多発してます めんどくちゃい

Firefox 29 アップデート後

なんかしらんけど

トラブル多発してます。

だれか解決してくれるまで

余計なことせんとじっとしてます。




【 対処法 】

なにかをする」前にプロファイルをコピーしておきます。

Firefoxが壊れたらコピープロファイルにもどします。

これが一番簡単な修復方法ですな..






プロフィール

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

全記事表示リンク

全ての記事を表示する

カテゴリ
検索フォーム