Search code examples
primefacestitlebar

How to make skinned Title Bar in PrimeFaces


On PrimeFaces showcase page there is a simple title bar which fits in the actual theme. I mean the "Welcome to PrimeFaces showcase" text on this page: http://www.primefaces.org/showcase/ui/home.jsf

This is not a button nor any kind of responsive control, just a themed textbox or title bar.

I've searched a lot but I was not able to find a simple <p: > component which can generate this kind of result.

Can anybody help me, how to make such an element in PrimeFaces?


Solution

  • Here you can find the xhtml code for the welcome page - home.xhtml(home.jsf) : http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/ui/home.xhtml?r=5567

    As you can see there, the 'title bar' is just a simple <h1> tag with some css:

    <h1 class="title ui-widget-header ui-corner-all">Welcome to PrimeFaces ShowCase</h1>
    

    There you can find the entire primefaces website/project, and the CSS files as well, but it's better to implement your CSS...