Skinning panel component


I was trying to skin the panel component…

I applied following css:
.v-panel {background: yellow;}

this colors the panel header and a small border area in yellow. But in the centre there is still white portion i can see.
So how to color that as well?

what property should i use?

Did you see the panel-example in the Book of Vaadin (see 8.2.3)?

Maybe this helps.

Cheers, Maik

sorry did not help… i was missing .v-panel-content property but that gave a coloured outline instead of filling entire white space.

I am attaching the snapshot here wht my component looks like.

It is created by putting a form component inside a panel component.

and the css looks like:
@import url(…/reindeer/styles.css);
.v-form {background: #E3E5DB;
padding: 5px;}

.v-panel {background: yellow;}
.v-panel-content {background:red;}
.v-textfield {background-color: #CCFF9D; }

So please suggest how to fill the white space.

Depending on the browser, you may need to override additional components. This is true for Chrome/Safari in particular. I had to use the “inspect element” right-click feature – look at the right hand side and play with the checkboxes to turn specific rules on and off.

See this post for help:
Setting image as background of panel
(see the last code snippet in that message).