How do I override default PrimeFaces CSS with custom styles?

Question

I\'ve created my own theme as a separate Maven project, and it is loaded correctly.

Now I want to change the size of an component. For example, a

Answer 1

How to create more specific rules

The style rules used by PrimeFaces can be quite complex. An element can receive its styling from multiple CSS rules. It's good to know you can use filtering in the DOM inspector's style tab to search on the property you want to customise:

This screenshot was taken using Chrome, but filtering is also available in Firefox and Safari.

When you have found the rule you want to customise, you can simply create a more specific rule by prefixing it with html. For example, your could override .ui-corner-all like:

html .ui-corner-all {
  border-radius: 10px;
}

Using the style attribute

PrimeFaces components can render quite complex HTML. Normally, the style attribute is only applied to the most outer HTML node that the component renders. Also, style is not reusable, so it is better to set a styleClass and create CSS rule(s) based on the class you've set. This also allows you to style inner HTML nodes rendered by the component.

Using the styleClass attribute

PrimeFaces comes with themes (and templates) which have many built in classes. You might find that an existing class will do what you need. For example to remove borders from a p:panelGrid one can simply apply the class ui-noborder.

See:

• How to remove border from specific PrimeFaces p:panelGrid?

Replace theme values using a ResourceHandler

I usually just want to replace some color with another value. As colors can be used in many different rules it can be useful to create a ResourceHandler.

In the handler check for the PrimeFaces theme:

@Override
public Resource createResource(String resourceName,
                               String libraryName) {
  if (isPrimeFacesTheme(resourceName, libraryName)) {
    return new MyResource(super.createResource(resourceName, libraryName), this);
  }
  else {
    return getWrapped().createResource(resourceName, libraryName);
  }
}

protected boolean isPrimeFacesTheme(final String resourceName,
                                    final String libraryName) {
  return libraryName != null
                 && libraryName.startsWith("primefaces-")
                 && "theme.css".equals(resourceName);
}

In the resource, replace the color:

private static String cache;

public MyResource(Resource wrapped, ResourceHandler handler) {
  this.wrapped = wrapped;
  this.handler = handler;
  this.charset = Charset.forName(FacesContext.getCurrentInstance().getExternalContext().getResponseCharacterEncoding());
}

@Override
public InputStream getInputStream() throws IOException {
  if (cache == null) {
    cache = readInputStream(getWrapped().getInputStream());
    // Replace values
    cache = cache.replace("#007ad9", "#11dd99");
  }
  return new ByteArrayInputStream(cache.getBytes(charset));
}

And register it as follows in the faces-config.xml:

  com.example.MyResourceHandler

For more information on resource handlers see:

• How to load dynamic resources in JSF?