Help with the FF Compact Menu icon!

[yamimi]

Hello ppl!

I tried to replace the Compact Menu icon (in Firefox), as i read in some threads around here.

However I had a problem, and don't realize how can I fix it. I think that's because of size of the original icon (blue.png).

See in attachment how it looks like when I click, or on mouse hover.

Should I change something in compact.css? I think is something here:

#menu-button {

min-width: 0;

min-height: 0;

width: auto;

height: auto;

padding: 2px 4px;

list-style-image: url("chrome://compact/skin/apple.png");

-moz-image-region: rect(0px, 16x, 16px, 0px);

}

#menu-button:hover {

-moz-image-region: rect(16px, 16px, 32px, 0px);

}

#menu-button[open=true] {

-moz-image-region: rect(32px, 16px, 48px, 0px);

}

#menu-button .toolbarbutton-icon {

margin: 0;

}

Btw, all changes I did in "size" values mess up it even more! :/

Can someone help me?

Thank you in advance (and sorry for the terrible english)

[yamimi]

Now I realized that I post this thread under the wrong forum.

Should it be moved to "Application Skins" forum?

[tmr250z]

Are you using Compact Menu 2? If so, replacing the code in compact.css file with the edited code below works. I've just tried it. Don't forget to rename your icon to "blue.png" because that's the default image name in compact menu 2.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#menu-button {
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  padding: 2px 3px;
  list-style-image: url("chrome://compact/skin/blue.png");
  -moz-image-region: rect(0px, 33px, 16px, 0px);
}

#menu-button:hover {
  -moz-image-region: rect(16px, 33px, 32px, 0px);
}

#menu-button[open="true"] {
  -moz-image-region: rect(32px, 33px, 48px, 0px);
}

#menu-button .toolbarbutton-icon {
  margin: 0;
}

toolbar #menu-button {
  -moz-box-orient: horizontal;
}

toolbar:not([mode="text"]) #menu-button .toolbarbutton-text,
toolbar:not([mode="text"]) #menu-button .toolbarbutton-menu-dropmarker {
  display: none;
}

#compact-menubar,
#compact-bk-menubar {
  -moz-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
}

***Edit***

Instead of replacing the icon and editing the compact.css file, you could just add the following code to your userChrome.css file or add it as an userstyle using the Stylish extension. That way you don't have to worry about editing the Compact Menu 2 files over and over again when you update the extension.

/*Change Compact Menu 2 icon (apple)*/
#menu-button {
  list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAxCAYAAABUMsD0AAAACXBIWXMAAC4jAAAuIwF4p
T92AAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4
AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89%2BbN%2FrXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz%2FSMBAPh%2BPDwrIsAHvgABeNMLCADATZvAMByH%2Fw%2FqQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf%2BbTAICd%2BJl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADB
RiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAu
wnmZGTKBNA%2Fg88wAAKCRFRHgg%2FP9eM4Ors7ONo62Dl8t6r8G%2FyJiYuP%2B5c%2BrcEAAAOF0ftH%2BLC%2BzGoA7BoBt%2FqIl7gRoXgugdfeLZrIPQLUAoOnaV%2FNw%2BH48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl%2FAV%2F1s%2BX48%2FPf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H%2FLcL%2F%2Fwd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s%2BwM%2B3zUAsGo%2BAXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93%2F%2B8%2F%2FUegJQCAZkmScQAAXkQkLlTKsz%2FHCAAARKCBKrBBG%2FTBGCzABhzBBdzBC%2FxgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD%2FphCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5
h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8%2BQ8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8%2BxdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR%2BcQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI%2BksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG%2BQh8lsKnWJAcaT4U%2BIoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdp
r%2Bh0uhHdlR5Ol9BX0svpR%2BiX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK%2BYTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI%2BpXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q%2FpH5Z%2FYkGWcNMw09DpFGgsV%2FjvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY%2FR27iz2qqaE5QzNKM1ezUvOUZj8H45hx%2BJx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCd
HZ4%2FOBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up%2B6Ynr5egJ5Mb6feeb3n%2Bhx9L%2F1U%2FW36p%2FVHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423Gbcaj
JgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm%2Beb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dx
tsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw%2B6TvZN9un2N%2FT0HDYfZDqsdWh1%2Bc7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc%2BLpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26%2FuNu5p7ofcn8w0nymeWTNz0MPIQ%2BBR5dE%2FC5%2BVMGvfrH5PQ0%2BBZ7XnIy9jL5FXrdewt6V3qvdh7xc%2B9j5yn%2BM%2B4zw33jLeWV%2FMN8C3yLfLT8Nvnl%2BF30N%2FI%2F9k%2F3r%2F0QCngCUBZwOJgUGBWwL7%2BHp8Ib%2BOPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP
45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo%2Bqi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt%2F87fOH4p3iC%2BN7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi%2FRNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohT
ZO2Z%2Bpn5mZ2y6xlhbL%2BxW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a%2FzYnKOZarnivN7cyzytuQN5zvn%2F%2FtEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBt
QFr6wtVCuWFfevc1%2B1dT1gvWd%2B1YfqGnRs%2BFYmKrhTbF5cVf9go3HjlG4dvyr%2BZ3JS0qavEuWTPZtJm6ebeLZ5bDpaql%2BaXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO%2FPLi8ZafJzs07P1SkVPRU%2BlQ27tLdtWHX%2BG7R7ht7vPY07NXbW7z3%2FT7JvttVAVVN1WbVZftJ%2B7P3P66Jqun4lvttXa1ObXHtxwPSA%2F0HIw6217nU1R3SPVRSj9Yr60cOxx%2B%2B%2Fp3vdy0NNg1VjZzG4iNwRHnk6fcJ3%2FceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w%2B0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb%2B%2B6EHTh0kX%2Fi%2Bc7vDvOXPK4dPKy2%2BUTV7hXmq86X23qdOo8%2FpPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb%2F1tWeOT3dvfN6b%2FfF9%2FXfFt1%2Bcif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v%2B3Njv3H9qwHeg89HcR%2FcGhYPP%2FpH1jw9DBY%2BZj8uGDYbrnjg%2BOTniP3L96fynQ89kzyaeF%2F6i%2FsuuFxYvfvjV69fO0ZjRoZfyl5O%2FbXyl%2FerA6xmv28bCxh6%2ByXgzMV70VvvtwXfcdx3vo98PT%2BR8IH8o%2F2j5sfVT0Kf7kxmTk%2F8EA5jz%2FGMzLdsAAAAgY0hSTQAAeiUAAICDAAD5%2FwAAgOkAAHUwAADqYAAAOpgAABdvkl%2FFRgAABz9JREFUeNrsWG9MU1kW%2F93%2BgxYoIGBhhVIGBqmljEMQg82uXWVWzYYEkUGDGrPZRHcyifgHVmNU1GQ32RiySjZqNprdr0NCoE2MHz
YCOosylRVUGHBGaEGgVVuYFstD2313v9y6UN4rAu7OftiTvOTde9699%2FfOPed3zr2EUoofWyT4HxDZYh8QQoS61QDiAIwvdUEhyy%2FHEskABvft25f%2BY2zHGmaBzOPHj%2F958%2BbNatZeuVBKIz5M%2FiqRSFyEEGdSUtI5nU53K9QGkL3S9WTvMa5cLpf%2FUqVSqQBgZmamZmZmBnFxcYrq6uq%2BK1euxAr4TT2AtQJz9QP43ZIdU6vVFnu9XlWorVAoFKF3s9n8EsBw%2BJi%2Bvr7VdXV1Pw0Gg%2B%2FQyWQy2tDQ8HJZPpGYmPhWTHf37t17hJDp8H6DwfD7srKyibl9FRUVY3q9%2Fg%2FLBfFKTHf79u3PmMOGh%2FX4%2Fv37GzUazRsASE1Nnd2zZ88l5kNLB7Fly5Y2MZ3T6dxoNpvLhXSxsbFfHTp06AEAHDx40BYbG9u8oug
4cuTIH%2BPj4%2F3hz9atW79zOBy1EeZe19XV1U4pXRdpPbJY7iCEgFKqaWpquu5yuaJKS0vddrtd%2BejRo4Tq6uoxnU5XSwh5EQFIPiGkLxJjvhcINlgDIBfAdwAUAHQAHISQ5yulbfL%2FLBqyhEBfKoA0lqjiAcg%2FwDoBAF4AbgBOAC4xEDFsz3Peh0lXIEEAz5hv%2BQFAOgdAAQOw6Bbl5OQoCwoK1A6Hg1umCyQDiAIwBSAQWjCXefuiUlhYGNfb29ugUqniVmgRHVsXUuY
Dny5mAbPZvEomk8FkMq1pbW1VOJ3O76OiogKTk5PBFQBJADBJGIC8SF8%2BefLkN1lZWQUAcOvWrQ6tVrvGYDB8DAB79%2B49b7FYXqwAyKCM7Y%2BoXLp0qSg%2FP%2F9noXZlZeW7XNHY2NhjsVj84WMmJibq09LSFtQTY2Nj%2FRkZGeH1RLKEhaGoaDSaXDFdT09PD4DX4f2VlZW9gUCAnxejgQC%2Fa9euxwLTxC8aCW63OxLAWaH%2Be%2Ffutd24cWNgbt%2FVq1f7bTZbu1i4eCOBcLlcPjFdRUXFBrPZvEpANV1bW2t5%2Fvz5awAYHR31nTp1yiJkNQBeCWMxUWlubn46OTkp%2BMe5ubnrduzYoRfS%2Bf3%2Bb48ePfo1ABw7duzvfr9%2FUMzYIbLKEAtRt9vtn56eXl1SUqJRKpXzmLSjo2Ps9OnTX%2Ft8vimhhDkwMDDR19cX09zcbA2xowB79hNKKQghi4XpTyoqKn6RnJwc197ePpWZmRldUFAQ19LS0m23
27tYbhCTFABiJeIgpbSHhNG2bpGTl4JRbTQ7Br4A8GaZ%2FOAA8BiAn4QKDULIfz2BUUr9hJB%2FZ9FQcUMI%2BY%2Bnckqpa27VJhM4fRcD2AAgk3G79AOA%2BCeAHwCMAHhACLGK1RO5AHYTQvIopV7mzW%2BZ%2BT7EFYQCQAwhJJ5SOgjgK1ZTvAPxsVKp%2FDXHcWrmybMMPWXPPElPT49OTU2N6u7u9i6hgiPMqtEAUpRKpY%2FjuBsAvpcAgFqt%2FpzjOCWACcZqAQaCnwOEAqB5eXmq%2Fv7%2B38bExKjCdREens0XYPNPcBynVKvVn4fqiVKe5zfwPP%2BSWUCw%2FC4qKoqXSqWkuLhYc%2FPmTfn4%2BPiIXC4P%2Bny%2BpW4XZYDe8jyfxvP8W5KdnX1qaGgoGsA0Q7xAurq69uj1%2BrUA0NLS8k1WVpZm%2Ffr1OgDYuXPnn9ra2jzLLPPisrOzZ2XBYDARwKSYBc6dO5e%2FcePGolD7wIEDpaH3hoaGgba2tgV1pt1u%2F1Kn02WF9w8NDT3Lycm5NsciXDAYXCXxeDx0jhMukIyMDFEW7e7uHgAwE96%2Fe%2FfuQaF6oqqq6mn4tng8HiqRSqVBMQAA4PGIWzopKUmQsm02W9e1a9fmXZ40NjY%2Be%2Fjw4Tfh%2FiGVSoMSg8GgiLRxTqfztZiuqqoqv6ioSKgy8584ceL2yMjIDAA4HI7XZ86caROymsFgUEiMRiMvchI
DAFgsFrvH4xH8Y6PRmLN9%2B%2FaPhHQcxw0dPnz4HwBQU1PzkOO4YSH%2BMBqNvESv148nJCTIxYAMDw9PnDx58rEQkM7OTvf169fFiiLearXeKS8vf2C1Wu8KRB5JSEiQ6%2FX6cUIpXVdfX%2F%2FFhQsXRsVCFMDqsrIyU0pKSsydO3e8Wq02ymg0xrS2tvaPjo72LkLtq1j0LQjRs2fPas%2BfP3%2BVsD%2F6VVNT0yeXL18ei%2BCkCYz%2FfaE8wLJiYDkH8ZqamvSqqqpHJpPpLzIA2LRpkzU6OjpWo9GsvXjx4tjU1JRQxPww532WgVny4omJib
K6urr0bdu2PS0sLLTOy6KU0iQAP%2B%2Fo6Pjs%2Fv37bzo7O702m83%2F6tWrFWfRlJQUWXFxcYzJZIovKSmJMpvNfwPQTgjxCN5PsEsuA4CPWHGj%2FACpnGP3EsMA%2Bgkh385V%2FmsAgP4gS3iRBYkAAAAASUVORK5CYII%3D) !important;
  -moz-image-region: rect(0px, 33px, 16px, 0px) !important;
}

#menu-button:hover {
  -moz-image-region: rect(16px, 33px, 32px, 0px) !important;
}

#menu-button[open="true"] {
  -moz-image-region: rect(32px, 33px, 48px, 0px) !important;
}

[yamimi]

Change the compact.css file didn't work, however it's pretty easy when using stylish! It's working fine!

Thank you very much for helping!