How to set background color for button?

[Lars Ruoff]

Hello,

how to change the background color of a ToggleButton?
I want to have ToggleButtons in various colours displayed on my page.
The buttons are actually for choosing a color in the application.

regards,
Lars

[Piro]

Use CSS to style buttons.

http://code.google.com/intl/sk-SK/webtoolkit/doc/latest/DevGuideUiCss.html

[Lars Ruoff]

Hello,
yes, i know, but the problem is that:
ToggleButton has its predefined style gwt-Togglebutton or similar.
That style defines a background-image for the button.
In order to set a background color i need to get rid of the background
image.
So i defined a style
.color-icon {
height: 16px;
width: 23px;
background-image: none;
background-color: #777777;
}
and added it with
button.addStyleName("color-icon");

The size is taken into account, but not the background color.
The image is still there.
How can i get rid of the background image of the default style?

On Jun 5, 4:44 pm, Piro <pipik.ro...@gmail.com> wrote:
> Use CSS to style buttons.
>

> http://code.google.com/intl/sk-SK/webtoolkit/doc/latest/DevGuideUiCss...

[Ryan McFall]

I believe you need to make sure that the rule in which you are
eliminating the background-image has a higher CSS priority than the
default one. The rule for the default push-button which is setting
the background-image contains two class selectors, making it higher
priority than the rule you've written for .color-icon.

Ryan

[Piro]

Have you tried something like Firebug to see applied css in browser?
It helped me when i was making some css stuff, since i am just css
beginner.

[Julian]

Try using button.setStyleName("color-icon"); instead.

Alternatively use

.color-icon {
  height: 16px; 
  width: 23px; 

  background-image: none !important; 
  background-color: #777777; 
}