PrimeFaces standard blocks

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 of the component and the color of the panel with the content of the component:

  <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; } #mainForm .ui-accordion-content { background-color: aliceblue; } </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 site pages 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.