Custom Buttons²

[ithinc]

Code: Select all

    this.setAttribute("style", "-moz-appearance: none; background-color: green; border-width: 1px; border-color: red;");

[squeaky]

Then you might like to have the pair...

Code: Select all

// MANY thanks to nicholas for help with this attribute
this.setAttribute("style", "padding-bottom: 0px !important; padding-left: 2px !important; padding-right: 2px !important; padding-top: 0px !important;");

Code: Select all

// MANY thanks to ithinc for these attributes       
this.setAttribute("style", "-moz-appearance: none; background-color: #FF0000; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; ");

This set works for my button.

You need to "balance" the borders (esp top and bottom) between the padding and the background when toggling from a normal moz appearance to display = none.

If you don't, when you apply the toggle the buttons to the right of "this" button will shift right a couple of pixels and the toolbars below "this" toolbar will shift down a couple as well.


I don't know if this balancing act as written crosses all borders and setups, but at least it lets people know what is happening and what they need to play with to get a static position on toggling.

And a futher note:- If you check a button even when display = none the background color will have the opacity inherited from checked and not the opacity that you may have set. So even if you have opacity set to 0.99 it's likely to change to 0.65 if you check the button.


HTH