Error Message Style For a Panel

Question

I am using PrimeFaces, which in turn uses JQuery UI for not only the functionality but its CSS styling framework. This question arises from my ignorance about the CSS frame

Answer 1

the easiest way to do this is to look at primefaces showcase, and use firebug to look at css classes.

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

Anyway, this is how 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 single message it's enought to have:

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

It's a bit less tags then in Damian's answer.