userChrome.css・userContent.cssスレ Part8

●前スレ
userChrome.css・userContent.cssスレ Part7
http://egg.5ch.net/test/read.cgi/software/1510394098/

●拡張機能
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/
Stylus
https://addons.mozilla.org/ja/firefox/addon/styl-us/
User Style Manager
https://addons.mozilla.org/ja/firefox/addon/user-style-manager/

●スクリプト
userChromeJS/UserCSSLoader at master ・ Griever/userChromeJS
https://github.com/Griever/userChromeJS/tree/master/UserCSSLoader
UserCSSManager
https://greasyfork.org/scripts/35880

●CSS（ユーザースタイルを記入するべきファイル）
userChrome.css（UI） / userContent.css（Web Site）

●関連サイト
userstyles.org
https://userstyles.org/

MDN - CSS
https://developer.mozilla.org/ja/docs/Web/CSS

とほほのスタイルシート入門
http://www.tohoho-web.com/css/

きもっｗ

基地外age厨 「きもっｗ(間抜け面

firefox60をダウンロードして使い始めました。
cssで見た目を変更できるのをしっていろいろと試行錯誤中。

オプション画面の左下にある「Firefoxサポート」の部分を消すには
どうしたら良いですか？
要素が<hbox class="help-button" pack="center">であることまでは
わかったんだけど・・・

#hbox.help-button {
visibility: collapse;
}

ってやっても消えないです。

hboxはidじゃなくてタグだろ

.help-buttonでいい
というかオプション画面まで弄るんだ
そんなに見るもんでも無いだろうに

>>513

おお！！　うまく消えた。
助かりました。ありがとうございます。
いろいろ消したり変えたりして試しているところなんです。

FoxClocksというアドオンがあるのですが、オプションでStatusbarを表示させたとき、
背景を透過できないでしょうか？
ttps://addons.mozilla.org/ja/firefox/addon/foxclocks/?src=search

ゲェー！！開発ツールからuserChrome.css編集して保存したらコメントアウト部分がかな英数問わず全部文字化けした
ちくしょう半端なバックアップしか取ってねえ
恨むぞMozilla

バックアップをよく見てみたら日本語シフトjisなんかで保存してた
氏ねあの頃の俺

開発ツールのデフォだとISO8859-1のはず
それをUTF-8に変換すればいいんじゃね？
と書いてたら元がshift-jisなのか

標準メモ帳使ってた頃の名残だと思われる
開発ツールでの上書き時にUTF-8で保存されたから化けたんだなぁ

そんな時には文字化け解読ツール、MBaker2。今でも時々お世話になってます；
http://www.geocities.jp/belden_dr/ToolMBaker.html

「設定→検索」のワンクリック検索エンジンの縦幅を増やしたくて
#engineList {height: 900px !important;}
とuserContent.cssに書いて縦幅を広げたら、10個目以降が選択できない(全22個)
インスペクターで調べるとrows="8"という所をrows="22"と変更すると望んだ挙動になる
userContent.cssにどのように書いたら良いでしょうか？

更新あったようなので久しぶりにチェックした、rebuild_userchrome.uc.jsなんてのができたんだ。
xulとの違いなんてあるの？

>>522
スマヌ、誤爆した…

userChrome.cssでタブバーを下に置いたら、ドラッグした時だけ全体が上にずりあがるんですが
直す方法ないですか？

YouTubeの再生速度変更ボタンを表示できたりしますか？

>>524
#TabsToolbar[movingtab] > #tabbrowser-tabs
や
#TabsToolbar[movingtab] + #nav-bar
あたりのmargintopやmarginbottomを0pxしたりーpx指定したりして調整してください

>>525
cssではないけどアドオンのEnhancer for YouTubeどうかな

>>526
ありがとう
なんとなくわかりました。

>>527
こういうのがあるんですね
ありがとうございます

な、age厨だろ

>>524
うちの場合#TabsToolbar[movingtab]のunsetを11pxで調整できた

#TabsToolbar[movingtab] {
padding-bottom: unset !important;
}

多段タブを使うとドラッグで移動できないんですが、これって修正方法ありますか？

仕様です

/* サイドバーの選択されたブックマークの色を変える */
#bookmarksPanel treechildren:-moz-tree-row(selected) {
background-color: #EEB0D0 !important;
}

60.0からこのcss動かなくなりました改善方法ないでしょうか

firefox-treestyletab環境でサイドバーをマウスオーバーで開閉する様にしていますが
固定したタブが開閉に応じて動いてしまうのでなく開いた時に全体が現れる様に固定出来ますか？

今の記述内容は以下の通りです
:root {
--thin-tab-width: 32px;
--wide-tab-width: 230px;
}
#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
min-width: var(--wide-tab-width) !important;
max-width: none !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
position: relative !important;
transition: all 100ms !important;
min-width: var(--thin-tab-width) !important;
max-width: var(--thin-tab-width) !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
transition: all 200ms !important;
min-width: var(--wide-tab-width) !important;
max-width: var(--wide-tab-width) !important;
margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}

「その他のツール」というボタンはこれで左に移動できました
#nav-bar-overflow-button {
-moz-box-ordinal-group: 0 !important;
}

#PanelUI-menu-buttonもいちばん左に移動させるにはどうしたらいいですか？

>>536
#PanelUI-menu-button じゃなくてその親の #PanelUI-menu

#nav-bar > * {
-moz-box-ordinal-group: 99 !important;
}
#nav-bar > #PanelUI-button {
-moz-box-ordinal-group: 1 !important;
}
#nav-bar > #nav-bar-overflow-button {
-moz-box-ordinal-group: 2 !important;
}

-moz-box-ordinal-group の値は 1 以上の整数
0 でも一応動くけど厳密には不可なので、このようにしている

おまけ

/* オーバーフローボタンの矢印 >> を反転 << */
#nav-bar > #nav-bar-overflow-button > .toolbarbutton-icon {
transform: rotate(180deg) !important;
}

>>537
ありがとうございます
できました！

メニューバーを右クリックした時に出るメニュー内の区切り線の消し方が知りたいです。
ちょうど　ツールバーから削除　と　メニューバー　の間にある区切り線です。

な、age厨だろ

>>539
#toolbar-context-menu > menuseparator:not(#viewToolbarsMenuSeparator) {
visibility: collapse !important;
}

>>541
ありがとうございました。

Google検索で出てくる「プライバシー診断を受けてみよう」を非表示にするcss知りたいです

>>543
https://egg.5ch.net/test/read.cgi/software/1524667609/222
これでいけるかも

>>544
ありがとうございました
それでいけました

cssでツールチップを半透明にするがツールバーなどに配置したアイコンは標準の白のままなんですけれども
ツールバーメニューバーなどのアイコン等のツールチップも変更する方法ありましたらお願いします
https://i.imgur.com/9nvuYxq.png

/* ツールチップを半透明にする */
tooltip {
-moz-border-radius: 10px !important;
-moz-opacity: 0.9 !important;
font: message-box !important;
color: #ffffff !important;
padding: 3px !important;
border-radius: 8px !important;
-moz-appearance: none !important;
background-color: transparent !important;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAGElEQVR42mNkYGBYxkAEYGIgEowqpI5CABjxALr+NPKCAAAAAElFTkSuQmCC") !important;
border: 1px solid #666666 !important;
}

Fx 61.0b14をダークテーマで使っています。
サイドバーをダークテーマと同じ色調に変えたくて、ぐぐりました。

ttp://swan-match.hatenablog.com/entry/2017/11/25/020656

こちらのサイトにあるようにuserChrome.cssに記入してみたのですが、
うまくいきません。たとえばブックマークフォルダの色が隠れてしまいます。
全体的に不自然なところが散見されます。
ご教示いただければ嬉しいです。わかる方いらっしゃいましたら、よろしくお願いします。

>>547
/* ブックマークフォルダのアイコンに色を */
.bookmark-item[container],
treechildren::-moz-tree-image(container) {
fill: #FCFCFC !important;
}

色は#FCFCFCを好みで変えて

こちらのダークテーマ参考にしたらいいかも
GitHub - Izheil/Firefox-57-full-dark-theme-with-scrollbars
https://github.com/Izheil/Firefox-57-full-dark-theme-with-scrollbars

>>548
ブックマークフォルダの視認性があがって識別が容易になりました。
感謝します。ありがとうございました。

>>548
横からだけど使わせてもらった
感謝

Ublock Originにダークテーマ適用したいんだが
>>548ヤツ使ってaddons.cssにTYPE-UUID-OF-UBLOCK-ORIGIN-HEREこいつを弄るみたいですが
UUIDってどこを参照すれば良いのだろうか？
どなたか馬鹿なオレに教えてください

about:debuggingでID調べろって書いてあったわ
すまない

Firefox60.0.2の環境下でmouseGesture2.4.2.uc.jsでのジェスチャーで、タブの複製だけが
『TypError:aParams is null』ってエラーが出てきて出来ないんだけど、
どう直したらいいか教えてもらえないでしょうか？

// タブの複製
case "Rda": openNewTabWith(gBrowser.currentURI.spec, null, null, null, false); break;

Firefox userChrome.js greasemonkeyスクリプトスレと間違えました
お騒がせしました

タブの高さを変更しています
タブをドラッグしたときブラウザ自体は調整してあり動きませんが
タブバーに配置したアドオンなどのボタンが動きます

画像上側がタブをドラッグした時
下が通常時です
https://i.imgur.com/MXFwgnr.png

タブバーのボタンを動かなくする方法はないでしょうか？

>>555
細くしてるなら細くしてるCSSも貼ったほうが良いよ

#TabsToolbar .toolbarbutton-1 .toolbarbutton-badge-stack {
padding: 0 var(--toolbarbutton-inner-padding) !important;
}

どう？

>>556
ありがとうございます　遅くなりました　まだいくらか上方に動きます
こんな感じです
https://i.imgur.com/cO79f49.png

cssはこれらを利用していました
/* タブバーを細くする */
#TabsToolbar > #tabbrowser-tabs,
#TabsToolbar > #tabbrowser-tabs > arrowscrollbox {
min-height: 30px !important;
max-height: 30px !important;
}
/* remove 'dragging tab' margin/padding nonsense タブを動かしたときにブラウザが動くのを調整 */
#TabsToolbar[movingtab] {
padding-bottom: 15px !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
padding-bottom: unset !important;
margin-bottom: unset !important;
}
#TabsToolbar[movingtab] + #nav-bar {
margin-top: unset !important;
}

/* 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;
}

>>557
なるほどなるほど
分からん(CSS素人)

タブバーにアイコン置くことなかったから動くのに気づいたら俺も気になってきた
玄人頼む

>>559
どもです
あちこちググってみたらFirefox57向けのcssを見つけまして
これだとタブバーに配置したボタンが動かなかったのでこれでいくことにしました
どうもありがとうございました

/* タブの高さ */
.tabbrowser-tabs .tabbrowser-tab {
vertical-align: top !important;
-moz-box-sizing: border-box !important;
min-height: 25px !important;
max-height: 25px !important;
}

>>559
すいません
.tabbrowser-tabsではなく#tabbrowser-tabsでした

それからこのcssはタブの高さを変更するだけでタブバーはそのままでした
タブをタブバーより高くしたときにはタブバーも太くなりますが

それなのでタブバーを細くしたときにボタンが動くのは解決しませんでした

>>557
#TabsToolbar[movingtab] > toolbarbutton { margin-bottom: -15px !important; }

>>562
ありがとうございます
タブバーを細くするcss利用してもボタンが動かなくなるよう調整できました！！

下記が効かなくなった、61.0からかな？
/*** リンク文字列のマウスオーバーでBottomにURLを表示しない ***/
@-moz-document url(chrome://browser/content/browser.xul) {
statuspanel[type="overLink"] {
display: none !important;
}
}

#statuspanelにしたら消えたよ

>>565
ありがとう

61.0からだと思うけど、下記でブックマークメニューで黄色にならない。
ブックマークツールバーは黄色になる。
どう修正すれば良いの？
/***ブックマークメニューとブックマークツールバーのフォルダアイコンを以前の黄色に戻す***/
/* ブックマークメニュー */
@-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
}
}
/* ブックマークツールバー */
.bookmark-item > .toolbarbutton-icon,
menu.bookmark-item:not([query]):not([label="ブックマークツールバー"]):not([label="他のブックマーク"]) {
list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
-moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

>>567
ブックマークサイドバーのURLが変わっている

@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xul") {

>>568
もしよろしければ履歴のURLも教えて頂けませんか
chrome://browser/content/history/history-panel.xul

>>568
ありがとう

>>569
@-moz-document url(chrome://browser/content/bookmarks/bookmarksPanel.xul),

>>571
ありがとうございました!

下記がいつからか一番上に表示されなくなった。
どう修正すれば良いの？

/*** コンテキストメニューSwift Selection Searchを一番上へ ***/
#jid1-kdtticj6wxvafa_jetpack_sss {
-moz-box-ordinal-group: 0 !important;
}

ちなみに62で
chrome://global/skin/icons/folder-item.png
が削除されるので>>429を今のうちにやっておくと後で混乱しなくていいかも

61にしたらサイドバーの背景がもとに戻ってしまった。
なにか変更になったのでしょうか？背景黒にしていたのですが。

>>575
そりゃ変更があったから背景が変わったんだろうなぁ
元々適用していたCSSすら出してないから雑談にしかならないけどな

>>575
CSSだしてみて！
比較してみるから！

http://fast-uploader.com/file/7085662970064/

山口達也好きのロリコンなのはわかった

リンク先のurlなどが表示されるステータスバーを昔のFxみたいにページ下に表示する方法を教えて下さい

>>579
これをgoogleで検索する→ Status-4-Evarもどき(Firefox57から)

.statuspanel
.statuspanel-inner
.statuspanel-label
css内の上の記述を下のに書き換える
#statuspanel
#statuspanel-inner
#statuspanel-label

>>580
横からだけど Status-4-Evarもどき を以前から使っていてFirefox61.0でうまく動かなかったのが解決しました
ありがとう！

便乗質問
Firefox61.0で Status-4-Evarもどき の メニューバーVer を使っているのですが
アドオンのアイコンをステータスバーに配置すると下にずれてしまってアイコンの上半分しか表示されません
（履歴や印刷のアイコンは普通に表示されます）
これを解決する方法を教えてください よろしくお願いします

>>580
よこからだけど有難う

>>582
google検索でこれを検索→ メニューバーに置いたアイコンを右寄せにしたい
このcssを有効にするとボタンがちゃんと表示されると思う
うちの環境だけだったらごめん

長いURLだとアドレスがボタンに重なり見えないし見栄えも悪いので自分はこんな感じにしている
cssの下から11行目以下をこのように
フォントサイズは12か13で。ステータスバーもどきの高さを変更してるならborder: 3pxの値を変えればいいです
#main-window:not([inFullscreen]) #statuspanel-label {
background: transparent !important;
border: 3px solid #666666 !important;
padding: 0px !important;
font-size: 1px !important;
color: #fff !important;
margin-bottom: 0px !important;
background-color: rgba(51, 51, 51, 0.625) !important;

>>584
>>582 です
メニューバーに置いたアイコンを右寄せにしたい で上手くいきました
ありがとうございました！

>>584
cssの下から11行目以下ってStatus-4-Evarもどき メニューバーVerのcssね

>>580
その部分書き換えたら直ったよありがとうございます
もう一つ下記のやつが動作しないんだけど修正箇所分かる人居たら教えて下さい
/*** Swift Selection Searchを一番上へ ***/
#jid1-kdtticj6wxvafa_jetpack_sss {
-moz-box-ordinal-group: 0 !important;
}
ファイル名に_sss無かったから抜いてみても駄目だった

>>587
Fx60からは拡張idの後に-menuitem-が入るようになった
#jid1-kdtticj6wxvafa_jetpack-menuitem-_sss

>>588
ありがとう、横からいただきました。

>>588
ググってもそれらしい情報見つからなくて困ってた所助かりました
皆どっから情報仕入れてるんだろう

cssのSearch Bar Show Engine Namesとuc.jsのShowSearchBarHistroryByClick.uc.jsを組み合わせると
検索履歴が半行くらいでしか表示されなくなるの打つ手無い？

豆腐さんにあるuAutoPagerizeの区切り線など利用しています
デフォの黒いバーが消えないんですが消す方法ないでしょうか

.autopagerize_page_separator {
display: none;
}

「豆腐さんにあるuAutoPagerizeの区切り線」とは何なのか、uAutoPagerizeはuc.js版なのかアドオン版なのか
最低限の情報が足りてなさ過ぎだろ

アドオン版だという前提で言うと、そもそもデフォの黒いバーなんてない

今日の夕飯は豆腐にしようと思いました

!important付けてみればいいんじゃね？
pageの前にあるタイルは何よ

>>597
後出しですいません!important付けないとcssが働かないので付けてました
pageの前にあるタイルというのはuAutoPagerizeの緑のアイコンのことでしょうか？
これはデフォであるものだと思いますけど
クリックするとグレーアウトしuAutoPagerizeの動作を停止させたりできるようになってます

すまん、ボケてたuの方か
uAutoPagerize+stylusで黒線消えるけどなぁ

>>599
userContent.cssに記入してましたが
Stylishでやってみたら消えました
いろいろとありがとうございました

未読タブの文字に着色できなくなったのかよ。なんてこった…
裏技ありますか？

>>601
https://egg.5ch.net/test/read.cgi/software/1528226311/141
cssは利用してたのをそのまま使えるはず

それ助かるけど既存タブをバックグラウンドでリロードしたときに反映されないのが残念

>>602
ありがとう。

リンク先のurlなどが表示される左下のポップアップ、Status-4-Evarもどきを利用すると移動できるみたいですが、URLバーに表示させるようにはできませんか？
以前は拡張のLink Location Barを使用していて対応していたのですが、使えなくなってしまったので、もしCSSで対応できるならやりかたを教えてください

>>605

ttps://userstyles.org/styles/96269/topstatuspanel-in-the-locationbar

>>606
紹介どうもありがとうございます
でもこのCSSインストールできますか？
なんかインストールのボタンを押しても無反応で駄目なんです
自分だけでしょうか？

>>607
下にスクロールすると出てくるShow CSS Codeをクリックすると
ソースが表示されるからそれをコピペ
あと最新のFirefoxだと
.statuspanelを
#statuspanelに置き換えるはず

>>608
修正箇所まで教えてくれてどうもありがとう
今はちょっと試せないのであとでやってみますね