Apache Trinidad’s Casablanca Skin as a PrimeFaces Theme

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;

Trinidad’s Demo;



PrimeFaces Demo;



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.

Powered by ThemeRoller, PrimeFaces has now powerful and easy to use skinning features. Usually Rich frameworks promote themselves with “no need to know about javascript when working with our x framework” but what about css and design? We all know that including me, web developers have limited design skills. PrimeFaces eliminates the complexity of both javascript and now CSS. Want to create your own theme but don’t know much about css, no problem, you can create a theme easily with the online theme generator.


One Response to Apache Trinidad’s Casablanca Skin as a PrimeFaces Theme

  1. Stephan Bardubitzki says:

    Way to go, Cagatay. Great work.

%d bloggers like this: