changing font color of link button in styles.css

Vaadin 6 / 7 / 8 Framework UI
1

hello

I am trying to change link button caption font color using css, but i guess i am doing something wrong, need help.

In my application i have set

setTheme(“example”);

and my styles.css resides under ITMILL/themes/example/styles.css

this the button in java

btSignIn.setStyleName("link");
btSignIn.addStyleName("headerMenu");

and these are css I have tried

@import url(../default/styles.css);
.i-window button-link-headerMenu {
	color: #FFFFFF;
	
}


.i-button-headerMenu {
	color: #FFFFFF;
	
}
2

Did not try the code, but first guess is that you are missing a .i- from button-link-headerMenu (selector should be .i-window .i-button-link-headerMenu ). And on the other hand - latter style is missing the “link” part.

The best way of debugging this kind of problems or to start adding styles is to use firebug. Just select the element you want to style and firebug shows you the style names to use:

3

Thanks for the reply.

I tried your correction and used firebug

I need clarification in these cases.

The button is given a stylename “link” and then addStyleName(“headerMenu”)

now how do i specify css for only this button with style name “headerMenu” in styles.css in my example folder??.

cause all the options i have tried some tends to affect all the link buttons in my app.

4

[quote]
Did not try the code, but first guess is that you are missing a .i- from button-link-headerMenu (selector should be .i-window .i-button-link-headerMenu. And on the other hand - latter style is missing the “link” part.
[/quote] That’s not quite true. The stylename is actually added to a Button component, and works exactly like the first “link” stylename. So the correct CSS classname that will be added to the button element is “.i-button-headerMenu”, as you have already done in the latter selector. The first selector is wrong, though (“.i-window button-link-headerMenu”).

And to make theming a bit harder for everyone, we have added the additional “.i-window” and “.i-app” class selectors before the link selector in the default theme
(1
. So in order to override the specificity of our default theme, use the following selector:

.i-app .i-button-headerMenu, .i-window .i-button-headerMenu {
  color: #fff;
}

That should work as expected.


(1 Actually, these additional selectors are added before general “button”, “input” and “textfield” selectors, which will cascade to the link buttons as well.