Primefaces Overrides

As you may already knew, overriding Primefaces theme could be a complicated task to do, even for an experienced developer. This page came to the rescue. It was made as a guide for our developer team to make their overriding Primefaces task(s), at least, not as hard as before.


Things You Need to Know

Before we dive deeper, these are quick summary of rule & basic knowledge every web developer should know & obey. Just take it as your "supplies for survival" for your next journey while working with Primefaces.

Basic Knowledge

It means, what has written on the list are not specifically related to Primefaces overrides, it is a general knowledge of

  • More specific CSS selector will overcome the less specific one.

    For example. .ui-parent .ui-child .ui-grand-child will override the values of .ui-parent .ui-grand-child.

  • Primefaces components always written as the very first class in the generated (X)HTML code, so let us just be focus on it.

    Examples: A Panel, BooleanButton, Calendar component will be generated with .ui-panel, .ui-boolean-button, .ui-calendar as its first class respectively.

Rules

  • Make its own stylesheet file specifically for it.
  • (This point is not a mandatory) Instead of using .ui-state-*, please just use the native :hover, :focus, :active, etc..

Prohibition

  • Do not make !important as your saviour. Please be clean with your stylesheet.
  • Do not apply a layout-related properties to Primefaces overrides, i.e. position, transform. If necessary, just separate it to its own class or id.
  • To play safe, do not change any CSS property for following classes: .ui-widget-*, .ui-state-*, .ui-corner-*, .ui-helper-*. Just leave it as the way it is.

Important

Every single points written above are basic knowledge every developer should have.