Panel error message style

Question

I use PrimeFaces, which in turn uses JQuery UI for not only the functionality, but also its CSS style structure. This question arises because of my ignorance of the CSS structure, and I was not able to find any examples or documentation that would help me.

What I want to do is use the theme style for error messages for my own dashboard. Something like that:

<p:panel rendered="#{bean.someError}" styleClass="?? what goes here ??"> <h:outputText styleClass="?? what goes here ??" value="Error! A parameter to this page is wrong so it can't be rendered. This is probably because you used a stale bookmark." /> </p:panel> 

I want it to look the same as the error message you received when using. Any pointers were highly appreciated.

Answer 1

The easiest way to do this is to look at the showcase primers and use firebug to view the css classes.

I think you should use p:outputPanel with layout = "block" instead of p:panel , because the panel has its own styles. Instead, an outputPanel with block layouts makes a div without styles.

Anyway, so your code should look like

 <p:outputPanel rendered="#{bean.someError}" layout="block" styleClass="ui-messages ui-widget"> <div class="ui-messages-error ui-corner-all"> <span class="ui-messages-error-icon"></span> <ul> <li> <span class="ui-messages-error-summary"> <h:outputText value="Error! A parameter to this page is wrong so it can't be rendered. This is probably because you used a stale bookmark." /> </span> </li> </ul> </div> </p:outputPanel> 

Answer 2

For one message is enough:

 <div class="ui-message-error ui-corner-all"> <span class="ui-message-error-icon"/> <span class="ui-message-error-detail">your message here</span> </div> 

These are slightly fewer tags than Damian's answer.