In the previous sections, you saw that theme customization directly worked on the theme.css
file of the PrimeFaces themes. You can also add the same customizations in an external CSS file and add it after the PrimeFaces registered theme file. For this purpose, you need to follow the customizable resource ordering concept.
PrimeFaces HeaderRenderer
class implements the resource order as follows:
- “first” facet if defined - Theme CSS - “middle” facet if defined - PF-JSF registered CSS and JS - Head content - “last” facet if defined
You can define a custom CSS file that contains all the aforementioned changes in the last facet to override the default theme CSS file. If you don’t want to apply the changes to all the components, then add a namespace label before the CSS class name so that it can be applied to specific components.
For example, let’s assume that the overridden CSS classes are added to an external file named customstyle.css
and...