Changing Chameleon captionwrap color

I am attempting to create a page which can have panels with different caption colours using chameleon as a base.

I know from using firebug that the caption colour for my panel is coming from this css:


.v-button-default,.v-disabled.v-button-default,.v-disabled.v-button-default:focus,.v-button-default:active,.v-ie7 .v-button-default.v-pressed,.v-ie8 .v-button-default.v-pressed,.v-panel-bubble .v-panel-caption,.v-datefield-calendarpanel-day-selected,.v-table tr.v-selected,.v-contextmenu .gwt-MenuItem-selected,.v-contextmenu .gwt-MenuItem-selected div,.v-filterselect-suggestpopup .gwt-MenuItem-selected,.v-progressindicator-indicator,.v-tree-node-selected span,.sidebar-menu .tab-selected,.sidebar-menu .selected,.v-horizontallayout-segment-alternate .v-button-down,.v-menubar .v-menubar-menuitem-selected,.v-menubar-submenu .v-menubar-menuitem-selected
{
background-color: rgb(0, 63, 126);
color: rgb(236, 237, 238);
text-shadow: 0 -1px 0 rgb(15, 48, 81);
}

my java code looks like this:

Panel tower = new Panel(“Tower1”);
tower.setStyleName(“bubble”);
tower.addStyleName(“myYellowLabel”);

But this css makes no change:

.myYellowLabel { background-color:yellow }

Could someone tell me where I am going wrong please.

The style class name myYellowLabel is added only to the top v-panel div. The v-panel-caption div gets only the v-panel-caption-myYellowLabel.

Nearly there thanks Johannes, unfortunately this is changing the background of the panel rather than the caption.

I also tried


.v-panel-captionwrap-myYellowLabel{ background-color:yellow }

You can see the effect and the css in this link

http://i751.photobucket.com/albums/xx154/tvrulesme/Capture.jpg

Thanks for looking in to this Johannes.

After much playing I found the answer to be :


.v-panel-bubble .v-panel-caption-myYellowLabel{
background-color: rgb(180, 43, 126);
}


.v-panel-bubble .v-panel-caption-myBlueLabel{
background-color: rgb(0, 63, 126);
}

In the unlikely event that someone else will need this answer :wink: