Why mytheme->button ->img->righ.png do not override original Reindeer right

Flow
1

Hello,

This is I suppose easy, but I im new to Vaadin.

My theme structure is:

VAADIN
→ themes
------> mytheme
----------> buttton
--------------> img
----------------- right.png // (reindeer shape but different color)

init() {

setTheme(“mytheme”);

}

So why in my application I don’t see any change in Button to Reindeer?

Thanks for any response.

2

The first approach would be to use firefox+firebug or any other browser with development tools to inspect your dom-tree and its css-rules, to see what happened. Helped me a lot when styling vaadin these days.

3

Thanks Marc,
I have installed Firebug and path to my theme seems ok, but still can’t make it work.
Shouldn’t right.png file in my theme override the reindeer one?

4

In CSS rules, file locations are relative to the location of the CSS file itself. That means, the image will always be found in the original theme if you leave the original rules applied (They are still active if you switch to a new theme, as theming is always based on the standard theme to have all other components work as usual).

Try to create your own button.css file in your theme under /mytheme/button/ and write a rule which applies the new background-image from there (But don’t forget to include it in the master style.css in the base directory of your theme, as mentioned in the manual for theming). Thats the way i created my own button styles.

A good start is to inspect the dom with firebug to see what HTML is created by vaadin and which style names are nested in there, just to know, which rules you have to overwrite. I would recommend to give your components an additional style name to have your own set of components.

To give you an example, here is a little css snippet from my theme:


.mybutton.v-button {
	height: 50px;
	padding: 0 0 0 8px;
	background-color: transparent;
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url(../button/img/left.png); /** sprite-ref: buttons */
	border: none;
	cursor: default;
}

.mybutton .v-button-wrap {
	display: block;
	height: 50px;
	padding: 8px 12px 0 4px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right top;
	background-image: url(../button/img/right.png); /** sprite-ref: buttons; sprite-alignment: right */
	text-align: right;
}

As you see, just give your button an own name and call

button.setStyleName("mybutton")

to get the new rules applied and leave the original ones intact in other places.

Good luck,
Marc