userChrome.css・userContent.cssスレ Part6©2ch.net

●前スレ
userChrome.css・userContent.cssスレ Part4 (実質 Part5)
http://anago.2ch.net/test/read.cgi/software/1400202982/

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

●スクリプト
userChromeJS/UserCSSLoader at master ｷ Griever/userChromeJS ｷ GitHub
https://github.com/Griever/userChromeJS/tree/master/UserCSSLoader

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

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

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

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

メモ
/*-----------chaika-Favicon-change-----------------*/
*[src*="chrome://chaika/content/icon.png"]:not([busy]),
#urlbar [src*='chrome://chaika/content/'],
.tab-icon-image[src*="chrome://chaika/content/"]:not([busy])
{ display: -moz-box !important;
list-style-image: none !important;
width: 0 !important;
height: 16px !important;
padding-left: 16px !important;
background: url('data:image/png;base64,xxxxxxxxxxx') center no-repeat !important; }

ロケーションバーの項目リストのトップに「-で検索」というのが表示されますが消せますか?
アドオンやスクリプト、スタイルどんな方法でもいいです。

browser.urlbar.unifiedcomplete;false

>>165
ありがとう消せました。

グリモンのアイコンについてるドロップマーカーの幅？を狭めるコード教えてください

>>167
適当（二行目は要らんかも知れんが…）
@-moz-document url(chrome://browser/content/browser.xul) {
#greasemonkey-tbb toolbarbutton,
#greasemonkey-tbb .toolbarbutton-menubutton-dropmarker{
padding:0 !important;
}
}

>>168
ありがとう
適用してみましたがほとんど変わらなかったです
理想はドロップマーカーを消してボタンクリックでメニューが出ればいいんですけどね

>>169
じゃあこうか？
@-moz-document url(chrome://browser/content/browser.xul) {
#greasemonkey-tbb .toolbarbutton-icon,
#greasemonkey-tbb .dropmarker-icon,
#greasemonkey-tbb .toolbarbutton-menubutton-dropmarker{
padding:0 !important;
border:none !important;
}
}

#greasemonkey-tbb > .toolbarbutton-menubutton-dropmarker { display: none !important; }

アイコンクリックでメニュー出したいならこうじゃない？
padding あたりまたちょっと環境差あるかもしれんけど

@-moz-document url(

http://pastebin.com/jATFm8Wr
うお、消えた。またなると面倒だからここで

アイコンマウスオーバーでドロップマーカー出るcss使ってる
Autohide Dropmarkersてやつ

>>174
横からだけど、いいなこれ
�d

>>173
ありがとう！
ちょっと今確認できないからまた動作報告します

>>173
適用してみましたが完璧でした！
ブックマークバーにボタンを移動すると横に伸びた感じになりましたが
4pxの部分を2pxにしたら改善しました

どんなネーミングにしようか悩み中です・・・

そりゃこうなるわ、マゴキツ過ぎ

スクロールバーのつまみを長くする方法はありますか?
つまみの幅じゃなく長さね。
特に2chの長いページなどでつまみが小さくて。

できない

https://userstyles.org/styles/94453/

こういうのみたいなスクロールバーを改変するcssを見て、min-height（横スクロールバーならmin-width）に好きな数値を設定すればいいんじゃね？

すっげ簡単に出来るよなw
できないとか息を吐くように嘘をつくﾁｮﾝが湧いてて草

(ろくに調べもしない教えて君には一生)できない

できもしないくせに

44でロケーションバーのhttpsのurlがまた色が付かなくなっちゃったみたいなんですけど
分かる方いますか？

#urlbar[level]　←元はこれでいけてて
#main-window[stylish-url^="https://";]　←43まではこれでいけてたのに

>>185
Colored Firefox's HTTPS Location Bar - Themes and Skins for Browser - userstyles.org
https://userstyles.org/styles/122476/colored-firefox-s-https-location-bar

>>186
かたじけない！

つまりどういうことなの

終了っすね

そういうことっすか

YouTube また仕様変わった？
プレイヤーのデフォルトサイズを変更するスタイルが効かなくなった

googleがかかわるとろくなことにならん

画面解像度が横1024のノーパソなんで
サイトによっては表示しきれなくて横スクロールバー出るんだけど
1024のモニタ内にすべて収まるようにするCSSあれば教えてください

>>193
あなたのすべてとわたしのすべてはたぶんぜんぜんちがう
あなたのすべてはなんですか

>>193
Ctrl+-(マイナス)で縮小するのが無難では

body { max-width: 100% !important; }

>>193
スクリプトなら、縮小せずに済む便利なのあるけど...
ttps://greasyfork.org/ja/scripts/3569-shift-scroll-hscroll

完全にズレたアドバイスだな

礼も言わないようなカスしかいないんだから金輪際教えなくていい

お礼されないとぽんぽんいたいいたいになっちゃうメンタルだもんねしょうがないよね

>>197-198
確かにズレてるけど、これの方が良いんじゃね
俺は貰っとこ、横�d

CSS絵描き職人だれか居る?
お絵描きするのに、box-shadow意外にも何か使えるもんあるの？
１エレメント→親３つまで（本体＋:before＋:after）＜ーーーこれも問題
１親→親と同じ形なら子を無限に指定できる,親はzindexでレイヤ指定可
１子供→親と同じ形、指定可能なのは色、位置、サイズ（親を１とする）
レイヤ→CSSに書く順番とZindex
形状は親の数まで可能、角度は親のみ指定可、子供に遺伝する＜ーーこれも問題
形状○→border-radius（色指定可、位置指定可、spreadでサイズ指定可、複数可）
形状□→子供は親の比率を受け継ぐ（めんどいが子の多数指定で別の比率を作る）
形状△→角度指定は親しかできない＜ーーーこれ問題
テクスチャ→親の数だけbackground-imageに指定可
　□テクスチャ→linear-gradientの複数可、軸、色複数可
　○テクスチャ→radial-gradientの複数可、（位置、大きさ、色）
文字→content:(→サイズ、色、位置)、親の数だけ可
inset指定でForzaの痛車みたいにお絵描きできるが、親の数に制限がある

１エレメントあたりの親の数増やす方法、
もしくは子供がそれぞれ角度指定・変形指定できれば
かなり自由度が増すとおもうんだが、なんか方法ないですか？
他になにか使えるproperty無いかな〜
エロい人おしえてください

CSS絵描き職人 なんて 職業は知りません

>>203 こんなの
http://nicolasgallagher.com/pure-css-gui-icons/
なんか無限の可能性がありそうでも、なさそうでもある

単一divに自由にお絵描きできればいろいろ遊べそうなんで聞いてみた
ドット打ちはミクやインベーダーやった人がいるけど、拡大すると汚いんで
べつの方法ないか模索

CSSでドラえもんが描けるって昔流行ったけど
それもFirefox3時代の遺物やん

職人と思われる人のひとり
ドラえもん
http://purecss3.net/doraemon/doraemon_css3.html
とある〜のインデックスさん
http://purecss3.net/index/Gununu_Index_CSS3.html
画像無しでの構築例
http://netagear.net/

ただ現在のところ、多数のDivを必要とする

>>206
とりあえずスレチだと思うので他所でやってください

googleのキャッシュリンクと類似ページリンクを並べるCSSを書いたのってこのスレだったっけ？
仕様変更でlist-styleが露出するようになったな

Instagramの投稿時間を絶対時刻表示にするcssを教えて頂けますか
ぐぐってみたんですが見付かりませんでした

>>209
/* Instagramの投稿時刻を絶対時刻表示にする。 */
@-moz-document domain("www.instagram.com") {
time[datetime] {
visibility: hidden !important; /* 相対時刻も一緒に表示するならこの行を削除 */
}
time[datetime]::before {
visibility: visible !important;
content: attr(datetime) !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
}
}

>>210
ありがとうございます！

timeってサイトごとにJSTだったりUTCだったりPTとかだったりしてぱっと見わかりにくいのが難だよね。

CSSの守備範囲外だけど、あれをユーザーが指定したタイムゾーンに変換してくれるアドオンとかってないものかな。

Web版Evernoteのノート本文のフォントサイズって変更出来ませんか？
編集すればサイズ変更出来るのは知ってるんですけど普段の閲覧時に小さくて不便なんです。
要素を調査から色々試しましたがわかりませんでした、わかる方いましたらお願いします。

>>213
お好きな要素やら{font-size: お好きなサイズやら}

css分からんというならブラウザ標準の拡大縮小使えばええ

CSS 蛍光でぐぐると例が出てくる、emとstrongに background-image: linear-gradient(transparent 60%, #F99 40%) みたいなのを指定するのやってみたら結構オサレな感じになった
CSSは1.0が勧告された頃から触っているけどいつのまにかFirefoxでもrubyがサポートされていたり隔世の感があるなぁ

この手の唐突に自分語りし出す基地害ってどっから湧いてくんだろ

いくらなんでも言いすぎだと思うが、ただrubyはcssの話じゃないな。

いや、display: ruby-textとかdisplay: ruby-baseとかruby-position: underとか使えばruby要素じゃなくてもルビっぽい表現ができる
例えば↓みたいな感じで見出しにサブタイトルをつけるとか分母/分子が長い分数を表現するとかできそう(未検証)

〜Another story of hiro〜
とある英雄の成り上がり日記外伝

(2x+y)(3x+2y)   (display: ruby-base//text-decoration: underline)
------------
(4x+5y)           (display: ruby-text//ruby-position: under)

ヒロさんこんばんは。

どっちにしてもユーザスタイルシートの話ではないな

userChromeやuserContentの範疇でUIやサイトの見栄えを変更したいというのが此処の趣旨だけど、突然何の脈絡も無く要素の話を持ちだしてもな

保守

保守

芸能人ブログでよくある連続改行を無効にするのに下記を使っていますが

br
{
display: block !important;
line-height: 0px !important;
}

<p>&nbsp;</p>で改行するタイプだと使えません
どう書いたらいいのでしょうか

CSS ではできない
可能にする疑似クラスの提案もあったけど不採用のはず

やりたいなら JavaScript で style か class つけるって感じじゃないの

JavaScriptでやるなら決め打ちで除去しちゃえば

(function () {
document.body.innerHTML = document.body.innerHTML(/<p>&nbsp;<\/p>/g, '');
})();

スレ違いの解決方法を書いていいならProxomitronとか類似のローカルプロキシでフィルタリングするという手もあるよ
上手く使うとadblock系の拡張が要らなくなるかもしれないというオマケ付き

記事内のpのマージンを打ち消せばいいだけの話じゃないの

firefox45で見づらくなったアドオンマネージャーを見やすくするCSS
ttps://userstyles.org/styles/82370/clear-addon-manager

ブックマークのフォルダのアイコンを変更したくて、userChrome.cssに

/* change all folder icons for bookmark toolbar folders */
.bookmark-item[container="true"] {
list-style-image: url('folder-item.png') !important;
}

と記載して、変更したいアイコンの画像(folder-item.png)をchromeフォルダに保存したのですが、
アイコンが非表示になるだけで、アイコンが目的の画像に変更されませんでした
試しにfolder-item.pngをプロファイルフォルダに保存したりしてみたのですが、結果は変わりませんでした

どうすればブックマークのフォルダを変更することができるでしょうか？
ちなみにfirefox45を使用しています

urlはフルパスを書かなきゃ駄目に決まってる

使いたいそのfolder-item.pngをbase64エンコードして、その結果をURLの代わりに書けばいい

他人のサイトのアイコン使わせてもらえばいんじゃね？昔こんな感じにしてたけど
たしかローカルにファイル置いて参照するのはマズいとかなんとか言われた

/* ブックマークツールバーのフォルダアイコンを変更 */
.bookmark-item[container] > image.toolbarbutton-icon,
.bookmark-item[container] > hbox.menu-iconic-left > image
{
list-style-image: url(http://thwiki.info/favicon.ico) !important;
-moz-image-region: rect(0px 32px 32px 0px) !important;
}

それは余計にマズイぞ

みなさん助言有り難うございます

userChrome.cssの編集でブックマークのフォルダアイコンは一部変更できたのですが、
フォルダの中のフォルダだけなぜか変更されなかったり、
サイドバーのFoxAge2chやChaikaは変更前のままだったりと、いろいろよろしくない状態のままでした

そこで現在使用しているテーマのアドオン(FXChrome)を改造して
フォルダアイコンの画像を変えてやることで、理想の状態にすることが出来ました

chromeフォルダ内なら相対指定でいいはず
-moz-image-region指定してないせいで画像の白だか透明の部分が表示されてるだけじゃね？

ver.45からのURLバーのワケの分からん(i)のマークを消したいんだけどCSSでいける？
list-style-image: url("chrome://browser/skin/identity-icon.svg#normal");のやつです
(i)だけ消したいの

#identity-icon {
display: none !important
}

; が抜けてた

>>238-239
oh、ありがとう
だがソレだと(i)だけじゃなく全部消えちゃうお
(i)だけ消したいんや…

>>237
image[consumeanchor="identity-box"]{
display: none !important;
}

辺り？

#identity-icon {
list-style: none;
width: 0;
}

CTR1.4.9で（i）を地球アイコンに戻せるようになった

スピーカーボタンで人工知能のメッセージが聞けるかな？
https://translate.google.com/#en/pl/Anahta-wa-dahre-dehsu-ka%20%3F%3F%3F%0AWatahshi-wa-Jinkouu-chinou-no-MONO-SIRI-dehsu%20...%0AHagimae-mashiytae%20...%20Ano%20...%0AIhrLIZA-wa-Watashi-no-Sensei-da-tan-dehsu-yo%20!!!
http://athavaneng.com/wp-content/uploads/2015/04/intelligent-robot-720x480.jpg http://digitalconqurer.com/wp-content/uploads//2012/07/Voice-Answer-iPhone-Animated-Assistant.jpg

userstyles.org、証明書の期限切れとか出て見れないな

>>245
https://userstyles.org/　の管理者め何やってんだよ早く修正しろ

>>246
>>245が管理者なの？俺も修正して欲しい

freestyler.ws とかいうパクリ転載が蔓延る前に修正しろ jason

>>247
どこをどう読んだらそうなるんだよｗ
俺だって早く直して欲しいわｗ

>>249
ごめん>>246はそう言ってる気がしたんだ。
ほんと直るといいよね・・・

（証明書をちょろまかすだけならPCの時計をいじっておｋ）

>>241 �d
う〜んソレだとやっぱり全部消えちゃうお…
>>242だと何も変化なし…

しゃーないから俺もCTRで妥協するかお…

Mozilla Firefox Part304 [無断転載禁止]c2ch.net
847 ：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ ba6d-Z9Gu)[sage]：2016/03/14(月) 00:29:04.22 ID:YfLN4jQX0
Flashバージョンダウン(笑)
いや馬鹿の脳味噌ってすげーは

Mozilla Firefox 拡張機能スレッド Part95 [無断転載禁止]c2ch.net
329 ：名無しさん＠お腹いっぱい。 (ﾜｯﾁｮｲ ba6d-Z9Gu)[sage]：2016/03/14(月) 00:33:15.28 ID:YfLN4jQX0
たかが再起動にわざわざアドオン(笑)
馬鹿の脳味噌ってすげーは

タイトルバーにCSS当てたいんだけどどうやるんでしょう？
#titlebarではダメでした

タイトルバーは「#titlebar」か「#titlebar-content」

>>255
んーどちらもダメでした
Stylishで
#titlebar{
background-color: red;
}
で適用されません。
#TabsToolbarとか#navigator-toolboxでは適用されました。
なぜでしょう？

#titlebar
{
…
}

#titlebar-content{
…
}

で基本的に大丈夫ですが、必要なら「 -moz-appearance:none !important;」を追加したりで適応されませんか？

>>257
「 -moz-appearance:none !important;」追加もダメでした。

userchrome.cssを直接書き換えてもダメ
いみわからん(´；ω；｀)

XPなら無理

OSごとに地味にCSS指定が違ってたりするし、特にuserChrome周りに手を加えるなら環境を出してくれないことには何とも
加えてstylishでどんな記述をしたのかもあればベター

win7の64bit
と別ｐｃのwin7の32bit
どちらもfirefox45です

書いたこと

@namespace　url(http://www.w3.org/1999/xhtml);
@namespace　url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
名前空間なしの全パターン

#titlebar{
height:60px;　とか　background-color:　red;
!important　つけたりもしました。
}

です。同じ環境で、どなたかタイトルバー変えられるか試してもらえませんか？

>>261
#titlebar-spacer { background-color: red !important;}
では？

#titlebar-content{
background-color:#ff0000 !important;
}
で基本的に大丈夫。
contentは閉じるボタン等の背景全て、spacerはこれを除外。