How can i change the color and spacing of the right click context menu?
I'm not sure if either of these are possible because i've done a lot of searching and found nothing, but is there some kind of genius on here who knows how to make the right click context menus black with white text? Is this maybe possible using the userChrome.css file? I don't want to use a theme because i just want this one thing changed.
I'd also like to increase the spacing between each item on the context menu. See attached image to see exactly what i mean...
I'd be happy if i can do at least one of these things. Thanks.
Chosen solution
After asking on Reddit (r/FirefoxCSS) i found this Windows 10 context menus theme and it's pretty much exactly what i want. Might just do some very small changes to it.
Thanks for the help everyone.
Read this answer in context 👍 0All Replies (9)
You might get a recipe for that here, but I want to mention a site with Firefox enthusiasts who love solving difficult userChrome.css puzzles:
Thanks, i asked my question on there and i'll post the answer here if i get one...
Does this code in userChrome.css work for you?
Add code to the userChrome.css file below the default @namespace line.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
#contentAreaContextMenu .arrowscrollbox-scrollbox {color: #fff !important; background-color: #000 !important}
It is not that difficult to create userChrome.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.
You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted.
In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".
You need to close and restart Firefox when you create or modify the userChrome.css file.
cor-el, that somewhat works! Thanks.
Just two problems: When i move the mouse cursor over something in the context menu, the text becomes black, so it's hard to see. Any way to fix that so the text remains white?
And it does not change the color for the right click menu for tabs, the URL bar, or the UI. None of these are black.
You can look at this theme to get more selectors.
This code is more generic to scroll boxes. I get a blue background color and white text color on Linux when I hover an element, so I can't check what specific [selected] code you would need on Windows.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
arrowscrollbox:not(.tabbrowser-arrowscrollbox) .arrowscrollbox-scrollbox {color: #fff !important; background-color: #000 !important;}
cor-el, how can i post code on here like you're doing in your comments? Because i've solved some of the problems.
Chosen Solution
After asking on Reddit (r/FirefoxCSS) i found this Windows 10 context menus theme and it's pretty much exactly what i want. Might just do some very small changes to it.
Thanks for the help everyone.
Hi Photek, if you decide to share the final result here, use <pre> before and </pre> after your code block.