Dieter, I've got several requests lately about Skinability. Definitely we need special section on our documentation about it.
We will have it soon, but in a meanwhile I put together short blog article about basic Skinability features and how to use (or not to use) it.
However, your desired look is different story - you cannot implement corner images, unless you will have fixed size panels (and therefore being able to use static images for background).
So, it you willing to sacrifice corner images, you easily can implement desired look with your custom css. You may specify background image for header, no repeat, aligned to the left, and specify corresponding background color. That will create "flexible" headers with your image.
We had in the past panel with "corners" and decided to scrap it to simplify markup.
thanks for your reply (btw: I believe, I should have posted this topic in user forum).
I've already read your blog entry and it is clear for me now.
But I have a proposal for improvement:
In our project we have panels with different looks (espacially different colors in headline). I think it would be a good idea, to add a new attribute "cssPrefix" to all richfaces components (default is none).
This prefix would be used for the custom style classes.
In this case the custom style classes used would be "sideBar-rich-panel", "sideBar-rich-panel-header" and "sideBar-rich-panel-body".
This way I can define different sets of styles, which can be selected by different prefixes:
would display a panel, which may look totally different than the panel with a cssPrefix of "sideBar".
What do you think about it?
If you need to customize different panel on the same page you may use classes attributes like "headerClass"
If the panels are on the different pages - just create different CSS for predefined classes.