userChrome.css・userContent.cssスレ Part7
■ このスレッドは過去ログ倉庫に格納されています
●User Style Managerについて
バージョンによって利用できない機能があります
GitHub - scrapmac/User-Style-Manager
https://github.com/scrapmac/User-Style-Manager
管理画面
×1.1.1
×1.1
○1.0
スタイル作成
○1.1.1
△1.1
×1.0 Stylishが自動更新で11月11日付け置き換わったわけ
完全に終わった旧仕様の代わりに全く同じコードをuserChrome.css作ってコピったら完璧（笑）
てか今までもuserChrome.cssがあればStylishなんつーチンパンアドオン自体不要だったなｗ
食わず嫌いみたいな真似はなるべくしない方が良いと気付いたったｗｗｗ 自分で書く者にとっては、すぐに結果を反映できて書き換えられるStylishは都合が良かった
書いて再起動、意図と少し違った結果になったから修正してまた再起動とか面倒
特に数値の微調整とかやってられんわ
ContentだけならStylusで代替できるけれどもChromeは無理だし いちおつ〜
>>5
あらためて知る「お試し」機能の偉大さよ。
Live editor for CSS and LESS
https://addons.mozil...or-for-css-and-less/
編集内容がリアルタイムに反映。
流石にabout:ページへの適用やuserChrome.cssのライブ更新は無理だけど
利用するサイト向けの更新作業に便利。 以下cssを57に追加しようとしたところエラーが出るのですが
どのように修正すれば良いのでしょうか
ブックマークフォルダの色を黄色に戻す
@-moz-document url(chrome://browser/content/bookmarks/bookmarksPanel.xul) {
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, open) {
list-style-image: url("chrome://global/skin/icons/folder-item.png")!important;
-moz-image-region: rect(0px, 32px, 16px, 16px)!important
}
} 親要素に適用させるセレクタってCSS3に存在しないんだな… >>5
スタイルエディターで即時適用、確認しながら書ける
Shift+F7 で開いて Alt+N で新規シート
XULはブラウザーツールボックスのスタイルエディター
https://developer.mozilla.org/ja/docs/Tools/Browser_Toolbox
書き上がったら userContent.css, userChrome.css に保存して再起動 >>7
userChrome.cssで動いてるよ。 >>7
/* ブックマークフォルダの色を黄色に戻す */ >>10
動くことは動くのですが、エラーのせいかこのcssより下にまた別のcssを書いてもfirefoxに反映されないのが気がかりになっています
>>11
すいません、紛らわしい書き方をしてしまいました
日本語はcssに書いていません {}がないとかじゃねえの
@-moz-document url(chrome://browser/content/browser.xul) {
/* ここに他に書きたいCSSを書く */
}
それ書いたの1か月前だっけ 時が進むの速い
なんとなく出す機を逸した感じがした、もっといろいろ黄色にするCSSをついでに
/* フォルダアイコンを元に戻す
ブックマークサイドバー・ブックマークツリー・ブックマーク編集パネル
履歴サイドバー・ブラウジングライブラリー
*/
@-moz-document url(chrome://browser/content/bookmarks/bookmarksPanel.xul),
url(chrome://browser/content/history/history-panel.xul),
url(chrome://browser/content/browser.xul),
url(chrome://browser/content/places/places.xul){
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, open),
.bookmark-item[container]{
list-style-image: url(chrome://global/skin/icons/folder-item.png)!important;
-moz-image-region: rect(0px, 32px, 16px, 16px)!important
}
} >>13
ありがとうございます
無事色覚を取り戻せました >>8
案はあったよね
>ではなく<を使うやつ
どうなったんだろうあれ #TabsToolbar * {
min-height: 18px !important;
max-height: 18px !important;}
}
Firefox57でuserChrome.cssにて上記のcssでタブバーをを細くしているのですが
タブを多量に開いた際にタブの右側に出る｢タブを一覧表示します｣のボタンのポップアップメニューがcssに影響を受けているのか正常に表示されません
:not(#alltabs-popup) { 上記記述 }
等素人知識で試してみたのですがうまくいきません
どのように修正したらいいのでしょうが Firefox57.0 (64 ビット) です
userChrome.cssに以下の記述をしたところ、
タブバーは一番下になって目的は達したのですがブックマークツールバーが一番上になってしまいました
ブックマークツールバーをタブバーのすぐ上にするにはどうすればいいでしょうか？
/* タブバーを一番下にして上の隙間を削る */
#TabsToolbar {
-moz-box-ordinal-group: 9 !important;
margin-top: 0 !important;
} >>17
不用意に全称セレクタ(*)を使わない
殆どの場合必要ないよ
特に子孫セレクタ(空白区切)との単純な組合せは影響範囲が広すぎて、そういう風に副作用が大きい
/* タブバーを細くする。 */
#TabsToolbar > #tabbrowser-tabs,
#TabsToolbar > #tabbrowser-tabs > arrowscrollbox {
min-height: 18px !important;
max-height: 18px !important;
}
/* タブバーを細くするとタブのドラッグ時にタブバーが消える対策。
* 参照: https://dxr.mozilla.org/mozilla-central/rev/2535bad09d72/browser/base/content/browser.css#193
*/
#TabsToolbar[movingtab] > #tabbrowser-tabs {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* 新規タブボタン(+)等の画像が潰れるのを避ける。 */
#TabsToolbar toolbarbutton > image {
padding: 0 !important;
min-height: 16px !important;
max-width: 16px !important;
} >>18
/* toolbar order (start) ************************************/
#print-preview-toolbar,
#printedit-toolbar,
#titlebar {
-moz-box-ordinal-group: 0 !important;
}
#navigator-toolbox #toolbar-menubar {
-moz-box-ordinal-group: 1 !important;
}
/* navigation toolbar */
#navigator-toolbox #nav-bar {
-moz-box-ordinal-group: 2 !important;
}
/* bookmarks toolbar */
#navigator-toolbox #PersonalToolbar {
-moz-box-ordinal-group: 3 !important;
}
/* 3rd party toolbars */
#navigator-toolbox toolbar {
-moz-box-ordinal-group: 10 !important;
}
/* tabs toolbar */
#navigator-toolbox #TabsToolbar {
-moz-box-ordinal-group: 100 !important;
} >>20
希望通りになりました ありがとうございます！ >>19
ありがとうございます
勉強になります
基礎を知らずに素人が適当にやるもんじゃありませんね
以後精進します
潰れてたアイコンもこの指定なら綺麗に表示できるんですね
助かります
本当にありがとうございました Firefox57.0 で久しぶりに userChrome.css に手を出してみようと思ったけど
昔あったDOMインスペクタみたいな、UI部分の要素を調べる方法って今はどうやるんですか？ >>24
「ブラウザーとアドオンのデバッガを有効」および「リモートデバッガを有効」
が出現条件か、これがわからなかった
とりあえず出てきた、ありがとう /* === Firefox 多段タブ === *//* タイトルバーボタン 縦幅 */ #titlebar-buttonbox { vertical-align: top !important; display: block !important; }toolbarbutton.titlebar-button { min-height: 31px !important; }
/* 多段タブの要素 */ .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { display: block !important; overflow: visible !important; }
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox { display: block !important; overflow-y: auto !important; overflow-x: hidden !important; max-height: 93px !important; /*タブバーの高さ*/ }
/* タブバー 横幅 */ #TabsToolbar { margin-right: -38px !important; }
/* 新しいタブボタン */ #new-tab-button { margin-left: -18px !important; } .tabs-newtab-button { vertical-align: bottom !important; height: 28px !important; }
/* タブ 縦幅 */ .tabbrowser-tabs .tabbrowser-tab { vertical-align: top !important; -moz-box-sizing: border-box !important; min-height: 31px !important; }
/* 通常タブ・選択タブ 横幅・文字色 */ .tabbrowser-tab:not([pinned]) { color:rgba(255,255,255,0.7) !important; min-height: 31px !important; min-width: 110px !important; }
/* アクティブタブ 横幅・文字色 */ .tabbrowser-tab[selected="true"]:not([pinned]) { color:rgba(255,255,255,1.0) !important; width: auto !important; max-width: 250px !important; }
/* 非選択タブ 横幅・文字色 */ .tabbrowser-tab[pending]:not([pinned]) { color:rgba(255,0,0,1.0) !important; min-width: 97px !important; }
/* すべてのタブにタブを閉じるボタンを表示 */ .tab-close-button.close-icon { display: inline-block !important; }
↑すいません 書き込みの16行？の制限で行数減らしてます。
すいませんこれでだいぶ多段タブを自分の好み通りに出来たんですけど、タブ移動がまともに出来ないのと
#new-tab-buttonをスクロールバーにかぶせるようにしてやっとスクロールバーが動かせる状態なんです。
これをどちらかもしくは、両方出来るようにならないでしょうか、よろしくお願いします。 タブバーとナビゲーションバーを透過させる方法はありますか?
#nav-bar{background-color:transparent!important;}
でナビゲーションバーの透過は出来そうなんですが･･･ >>26
あっ すいませんこれ、ツールバーのカスタマイズのテーマをＤａｒｋにしないと、タブの文字色おかしいかもしれません。 >>27
んん？ タブバーはともかく、ナビゲーションバーはデフォルトで透過だったような
適用しているテーマの影響かな？
自分用にメニューバーにも適用していた部分もコメントアウトして一応は残しておくので必要があればどうぞ
https://pastebin.com/HsxFvYNy 57.0 です
ブックマークツールバーのアイコンの間隔を狭くしたいのですが
ググって見つけた以下の記述では希望通りになりませんでした
toolbarbutton.bookmark-item:not(.subviewbutton) {
padding: 1px 2px; /* ← 1px 4px */
}
どうすれば間隔が狭くなるでしょうか？ >>31
希望通りになりました ありがとうございました！ ブックマークツールバーの文字がぼやけて何やら怪しい雰囲気を出しているのです
https://dotup.org/uploda/dotup.org1388534.png
文字の周りの影みたいなのをなくして見やすくするにはどうしたら良いでしょうか ツールバーの三というのを非表示にしたいのですが
IDをご存じの方いらっしゃいますか /* ツールバーの 三 を非表示 */
#PanelUI-button {
display: none !important;
}
これで消えると思います。 ハンバーガーボタンはうちでは本物に置き換えている
#PanelUI-menu-button > .toolbarbutton-badge-stack{
list-style-image:none;
}
#PanelUI-menu-button > .toolbarbutton-badge-stack:before{
content:"\1F354";
font-size:18px;
} >>36
ありがとうございます
お陰様で消すことが出来ました >>38
line-height:13px;
あたりを追加するとホバーした時の装飾が他のと一緒になるかも >>38
面白いなｗ
content:"\1F39A";に代えて使うわ
サンクス >>35
ここを開いてデバッガで要素を見ればわかるよ
chrome://browser/content/browser.xul タブバー消したらハンバーガーボタンと閉じるボタンとが重なってしまって微妙だからどうにかしたいけどなんかいい感じにならないかな 情報がばらけちゃってるな、うちは↓でできた
Mozilla Firefox質問スレッド Part175
http://egg.2ch.net/test/read.cgi/software/1507682626/426
426 名前：名無しさん＠お腹いっぱい。[sage] 投稿日：2017/11/15(水) 11:48:42.02 ID:Zvu983hY0
>>424
/* Windowsのクローズボタンよけ */
#main-window:not([inFullscreen]) #nav-bar {margin-right: 110px !important}
#main-window:not([inFullscreen]) .titlebar-placeholder {display: none !important} >>46
クローズボタン避け横ずらしだとモヤモヤするのとあってなかったので
marginのrightをtopにして5pxにしたらいい感じになった
メニューバー出した時に空白部分が増えるのが気になるけど #TabsToolbarを#PersonalToolbarの下に置いているから
#titlebar-placeholder-on-TabsToolbar-for-captions-buttonsのvisibilityをcollapseにして、
#nav-barのpadding-rightをそれと同じ幅の106pxにしている タブの閉じるボタン非表示にしたい人は
userChrome.cssの作成し記入
/* タブを閉じるボタンを消す */
.tab-close-button{visibility:collapse !important}
userChrome.cssの置く場所
C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles\プロファイル名
ここに「chromeフォルダ」を作成し、その中に「userChrome.css」を作成する
http://onlinepckan.net/tool/usercss.html
こちら参照 ブックマークツールバーの名称消すcss使ってたけど初めの1文字表示させたいなと
:first-letter使ってみたけど全くうまくいかない、助けて >>54
アイコンを非表示にしてbackground-imageを文字図柄にする >>54
#PlacesToolbarItems > .bookmark-item {
max-width: 4em !important;
overflow: hidden !important;
} そのまま利用するより参考にカスタマイズする感じかね 57で開発ツール使っての要素の調べられるんだな
メニューの要素も調べられるのかな 57でタブを多段化だけしたいので教えていただきたいです。
よろしくお願いいたします。 >>63
多段になったんだけどタブが短くてタイトル
見えないから値変えたのに適応されないのはなんでだろ？高さは変わるのだけど 多段タブのcss(Firefox57で多段タブ でググって出てきた一番上)入れてatokで日本語入力してると
左上に検索候補らしい枠がちらつくのはどうやって直せば良いのでしょうか？ >>64
about:config
browser.tabs.tabMinWidth 多段タブCSSはこれでほぼ完璧になった
CSSで多段タブ (URLがNGワードになってるので短縮URL)
https://goo.gl/FgtL72 それぞれのタブの左上と右上に丸みを付けたい。
ググるといくつかあるのですが、57に対応してないためか丸みがつきません。
CSSでどう書けばいいんでしょうか？ サイトバーのトップバー（閉じるボタンがるところ）を消す方法ないでしょうか？ >>70
#sidebar-header { visibility: collapse !important;}
>>69
>>57のをダウンロードしてclassic/css/tabs/classic_squared_tabs.cssを開いてradiusを検索
これに限らずいろいろ勉強になる ツリータブの背景色を変えたいのですが、どう指定するのでしょう？
開発ツールのDOMで分かるとのことですが、見方を教えてください >>72
レス、ありがとう。
radiusはありませんでしたが、roundnessで下記がありuserChrome.cssへ書くも変化ありませんでした。
3px3pxを変えても同じでした。
/* tab top border roundness */
#TabsToolbar .tabs-newtab-button,
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack,
#TabsToolbar .tabbrowser-tab .tab-background,
#TabsToolbar .tabbrowser-tab .tab-content {
border-top-left-radius: 3px !important;
border-top-right-radius: 3px !important;
} >>75
その3pxがradiusですが……
ラインが追加されてるからそれも消す必要あるね
↓追記で
.tabbrowser-tab > .tab-stack > .tab-background > .tab-line[selected=true],
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
background-color: rgba(0,0,0,.2);
opacity: 0 !important;
}
.tabbrowser-tab .tab-background[selected=true] {
border-image: unset !important;
border-image-slice: 0 !important;
} いつの間にかリロードボタンがロケーションバーに統合できなくなっていますがcssにより統合することは可能でしょうか
firefox57です >>78
アドオンであったんですね
教えて下さりありがとうございます ブックマークをクリックで新タブに開く
検索結果を新タブに開く
はできたのですが，いずれもその都度フォーカスも移ってしまいます。
フォーカスが現タブから動かず，上記の２件を新タブに開く方法があったら教えてください。 >>63
これ導入して多段タブを表示した状態で正常にタブの並び替えできる？
自分は2段表示した段階でタブの移動がおかしくなる アドレスバーからの検索結果を常に新しいタブで開く方法教えてください >>76
ありがとう
丸みはアクティブタブだけ出ました。
非アクティブにも丸みを出せないでしょうか？ >>83
>>75,76だけのcssでこっちは丸くなってるんだが
他に何か指定してるんでない？ >>81
俺も並び替えがうまくいかなかったのでツリー型タブに移行した んー、よく見ると非アクティブタブ同士の間に薄いラインあるか
.tabbrowser-tab::after,
.tabbrowser-tab::before {
opacity: 0 !important;
border-image: unset !important;
border-image-slice: unset !important;
width: unset !important;
} >>86
これも追記するとタブ間の仕切りがなくなりますね。 >>82
検索語句入れて alt+Enter で新しいタブで開くようです
他の方法では今のところ無いらしいです >>82
649 名無しさん＠お腹いっぱい。 [] 2017/11/17(金) 08:23:24.17 ID:J+sWG7e80 [2/3] (PC)
>>647
試してないけどこんな書き込み見つけた
https://egg.5ch.net/test/read.cgi/software/1506030128/271 すみませんタブ上部の線を消すんじゃなく短くする方法ないですか？ >>86
すいません使わせていただいてタブの角が丸くなりました
同時にアクティブタブであることを示している上部青ラインが消えてしまいます
対策方法ないでしょうか >>91
>>76のでその青ラインを消してるんでその辺いじるかアクティブタブのborder-topを太くして色変えるとかかな /* ロケーションバーのドロップマーカを非表示 */
.autocomplete-history-dropmarker {
display: none;
}
これ動かないのはおま環ですかね？
ドロップマーカってアドレスバーにある・・・の事だよね >>92
ありがとうございます
青ラインは消さないと丸くならないみたいです
青ラインなしでいこうとおもいます >>93
!important がないからとかじゃないの >>93
違う
それは#pageActionButton >>88-89
ありがとうございます。
tabmixみたいなのを待ちつつ、暫く手動でやっときます。 >>94
青ラインの替り
.tabbrowser-tab .tab-background[selected=true]
にこれを追記でどうよ
border-top:2px solid #3030E0 !important; >>98
青ライン出ました
何回も教えてくれてありがとう 57から角タブになり、56までの丸タブよりは好み。
欲しいのは左上、右上を丸タブにして左下、右下を角にしたい。
それらしいのはuserstyles.orgにあったけどうまく表示されません。
詳しい方、お願いします。 ■ このスレッドは過去ログ倉庫に格納されています
