Im trying to customize an add-in toolbar menu icon using user.chrome. I was able to do it in a very complicated way. Wondering if there is a cleaner way to do this.

The button is a drop down list and what I am trying to do is remove the drop-down marker from this icon ONLY and not all markers, but keep the functionality of the marker. I found the button and marker in DOM inspector but was not initially able to turn off just the drop marker. I eventually changed the icon from toolbarbutton type "menu" to "menu-button" which separated the button and the marker. The problem was if I now hid the marker the button has no events associated with it (they are in the hidden marker).

I came up with this mess below and was wondering if there is a better way to do it.

For a specific dropmarker, then I'd use the specific button ID prefix and -moz-appearance: none !important! on its dropmarker to stop the OS dropmarker showing and then define the list-style-image with none or anything that its not going to be able to find.

JackPollack wrote:What I want is the "main" button icon to have the functionality of the drop marker, but dont want the drop marker visible (ie button type menu with drop down list but no drop marker shown)

Yeah, simple enough. Give the dropmarker a size big enough to cover the toolbarbutton and then margin it over left to cover the button. When the user hits the button, the dropmarker options will just appear.

Generically, this is slightly less easy to fix if the browser has Icons & Text mode, as they lay out as - Button>Text>Dropmarker and you have no way of knowing the width of text that will be used generically. Simple for a single button though using toolbar[mode="full"] etc. though.

Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

I spent all day playing around trying to get the "main" icon perfectly centered in the button. There are a few more (invisible border) pixels on the right side. I think it may be the place the drop marker was removed from.

I tried different combination of padding (right, left) but not sure if I should be adjusting the "main" icon or the invisible drop marker. Also tried playing with margin-start and max, min width.

JackPollack wrote:...I tried different combination of padding (right, left) but not sure if I should be adjusting the "main" icon or the invisible drop marker. Also tried playing with margin-start and max, min width.

Bet it will take you 5 min!Thanks again

In theming generally, forget padding exists. It causes more problems than it solves and is the command of last resort.

Leave the main icon completely alone or you'll risk throwing out relative positions to other buttons. Just like images, by default, this stuff draws from the top left, so first start with your -moz-margin-start on the dropmarker to line up the left side of the active area of the button - less 1px. Then increase the min-width of the dropmarker until it's 1px less than the right side of active area. To do a proper job, do similar on min-height of dropmarker. Be sure to leave that 1px less all round or you'll start distorting the size of the button itself.

Not needed here, but -moz-margin-end plays its part if you end up with a massive active area on the stuff you're moving around and it will give you back the original active (like when Mozilla first put the bookmark star inside the urlbar and I moved it outside and to the right of it, as it had been)

I'm explaining this one in detail as the whole technique is not well-known, even with other theme writers. For other .css stuff, you may pick up the odd idea or two from here - viewtopic.php?p=13219133#p13219133

Hope that helps.

Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)