CSS - Custom vaadin button image

Greetings all,

I want to have different buttons in my layout with different sizes and different images. The default vaadin button uses the image: button/img/button-sprites.png
I managed by using CSS to set a different image to a button but as the button is a different height and i use a different image i can not find the logic behind the location in the image that the button picks. in the default button/img/button-sprites.png there are 9 different buttons in one image.
Where can i find the code witch part of the image is used?

for example i use:
.headertabbutton .v-button-wrap,.headertabbutton .v-disabled.v-button .v-button-wrap
{
background-color: transparent !important;
background-image: url(“/Smartmap/VAADIN/themes/mytheme/button/img/tabbuttons.png”) !important;
background-position: right -130px !important;
background-repeat: no-repeat !important;
display: block !important;
height: 35px !important;
padding: 4px 15px 0 9px !important;
}

i do manage to get the different background but as the button size is different the location in the image is off.
included is the image of one of the buttons i want to use at 35px. But i also want to have different buttons with different height and images.
12339.png

Hmm it seems i figured the system out (a bit)., the background-position: left & right scroll in the image according to the width. And the image holds up the different type of buttons by default, (like default small etc)

.headertabbutton .v-button,.headertabbutton .v-disabled.v-button,.headertabbutton
{
background-color: transparent !important;
background-image: url(“/Smartmap/VAADIN/themes/smartmaptheme/button/img/tabbuttons.png”) !important;
background-position: left 1px !important;
background-repeat: no-repeat !important ;
border: medium none !important;
cursor: default !important;
height: 35px !important;
padding: 0 0 0 6px !important;
}
.headertabbutton .v-button-wrap,.headertabbutton .v-disabled.v-button .v-button-wrap
{
background-color: transparent !important;
background-image: url(“/Smartmap/VAADIN/themes/smartmaptheme/button/img/tabbuttons.png”) !important;
background-position: right -35px !important;
background-repeat: no-repeat !important;
display: block !important;
height: 35px !important;
padding: 4px 15px 0 9px !important;
}

works for me now. i guess i have to make a bigger image if i want to include all button possible states.

i just wish i did not need to use the !important statement but if i leave it out the default css takes controll.
any css wizards can perhaps put some light on this?

Reindeer has some more specific selectors than yours, that’s why it will take over if you remove the !important statement. So instead of the !important, you could just increase the selector specificity (e.g. by adding more class selectors to it).

The buttons-sprites.png does hold all the different types of buttons, normal, primary and small styles, and three states for each, normal, focus and pressed.

For me using the NativeButton works like a charm, if I want to have i freely designed unique button. NativeButton you can apply what ever CSS rules U like straight forward.

Wondering if there are more components in Vaadin coming in a native version?
Thought of it would probably be smart to provide a “native theme” in addition - where you can style components straight forward without overriding Vaadin styles at all?

The “style components straight forward without overriding Vaadin styles at all” part is coming in Vaadin 7, where you can strip the components to their bare styling and continue from there with your own.

Providing native versions of more components is difficult, since they don’t provide the same functionalities as the Vaadin API provides.

I am again a few steps furder i have now custom buttons with different sizes and images (and states like hover and clicked).
i am struggeling however getting more then one custom combobox at the moment.
If i do not get it working ill make a new thread.
Everytime i think i understand css a bit i am trown into an other corner. sign not to mention the different browser freggels like ie8 and ie6 off course. i have read somewhere you like the challange Jouni (Getting css work on all platforms) but for me its a nightmare come true! :frowning: