.rf-panel-header { color: #0054BD; } .panel { vertical-align: top; } .top { width: 200px; height: 100px; } .head2 { background-image: url(); background-color: #4C9600; height: 18px; text-align: center; vertical-align: middle; color: #CFF; padding: 4px 0; } .body3 { height: 100px; overflow: auto; } .class2:hover .head2 { background-color: #60BA01; } .class2:hover .body3 { background-color: #F4FFF8; } Panel #1. Changing Style Synchronously Each component in RichFaces has a pre-defined set of CSS classes you can manipulate. If defined, those classes overwrite the ones that come from the skin. Panel #2. Changing Style Synchronously In this example, we define header color using the .rf-panel-header class and all panels located on the same page inherit this color Panel header Base on the previous layout, but with javascript visual effects added. Scrolling Text Panel Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text This is a panel without the header