Change style for GXT button component

[bonkers]

Hi,
Can someone help me with changing button styles? I would like to get rid of the metallic gray 3D look of button component and replace it with a white non-metallic background (i have my own custom_btn.gif as well). What style do I need to define in my custom css file? I tried something like
.button
{
background-image:url(../../<mydir>/images/default/button/<custom>_btn.gif);
font:normal 11px tahoma, verdana, helvetica;
}
but it seems to mess up the button L&F. I use setStyleName to use my style. setStylePrimaryName and addStyleName doesn't seem to help.
Thanks!

[TheBuzzer]

setstylename can work. However best way to figure it out is to use firefox with firebug.

[bogusky]

Hi,
Can someone help me with changing button styles? I would like to get rid of the metallic gray 3D look of button component and replace it with a white non-metallic background (i have my own custom_btn.gif as well). What style do I need to define in my custom css file? I tried something like
.button
{
background-image:url(../../<mydir>/images/default/button/<custom>_btn.gif);
font:normal 11px tahoma, verdana, helvetica;
}
but it seems to mess up the button L&F. I use setStyleName to use my style. setStylePrimaryName and addStyleName doesn't seem to help.
Thanks!

Firebug is my best friend.
java

        button.addStyleName("btn_in_detail");

css

.btn_in_detail .x-btn-tl,.btn_in_detail .x-btn-tr,.btn_in_detail .x-btn-tc,
.btn_in_detail .x-btn-ml,.btn_in_detail .x-btn-mr,.btn_in_detail .x-btn-mc,
.btn_in_detail .x-btn-bl,.btn_in_detail .x-btn-br,.btn_in_detail .x-btn-bc
    {
    background-image: url(resources/sprites/btn_in_detail.gif) !important;
}

[maqjav]

Hello.

That method works! but how do we change the on over and on click states?.
I tried:

.btn_in_detail .x-btn-over .x-btn-mc {
 -- Other background position
}

and nothing... it seems it doesn't overwrite that style.

Some ideas?

[bogusky]

Hello.

That method works! but how do we change the on over and on click states?.
I tried:

.btn_in_detail .x-btn-over .x-btn-mc {
 -- Other background position
}

and nothing... it seems it doesn't overwrite that style.

Some ideas?

1. Use firebug please
2. your image sprite is probably wrong. standard GXT button sprite has bg for 3 state (normal, mouse-over, click)

[ekaitza]

You can use pressedCls

http://dev.sencha.com/deploy/touch/d...ass=Ext.Button

[cut3as]

This is also my problem and I wanted also to overcome this situation. Thank you for all who replied and shared the code.

contemporary furniture | modern lounge chairs

[medbfrankie]

Hello i am a new beginner of GXT program, i need to separate three button style:

1. no frame , only word and icon.
2. icon + button
3. only button

I tired this .btn_in_detail .x-btn-tl,.btn_in_detail .x-btn-tr,.btn_in_detail .x-btn-tc,
.btn_in_detail .x-btn-ml,.btn_in_detail .x-btn-mr,.btn_in_detail .x-btn-mc,.btn_in_detail .x-btn-bl,.btn_in_detail .x-btn-br,.btn_in_detail .x-btn-bc { background-image: url(resources/sprites/btn_in_detail.gif) !important;}and delete those script background-image: url(resources/sprites/btn_in_detail.gif) !important;
}

but others button become fail, any way that i can separate those three button style without any effect each other?

thanks!!

[andrewparker]

My problem is also related with this problem. can anybody solve it?