hack css in primefaces

Create a style sheet file:


You need to ensure that you load the stylesheet by <h:outputStylesheet> the usual way. This will ensure that the stylesheet is loaded after the PrimeFaces’ default styles.

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

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 cascading, inheritance and override 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! True, there’s always the !important workaround, but that’s plain ugly and confuses your style rules and yourself only more. You can use the webbrowser developer tools to find the exact CSS selector.


PS: primefeces uses jquery ui Icons: A cheat sheet for all the icon names.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s