Why is Firefox "about:preferences" not affected by CSS while "about:addons" is?

I modify "about:addons" in the same Stylish sheet where I modify other Firefox elements, I just modify, say, ".main-content" and everything is fine. But .main-content of "about:preferences" is not affected. I then go to another Stylish sheet, where I modify web pages, and put
@-moz-document url(about:preferences)
and still nothing happens. I tried to use "about:preferences#general" too, but no way. What do I do wrong?


  • CTR affects the page. You will need the secret code word added.

    /* AGENT_SHEET */
    @-moz-document url(about:preferences),url-prefix(about:preferences){
  • Thank you, Calico, you saved me again! Who could have thought that CTR tentacles spread so far and wide and at the same time so selectively!
    I also have a similar problem with Back, Forward and Download buttons: whatever way I try to modify them, they are not affected (CTR again?) except by opacity. I want to do two things with them: 1) get rid of the 3D glossy look they get when hovered over and 2) make the arrow images white. Can you help me with that?
  • I apologize, as I probably can't be much help with image icons. CTR does target the buttons, but mine are white because of the theme I use, and don't have a 3D glossy look. Not sure what that is tbh, it sounds like a Classic Toolbar Buttons extension look. You may have some luck playing with the following code, but hopefully other members will have a better answer.

    #ctraddon_back-button >  .toolbarbutton-icon,
    #ctraddon_forward-button >  .toolbarbutton-icon{
      filter: invert(100%)!important;}
  • After some thinking I decided to stop using CTR, after all I don't use most of its settings. I already managed (with CTR disabled) to decrease the tab and nav-bar height, made tabs square (simply by setting .tab-background to zero opacity). But again there is a line I can't get rid of. It's between the tab bar and the nav bar (not a border, I tried *{boder:none}, even with /* AGENT_SHEET */). Can you help?
    336 x 104 - 4K
  • Waterfox
    Try this:

    { border: none !important; }
  • No, it doesn't work. But I already tried *{boder:none}, is "after" not covered by * ?
  • edited July 2017 Waterfox
    Yeah, it won't work in your case. What theme are you using? Try default Fx theme to see my code in work (and don't forget !important).
    In your case, check the theme file for that border/box-shadow.
  • Yes, I use important and default Firefox theme. Classic Theme Restorer is disabled. Byt why should it work where the asterisk doesn't ?
  • I disabled everything in Stylish except for the single line:
    (otherwise, this line will be impossible to discern) and your code.
    And it's still there. Default theme, with Firefox taking on Windows theme (blue color). That's how it looks now.
    295 x 72 - 5K
  • Waterfox
    Sorry, i can't help you. My toolbox looks different and i don't see your issue (i use Waterfox 53, clean profile).
    Good Luck!
  • Makondo might have had the answer above. Try this out:

    box-shadow:none !important;

    Also, just realized CTR has an option to reverse icon colors.

  • edited July 2017 Waterfox
    Try more specificity like:
    #main-window #nav-bar {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  • You guys are cool! "Box-shadow:none" made the line disappear while leaving a dark blue line in its place. "Border:none" removed the dark blue line. Thanks a lot!

    As to icons, I now see I need to replace the images in order to change the color (I earlier thought that changing something like the buttons' background-color could do it).
  • edited July 2017 Waterfox
    You can try using filters. hue-rotate(SOMEdeg) might do it, will need to play with it to get what you might like. Using brightness in addition often helps and might try invert as well.

  • Interesting things, I'll look into them, thanks, makondo.
Sign In or Register to comment.