Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
button addStyleNAme style is overwritten
I am trying to customize button caption using addStyleName
My code snippet is:
// dsfLinkSystemButton
dsfSensitiveMetaButton = new Button();
dsfSensitiveMetaButton.addStyleName("sensitiveRed");
dsfSensitiveMetaButton.setCaption( "Sensitive Metadata");
dsfSensitiveMetaButton.setImmediate(false);
my overwrite class in css is
.v-button-sensitiveRed {
font-weight: bold;
color:red;
}
the button still shows caption with default style
code rendered in firebug is
<div style="float: left; margin-left: 0px;">
<div class="v-button v-button-sensitiveRed sensitiveRed" tabindex="0" role="button">
<span class="v-button-wrap">
<span class="v-button-caption">Sensitive Metadata</span>
</span>
</div>
</div>
The style pan in firebug shows my customstyle is overwritten by
.v-button-wrap, .v-disabled.v-button .v-button-wrap {
background-color: transparent;
background-image: url("button/img/button-sprites.png");
background-position: right -130px;
background-repeat: no-repeat;
display: block;
height: 22px;
padding: 4px 15px 0 9px;
}
styles.css (line 2566)
.v-button-wrap, .v-button-caption {
-moz-font-feature-settings: inherit;
-moz-font-language-override: inherit;
color: inherit;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
line-height: normal;
vertical-align: middle;
white-space: nowrap;
}
styles.css (line 77)
Inherited fromdiv.v-button
.sensitiveRed {
[b] color: red;
font-weight: bold;
}[/b]
styles.css (line 61)
.v-button-sensitiveRed {
color: red;
font-weight: bold;
}
styles.css (line 51)
It looks like you need to change your CSS to match the v-button-wrap inside your stylename e.g.
.v-button-sensitiveRed .v-button-wrap {
font-weight: bold;
color:red;
}
Cheers,
Charles
Thanks Charles it worked
I do have one more question if you could help with that.
Can I split button caption in two different style?
I would like to display caption like " Two color caption"
Hi,
In a word, No, I'm afraid not.
It *is* possible, but it would involve rewriting the Button widget on the clientside - not a trivial task.
Sorry,
Charles.