X
Kliknite sem pre prechod na mobilnú verziu webu.

Fórum podpory

Custom css

Pridané

Hello! I have problems creating my own CSS style. Most of the changes were applied by the browser through userChrome.css and userContent.css, but those elements that use common.css ignore it. What to do in my case?

Hello! I have problems creating my own CSS style. Most of the changes were applied by the browser through userChrome.css and userContent.css, but those elements that use common.css ignore it. What to do in my case?
Priložené obrázky

Vybrané riešenie

Okay, found the other page by pasting

about:preferences#containers

to the address bar and pressing Enter to load it. Similar idea, except this time it's a <window> instead of a <dialog>:

window#ContainersDialog input, 
window#ContainersDialog textarea {
  color: white !important;
  background-color: red !important;
}
Čítať túto odpoveď v kontexte 0
Citácia

Ďalšie informácie o systéme

Aplikácie

  • Identifikácia prehliadača: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0

Viac informácií

cor-el
  • Top 10 Contributor
  • Moderator
17339 riešení 156760 odpovedí

You can see in the Rules panel view that this is about an element in the html namespace, so you will have to use a selector that includes a namespace (*|xxx) to override an existing rule.

The code needs to be in userChrome.css, and probably above the default @namespace line or in a file without a namespace line imported via an @import url(); rule in userChrome.css.

*|input {...}
You can see in the Rules panel view that this is about an element in the html namespace, so you will have to use a selector that includes a namespace (*|xxx) to override an existing rule. The code needs to be in userChrome.css, and probably above the default @namespace line or in a file without a namespace line imported via an @import url(); rule in userChrome.css. <pre><nowiki>*|input {...}</nowiki></pre>
Pomohlo vám to?
Citácia

Autor otázky

cor-el , сan you show what the rule will look like for the above example?

''' cor-el ''', сan you show what the rule will look like for the above example?
Pomohlo vám to?
Citácia
cor-el
  • Top 10 Contributor
  • Moderator
17339 riešení 156760 odpovedí

What element do you want to change (i.e. override what rule)?

A see this selector active (bold): xul|textbox[focused] I'm not sure if you will be able to override such an element select.

Did you check this common.css file to see what namespace lines are at the top of the file?

What element do you want to change (i.e. override what rule)? A see this selector active (bold): xul|textbox[focused] I'm not sure if you will be able to override such an element select. Did you check this common.css file to see what namespace lines are at the top of the file? *https://developer.mozilla.org/en/Web/CSS/@namespace
Pomohlo vám to?
Citácia

Autor otázky

For the “Settings” item, I imported a separate file to which I added: @namespace html "http://www.w3.org/1999/xhtml"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

html|input[type="email"]:focus, html|input[type="tel"]:focus, html|input[type="text"]:focus, html|input[type="number"]:focus, html|textarea:focus, xul|textbox[focused] {

 border-color: red !important;
 box-shadow: 0 0 0 1px #5294e2,
   0 0 0 4px #5294e2 !important;

}

html|input[type="email"], html|input[type="tel"], html|input[type="text"], html|input[type="number"], html|textarea, xul|textbox {

   background-color: red !important;

}

This rule also applies to sites. If add "@-moz-document url(about:preferences)" the rule stops working altogether.

For the “Settings” item, I imported a separate file to which I added: @namespace html "http://www.w3.org/1999/xhtml"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; html|input[type="email"]:focus, html|input[type="tel"]:focus, html|input[type="text"]:focus, html|input[type="number"]:focus, html|textarea:focus, xul|textbox[focused] { border-color: red !important; box-shadow: 0 0 0 1px #5294e2, 0 0 0 4px #5294e2 !important; } html|input[type="email"], html|input[type="tel"], html|input[type="text"], html|input[type="number"], html|textarea, xul|textbox { background-color: red !important; } This rule also applies to sites. If add "@-moz-document url(about:preferences)" the rule stops working altogether.
Pomohlo vám to?
Citácia
cor-el
  • Top 10 Contributor
  • Moderator
17339 riešení 156760 odpovedí

Code with @-moz-document for about:preferences would normally go in userContent.css and not in userChrome.css

Code with @-moz-document for about:preferences would normally go in userContent.css and not in userChrome.css
Pomohlo vám to?
Citácia

Autor otázky

It does not work. Of course, there are special cases where the code works if added to userContent.css, but this is not it.

It does not work. Of course, there are special cases where the code works if added to userContent.css, but this is not it.
Pomohlo vám to?
Citácia
jscher2000
  • Top 10 Contributor
8574 riešení 70112 odpovedí

As a proof of concept in a userContent.css file, this works for me. There is a green input on about:config, and a red search box on about:preferences. The reason for using url-prefix is the hashes that are added to the URL when you go to different parts of the page.

input, textarea {
  color: white !important;
  background-color: green !important;
}
@-moz-document url-prefix("about:preferences") {
  input, textarea {
    background-color: red !important;
  }
}

Note: I don't specify any namespace at the top of the file.

As a proof of concept in a userContent.css file, this works for me. There is a green input on about:config, and a red search box on about:preferences. The reason for using url-prefix is the hashes that are added to the URL when you go to different parts of the page. <pre>input, textarea { color: white !important; background-color: green !important; } @-moz-document url-prefix("about:preferences") { input, textarea { background-color: red !important; } } </pre> Note: I don't specify any namespace at the top of the file.
Pomohlo vám to?
Citácia

Autor otázky

jscher2000, I need to change only on the settings page, without touching the sites. This will affect the sites: input, textarea {

 color: white !important;
 background-color: green !important;

} The second part does not work for me without the first, but it affects sites.

'''jscher2000''', I need to change only on the settings page, without touching the sites. This will affect the sites: input, textarea { color: white !important; background-color: green !important; } The second part does not work for me without the first, but it affects sites.
Pomohlo vám to?
Citácia
cor-el
  • Top 10 Contributor
  • Moderator
17339 riešení 156760 odpovedí

Just to be sure: This code is for userContent.css

@-moz-document url-prefix("about:preferences") {
  input, textarea {
    background-color: #ffa !important;
  }
}
Just to be sure: This code is for userContent.css <pre><nowiki>@-moz-document url-prefix("about:preferences") { input, textarea { background-color: #ffa !important; } }</nowiki></pre>
Pomohlo vám to?
Citácia

Autor otázky

Apparently, to explain that you draw other elements that can be drawn without problems, and those that should be painted, colors are ignored or affect the sites, I can not. In any case, thank you for your attention...

Apparently, to explain that you draw other elements that can be drawn without problems, and those that should be painted, colors are ignored or affect the sites, I can not. In any case, thank you for your attention...
Pomohlo vám to?
Citácia
jscher2000
  • Top 10 Contributor
8574 riešení 70112 odpovedí

What are the complete contents of your userContent.css file so I can test them? To prevent this site from mangling your style rules, please put <pre> before and </pre> after them in your reply. Or you can use a site like Pastebin to share them.

What are the complete contents of your userContent.css file so I can test them? To prevent this site from mangling your style rules, please put &lt;pre> before and &lt;/pre> after them in your reply. Or you can use a site like Pastebin to share them.
Pomohlo vám to?
Citácia

Autor otázky

I created an empty userContent.css. There is nothing besides your code.

I created an empty userContent.css. There is nothing besides your code.
Pomohlo vám to?
Citácia
jscher2000
  • Top 10 Contributor
8574 riešení 70112 odpovedí

Hmm, should work. I added color:white to the section specific to the Options/Preferences page. Attached screenshot shows the results.

Hmm, should work. I added color:white to the section specific to the Options/Preferences page. Attached screenshot shows the results.
Pomohlo vám to?
Citácia

Autor otázky

I am interested in other elements. This code does not color the necessary ones. Go to the container menu or network settings. See how much white? THESE ELEMENTS NEED ME! THESE! The last picture was taken with a dark theme to show how many there are.

I am interested in other elements. This code does not color the necessary ones. Go to the container menu or network settings. See how much white? THESE ELEMENTS NEED ME! THESE! The last picture was taken with a dark theme to show how many there are.
Pomohlo vám to?
Citácia
jscher2000
  • Top 10 Contributor
8574 riešení 70112 odpovedí

I don't know what that first screenshot is. Is it a drop-down panel or popup window generated by an extension??

In the third screenshot, that connection settings dialog is loaded in a <browser> element, which seems to be like an iframe. So our rule doesn't style that.

When I use Firefox's Page Inspector, I see the top level element in the frame is a <dialog> with id="ConnectionsDialog" so with that in mind, try this:

dialog#ConnectionsDialog input,
dialog#ConnectionsDialog textarea {
  color: white !important;
  background-color: red !important;
}
I don't know what that first screenshot is. Is it a drop-down panel or popup window generated by an extension?? In the third screenshot, that connection settings dialog is loaded in a <browser> element, which seems to be like an iframe. So our rule doesn't style that. When I use [https://developer.mozilla.org/docs/Tools/Page_Inspector Firefox's Page Inspector], I see the top level element in the frame is a <dialog> with id="ConnectionsDialog" so with that in mind, try this: <pre>dialog#ConnectionsDialog input, dialog#ConnectionsDialog textarea { color: white !important; background-color: red !important; } </pre>
Pomohlo vám to?
Citácia
jscher2000
  • Top 10 Contributor
8574 riešení 70112 odpovedí

Vybrané riešenie

Okay, found the other page by pasting

about:preferences#containers

to the address bar and pressing Enter to load it. Similar idea, except this time it's a <window> instead of a <dialog>:

window#ContainersDialog input, 
window#ContainersDialog textarea {
  color: white !important;
  background-color: red !important;
}
Okay, found the other page by pasting '''about:preferences#containers''' to the address bar and pressing Enter to load it. Similar idea, except this time it's a <window> instead of a <dialog>: <pre>window#ContainersDialog input, window#ContainersDialog textarea { color: white !important; background-color: red !important; } </pre>

Upravil(a) jscher2000 dňa

Pomohlo vám to?
Citácia

Autor otázky

It looks like this code really works. Thank you for help!

It looks like this code really works. Thank you for help!
Pomohlo vám to?
Citácia
cor-el
  • Top 10 Contributor
  • Moderator
17339 riešení 156760 odpovedí

Or with the @-moz-document selector:

@-moz-document 
 url-prefix("about:preferences"),
 url("chrome://browser/content/preferences/containers.xul"){
  input,textarea {
    color: white !important;
    background-color: red !important;
 }
}
Or with the @-moz-document selector: <pre><nowiki>@-moz-document url-prefix("about:preferences"), url("chrome://browser/content/preferences/containers.xul"){ input,textarea { color: white !important; background-color: red !important; } }</nowiki></pre>

Upravil(a) cor-el dňa

Pomohlo vám to?
Citácia
Položiť otázku

Ak chcete pridať odpoveď, musíte sa prihlásiť k svojmu účtu. Ak účet doteraz nemáte, položte novú otázku.