Firefox – How to change the colour of the FF4 menu button

cssfirefox

I am looking for a way to change the background colour of the menu button on the FF4 beta and to place it on the tab bar simultaneously.

I have achieved the latter effect using various Stylish user styles and chrome.css modifications, but no matter what I do, the menu button is always that hideous shade of orange.

Best Answer

Put this in a new Stylish style, modifying the colors as you wish:

#appmenu-button{
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(78,147,229,1), rgba(0,78,213,1)) !important;
}

#appmenu-button:-moz-window-inactive{
background: rgba(0,0,0,0) !important;
}

It worked for me when I tested it just now. The current colors give you a blue Firefox app menu. If you want to have the main color stay around (instead of "disappearing") when the Firefox window is inactive, remove the #appmenu-button:-moz-window-inactive{...} section.

(Note: I used the link in the answer provided by CGA to figure out how to do the first two sections, and added the third section based on my own search.)