Overriding Primefaces Style Sheet

[aussiemcgr]

Issues regarding overriding PrimeFace's style sheets is by far my biggest annoyance with PrimeFaces, and it is costing me way too much time, so I figured I would ask here for help.
I have tried several different suggestions I found on Google, but I have not had any kind of consistent success. The only thing I have found that works consistently is the "!important" property, which is extremely bad practice and I want to avoid it.
My question is: how can I ensure that my style sheets take priority over PrimeFace's style sheets? I'm happy with a lot of the default styling by PrimeFaces, but when I need to do specific things for certain UI elements, my style sheets get overridden by PrimeFace's.

For example, if I have a code snippet like this:

Code: Select all

<h:commandLink styleClass="updateContentLink">...</h:commandLink>

And this .xhtml file uses a certain style sheet, and in that style sheet I have:

Code: Select all

.updateContentLink {
	color: #000000;
}

I would expect the link text to be black. However, my changes are overridden by .ui-widget-content a from the PrimeFaces Aristo Theme's theme.css file (as well as a few other css files, it would seem).

I want my CSS files to ALWAYS take priority over any other CSS files. The only times it should use PrimeFace's is when I don't provide styling for the elements. Does anyone know how I can do this? Thanks in advance for any help.

[tandraschko]

include your style after the primefaces ccs - just search google/search for it.

[andyba]

You should use the <f:facet name="last">Your CSS link here</f:facet> in the h:head portion of the page.
The User Guide discusses this I believe.

[kukeltje]

Your expectation of what overrules what is wrong. Just realy learn css: https://developer.mozilla.org/en-US/doc ... pecificity. It might e.g. help if you add a specific class to the body and prepend that in *all* your selectors)

[kukeltje]

I want my CSS files to ALWAYS take priority over any other CSS files. The only times it should use PrimeFace's is when I don't provide styling for the elements. Does anyone know how I can do this? Thanks in advance for any help.

Your expectation of what overrules what is wrong. Just realy learn css: https://developer.mozilla.org/en-US/doc ... pecificity. It might e.g. help if you add a specific class to the body and prepend that in *all* your selectors)

And creating a new style with themeroller and use that helps to