button addStyleNAme style is overwritten

I am trying to customize button caption using addStyleName

My code snippet is:
[code]

// dsfLinkSystemButton
dsfSensitiveMetaButton = new Button();
dsfSensitiveMetaButton.addStyleName(“sensitiveRed”);
dsfSensitiveMetaButton.setCaption( “Sensitive Metadata”);
dsfSensitiveMetaButton.setImmediate(false);

[/code]
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)

12238.docx (86.8 KB)

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.