Apache Trinidad’s Casablanca Skin as a PrimeFaces Theme
June 24, 2010 1 Comment
In order to show how powerful and easy to use PrimeFaces’s new skinning architecture is, I’ve ported Apache Trinidad’s Casablanca skin as a PrimeFaces Theme. Here are the results;
New casablanca theme is now also available to preview and download at PrimeFaces Theme Gallery.
Pretty same right? It took me 10 minutes to create this PrimeFaces theme based on Trinidad’s Casablanca, because PrimeFaces seperates structural css from skinning css. Structural css is component specific like ui-carousel, ui-accordion, ui-panel and defines padding, margins, positions, display types and so on. On the other hand skinning css are global css selectors like ui-widget-header, ui-widget-content, ui-state-default, ui-state-hover, ui-state-active and a couple more that specifies colors, backgrounds, icons and other visual styles.
Best thing is most of the time when working on skinning in your PrimeFaces application, you don’t need to know every component’s skin selectors, for example to change the background of a panel header you don’t need to know about .ui-panel-header which applies to the panel header div element because background is provided via ui-widget-header which is a global selector that applies to headers in PrimeFaces components.