PrimeFaces Standard Interface

Yes of course. Firstly, you can change the topic entirely, options for free themes are here .

If you need to change a particular component, then the browser debugger and knowledge of CSS will help you. In the debugger, select the desired component and look at its HTML and styles. For p:accordionPanel root tag is a div that has been assigned a style named ui-accordion . Add to your page your styles, which change the styles of Primefaces, here's an example of changing the font:

  <h:form id="mainForm"> <p:accordionPanel> <p:tab title="Godfather Part I"> <h:panelGrid columns="2" cellpadding="10"> <h:outputText value="The story begins as Don Vito Corleone..."/> </h:panelGrid> </p:tab> <p:tab title="Godfather Part II"> <h:panelGrid columns="2" cellpadding="10"> <h:outputText value="Francis Ford Coppola's legendary..."/> </h:panelGrid> </p:tab> </p:accordionPanel> </h:form> <style type="text/css"> #mainForm .ui-accordion { font-family: "Courier New", Courier, monospace; } </style> 

#mainForm .ui-accordion is the path that tells the browser that all elements that have the .ui-accordion style and that are inside the element with the mainForm identifier now receive the specified style. Such a path is needed in order not to affect the other p:accordionPanel s on the page. If you want the style change to affect all p:accordionPanel s in the application, then #mainForm should be removed, put the style into a separate CSS file and import it into your page (this is best done in a template that all pages of the site should use) .

Using this approach, you can change any components of PrimeFaces. If something does not work out, most likely it will be necessary to understand CSS, and not PrimeFaces.