With Primefaces, rather than applying your own style for borders, headers etc. it is important where possible to tie the styling in to the theme using theme classes.
\nHere is an example of this from the Primefaces showcase, used to display the header for each example:-<\/p>\n
<h1 class=”title ui-widget-header ui-corner-all”>DataTable – Pagination<\/h1><\/p>\n
This example places a border around the header according to the theme, sets the appropriate background, and adds corner rounding as per the theme. Here is another example page fragment which I have used to group a few controls\/buttons in a box:-<\/p>\n <h:head> \u00a0\u00a0\u00a0 <\/style>
\nWhilst in some cases another Primefaces component might be the right approach (in this case a panel would do it), in many cases this is undesirable and also overkill for the job. Taking our lead from the Primefaces showcase, it is clearly acceptable to use the underlying jQuery UI classes where appropriate, as I have also done here<\/strong><\/a>.<\/p>\n
\n\u00a0\u00a0\u00a0 <style type=”text\/css”>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .ui-widget, .ui-widget .ui-widget {
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 font-size: 80% !important;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .ss-controlgroup {
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 float: left;
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/p>\n
\n<\/h:head>
\n<h:body>
\n<h:form>
\n<h:panelGroup layout=”block” styleClass=”ui-widget-content ui-corner-all ss-controlgroup”><\/p>\n