PDA

View Full Version : How to apply css for ext-gwt button



rameshr
9 Nov 2009, 11:00 PM
Hi all, im trying to apply css for ext-gwt button. its working fine for height and width but background-color and colors are not working why?

here is my sample code(java file)

final Button bb = new Button("New");
bb.setStyleName("test");
RootPanel.get().add(bb);

my css file

.test
{
color: #fff;
background-color:green;
height:40px;
width:20px;
color:green;
}



Thanks,
R.Ramesh.

Arno.Nyhm
10 Nov 2009, 8:47 AM
more hints:
http://www.extjs.com/forum/showthread.php?t=80622&highlight=Button+background

tbadger
10 Nov 2009, 2:12 PM
gxt uses a sprite (gif file) to render the buttons. when an html element has both a background color and a background image set, the image is rendered over the background color. Generally you would set your background color appropriately for the element when the image does not render.

Since the button has a background image set, the background color you are setting is over-layed by the button images, so the color you are setting will never display unless the image is missing.

The only way around this is to create a sprite specifically for the button colors you want and set the background image accordingly. For example, I have created a new button background image called btn-green.gif, using the original btn.gif from GXT as a template.

Then to use the button, I've done the following in a style, making sure that all of the appropriate elements of the button have the new image set. Note that a button has nine elements that must be set:

#bs-selectaduser-search-button-id .x-btn-tl,
#bs-selectaduser-search-button-id .x-btn-tr,
#bs-selectaduser-search-button-id .x-btn-tc,
#bs-selectaduser-search-button-id .x-btn-ml,
#bs-selectaduser-search-button-id .x-btn-mr,
#bs-selectaduser-search-button-id .x-btn-mc,
#bs-selectaduser-search-button-id .x-btn-bl,
#bs-selectaduser-search-button-id .x-btn-br,
#bs-selectaduser-search-button-id .x-btn-bc {
background-image:url(icons/btn-green.gif) !important;
}

The .x-btn- represents the nine quadrants of the button. tl=top left, tr=top right, mr=middle right, bc=bottom center, and so on.

To easily copy the btn.gif file to use as a template, get the path from the css using firebug in firefox and then paste it into your browser so that you can then copy the image to a folder on your computer.

rameshr
11 Nov 2009, 12:46 AM
Thanks for replays

R.Ramesh

Arno.Nyhm
11 Nov 2009, 2:17 AM
on other example with button styling:

howto display a button as a "normal" link:
http://www.extjs.com/forum/showthread.php?p=378038#post378038