Firefox about:addons menupopup

I am trying to change background color in Firefox's Addons page, the menu with Check for updates etc.
I got this css selector #utils-menu , but I am not able to change background color for that menupopup.
How can I do this?

Comments

  • #utils-menu .popup-internal-box {background-color: [ ? ]; margin: -2px}
  • Thanks João.
    But still gives me default theme color. :(
  • In the userContent.css file, use this code.
    In my test it worked correctly.
    @-moz-document url("about:addons") { #utils-menu .popup-internal-box {background-color: [your color]; margin: -2px} }
  • I added this inot userContent.css:
    @-moz-document url("about:addons") {
    #utils-menu .popup-internal-box { background-color: #E7E8EB ; margin: -2px }
    }
    But still no good.
  • I don't understand, I just tested again on Firefox 68 and it worked.
  • edited July 26 [?]
    Not sure why. This is what I have before and after this change. Color of popup menu doesn't change.
    1
  • Can always try: background-color: #E7E8EB!important;

  • This image you posted shows a slightly different menu than mine, both background color and separators. I tested on Windows 10. What edition of Windows do you use?
  • edited July 26 [?]
    João. said:

    This image you posted shows a slightly different menu than mine, both background color and separators. I tested on Windows 10. What edition of Windows do you use?

    Vlada U uses windows nt 6.1 (windows 7) firefox 68.0. you can hover on [?] to see useragent
  • Yes it's true. Maybe that's why the code didn't work in his browser.
  • Correct guys, I am on Windows 7 x64 SP1.
  • edited July 27 [?]

    You need use userContent.css

  • Something else to try:

    @-moz-document url("about:addons") {
    menupopup  .popup-internal-box{  
        background-color: #a6d5dd !important;
        }
    }
    
  • Yes, I was trying with userContent.css.
    Thanks calico, but still doesn't work.
    Really strange how this works for you but not for me.
  • We may need some devtools screenshots, but try adding -moz-appearance: none; first, like so:

     @-moz-document url("about:addons") {
    menupopup{
       -moz-appearance: none;
        background-color: #a6d5dd !important;
        }
    }
    
  • Thanks Calico.
    Still no good.
    Is this what you need (screenshot below) ?
    1

    Let me know if you need something else.
  • Does the right side of the inspector match this screenshot?
    image
    If so, edit menupopup, panel and change the background and the color. Then change -moz-appearance to none. Does your menupopup change?
    image

    Also, is other style code working as expected in your userContent.css file? Observationally, the popup background in your screenshot seems darker than normal defaults.

    If anyone reading has any suggestions please feel free to chime in as well, this one has me baffled.

  • I also think the background color of the image is darker than normal defaults.
    Unfortunately, I don't have a Windows 7 computer to test, but I think your suggestions might work.
    And you may not need "margin: -2px", which I used on Windows 10.
    By the way, I couldn't change the color of separators on Windows 10, except using the "filter" property.
  • Hi calico.
    This is screenshot of what I have.
    1

    I have some code but in userChrome.css, all I have added there, worked fine.

    As I am into css, would you send code for menupopup and panel so I can try?

    Thanks.
  • edited July 29 [?]
    Vlada U said:

    Hi calico.
    This is screenshot of what I have.
    1

    I have some code but in userChrome.css, all I have added there, worked fine.

    As I am into css, would you send code for menupopup and panel so I can try?

    Thanks.

    This popup looks like one from windows, not firefox. I think you cant do this on windows 7 (not sure)
    edit: Ok, looked at screenshots + checked that page myself, now even more not sure because popup looks the same.
    edit2: for me popup changed only when i set -moz-appearance to none so you can try something like
    menupopup[style], menupopup {
    -moz-appearance: none !important;
    background: red !important
    }
  • Ah, still doesn't work. :(
  • edited July 29 [?]
    Vlada U said:

    Ah, still doesn't work. :(

    I just tested, put it into C:\Users\{USER}\AppData\Roaming\Mozilla\Firefox\Profiles\{PROFILE}\chrome\userContent.css restarted ff and its red now
    Screenshot:
    Screenshot
    Screenshot
  • Ah, still doesn't work. :(

    A code syntax error is the only other thing I can think of. Can we see your entire userContent.css style code? If it's short you can post it here, if long use Pastebin or another similar site to link it.

  • edited July 30 [?]
    Works now. :D
    Ok, so this was the cause of issue (not sure why). I had some code left from my pre-ff57 installation:
    /* Flash Block */
    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document domain("youtube.com"){
    #theater-background { display:none !important;}
    }
    So if I put something after this, it doesn't work.
    I added this (suggestion #1 from Joao) in front of old code:
    #utils-menu .popup-internal-box {
    background-color: #E7E8EB !important;
    }

    And now it works.

    I guess all those suggestions work, just needed to put it before this old code.
    I commented old code.

    Thanks guys, you are awesome. :)
  • edited July 30 [?]

    Just delete the namespace line @namespace url(http://www.w3.org/1999/xhtml);and both styles should work.

    Teamwork gets the job done. :)

    For reference:
    https://stackoverflow.com/questions/44807995/what-namespace-should-be-defined-in-firefoxs-usercontent-css

  • ^:)^
Sign In or Register to comment.