How to make skinned Title Bar in PrimeFaces

Question

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?

Answer 1

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...

Answer 2

You can use <p:toolbar> tag for it. Though its main usage lies in grouping together several content, But it does give the effect of a Title Bar you are looking for.

<p:toolbar>
   <p:toolbarGroup align="left">
       <p:outputLabel value="Welcome!!" />
   </p:toolbarGroup>
</p:toolbar>

You can surround the <p:outputLabel> tag with other tags like <h1>, <p> with CSS to give more effect.