How to Override Default Primefaces CSS With Custom Styles

How do I override default PrimeFaces CSS with custom styles?

There are several things you need to take into account of which one or more might be relevant you your specific case

Load your CSS after PrimeFaces one

You need to ensure that your CSS is loaded after the PrimeFaces one. You can achieve this by placing the <h:outputStylesheet> referencing your CSS file inside <h:body> instead of <h:head>:

<h:head>
    ...
</h:head>
<h:body>
    <h:outputStylesheet name="style.css" />
    ...
</h:body>

JSF will automatically relocate the stylesheet to the end of the generated HTML <head> and this will thus ensure that the stylesheet is loaded after the PrimeFaces' default styles. This way the selectors in your CSS file which are exactly the same as in PrimeFaces CSS file will get precedence over the PrimeFaces one.

You'll probably also see suggestions to put it in <f:facet name="last"> of <h:head> which is understood by PrimeFaces-specific HeadRenderer, but this is unnecessarily clumsy and would break when you have your own HeadRenderer.

Understand CSS specificity

You also need to ensure that your CSS selector is at least as specific as the PrimeFaces' default CSS selector on the particular element. You need to understand CSS Specificity and Cascading and Inheritance rules. For example, if PrimeFaces declares a style by default as follows

.ui-foo .ui-bar {
    color: pink;
}

and you declare it as

.ui-bar {
    color: purple;
}

and the particular element with class="ui-bar" happen to have a parent element with class="ui-foo", then the PrimeFaces' one will still get precedence because that's the most specific match!

You can use the webbrowser developer tools to find the exact CSS selector. Rightclick the element in question in the webbrowser (IE9/Chrome/Firefox+Firebug) and choose Inspect Element to see it.

Partial overriding

If you need to override a style for only a specific instance of the component and not all instances of the same component, then add a custom styleClass and hook on that instead. It is another case where specificity is used/applied. For example:

<p:dataTable styleClass="borderless">

.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
    border-style: none;
}

If a component does not support a styleClass and you are on jsf 2.2 or up, you can also use passtrough attributes and add a pt:class and have it end-up on the output.

<p:clock pt:class="borderless" />

Never use !important

In case you fail to properly load the CSS file in order or to figure the right CSS selector, you'll probably grab the !important workaround. This is Plain Wrong. It's an ugly workaround and not a real solution. It only confuses your style rules and yourself more in long term. The !important should only be used in order to override the values hardcoded in HTML element's style attribute from a CSS stylesheet file on (which is in turn also a bad practice, but in some rare cases unfortunately unavoidable).

How to Override Primefaces default CSS?

CSS is applied on the HTML document as whole. CSS is not applied on a per-include-file basis or so as you seem to think. CSS does not run in webserver. CSS runs in webbrowser, after the webbrowser has parsed the HTML output retrieved from JSF and is presenting it visually to the enduser.

If you want to give a specific component a different style from default, then you should give it a class name.

<x:someComponent styleClass="someClass">

Then you can finetune the CSS selector on that:

.ui-menubar.someClass {
     ...
}

(name it more sensibly though, e.g. leftMenu, topMenu, etc)

Unrelated to the concrete problem, the !important is here being used as a workaround, not as a solution. Get rid of it and carefully read the following answer, including all of its links, in order to learn how to properly override PrimeFaces default CSS: How do I override default PrimeFaces CSS with custom styles?

Primefaces css overrides custom css

I had the same issue some days ago. You have to make sure that your stylesheet gets loaded after default PrimeFaces CSS. You can achieve this by including your stylesheet in the following way:

<h:head>
    <f:facet name="last">
        <link type="text/css" rel="stylesheet" href="/css/yourstyle.css"></link>
    </f:facet>
</h:head>

PS: Please do not use !important.

How to override stylesheets of PrimeFaces?

If using primefaces 2.2.1, Use the h:outputStylesheet tag and include it in h:body not in h:head to override primefaces stylesheets, same with h:outputScript.

Example:

<h:body>
  <h:outputStylesheet library="css" name="YOURSTYLES.css" />
  <h:outputScript library="javascript" name="YOURSCRIPT.js" target="head" />
</h:body>

If using primefaces 3, follow this blog entry
https://www.primefaces.org/resource-rendering/

PrimeFaces overrides my custom CSS style

Simple solution for you guys:

If you have a CommandButton in a Panel (or a Form) like that:

<h:form .... >
    <p:commandButton value="Green Button" styleClass="styleGreen" ... />
</h:form>

You just define your css like this:

form .styleGreen {    
    background-color: #009900;
    font-family: Arial,Helvetica,sans-serif;
}

It will work very well (I've just tried it)

PrimeFaces: how to override CSS class

Use a standard CSS override way.

Include a *.css in your page, where you redefine ui-corner-all and ui-corner-right classes.

.ui-corner-all {
    //ovverides to nothing, you can also define any properties you want here
}

.ui-corner-right {
    //define properties  which would override unwanted behaviour
}

You can also apply additional css class which would override undesired properties.

How to override PrimeFaces CSS to customize my button?

I will answer my own question. It appears that if I remove the space between the dots it's works...

.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-icon-left.mygreen {..}

Override default icon of primefaces

You could either drop all Primefaces styles using the following code in your web.xml:

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>none</param-value>
</context-param>

or if you like the overall styling simply override the class responsible for this particular icon, which is .ui-icon-circle-triangle-e

You can then add a new css selector to a file that comes after theme.css or is more specific. Specificity is the better way to go. Add a styleClass="plus-table" on the <p:dataTable> and a css selector/style like

.plus-table .ui-icon-circle-triangle-e {
    background-position: -16px -128px;
}

the same for minus:

.plus-table .ui-icon-circle-triangle-s {
    background-position: -48px -128px;
}

should work. You can always add the .plus-table to a template element so it applies everywhere and you don't need to add it to each component

See also:

How do I override default PrimeFaces CSS with custom styles?