!!!Primefaces Buttons
[JSF Ext|JSF Ext#Primefaces Buttons] liefert CSS- und Javascript-Dateien zum Anpassen normaler Buttons an das Primefaces Layout.

!!!Skins
Skins können inzwischen über Maven konfiguriert werden. In der pom.xml:

{{{
	<dependency>
		<groupId>org.primefaces.themes</groupId>
		<artifactId>sunny</artifactId>
		<version>1.0.8</version>
	</dependency>
}}}

Und dann nur noch in der web.xml auswählen:

{{{
	<context-param>
		<param-name>primefaces.THEME</param-name>
		<param-value>sunny</param-value>
	</context-param>
}}}

Oder man bindet das Theme im Page-Template ein:

{{{
<h:outputStylesheet name="theme.css" library="primefaces-<theme>"/>
}}}

!!Custom Themes
Da Primefaces auf JQuery aufbaut, kann der [Online-Theme-Konfigurator|http://jqueryui.com/themeroller/] für die Skins verwendet werden. Aus dem heruntergeladenen ZIP wird das Verzeichnis custom-theme nach <web-root>/resources/primefaces-<theme>/ extrahiert, sodass sich darin /images und /jquery-ui-1.9.1.custom.css befindet. /jquery-ui-1.9.1.custom.css wird nach theme.css umbenannt, damit Primefaces es findet. Oder eben wieder über die Anweisung <h:outputStylesheet>.

!!!Menu
Das Primefaces Menu unterstützt kein Behavior oder ActionEvent-Listener. Mit einem Workaround kann dies umgangen werden:

{{{
<p:menuitem>
	<h:commandLink styleClass="ui-menuitem-link ui-corner-all">
		<f:ajax/>
		<h:outputText value="Scopes"/>
		<e:load scopeId=":scopeList"/>
	</h:commandLink>
</p:menuitem>
}}}

__Erklärung:__ Es wird ein <h:commandLink> innerhalb des <p:menuitem> platziert, der den Primefaces-Style enthält. Dieser unterstützt nun Behaviors und ActionEvents und sieht genauso aus.

!!!Datatable
Das Layout der Data-Tables kann mitunter etwas sperrig sein, weil sie sich nur bedingt an umgebende Container anpassen. Ein möglicher Fix besteht in CSS-Styles:

{{{
.ui-datatable table {
	table-layout: fixed !important;
}
.ui-datatable .ui-column-filter {
	width: 80px;
}
.ui-datatable tbody td, .ui-treetable tbody td {
	padding: 3px 4px;
}
.ui-datatable thead th, .ui-treetable thead th {
	padding: 3px 4px;
}
.ui-datatable tfoot td, .ui-treetable tfoot td {
	padding: 3px 4px;
}
}}}