Home > Java, JSF, PrimeFaces > How to override default PrimeFaces CSS

How to override default PrimeFaces CSS

For JSF/PrimeFaces beginners overriding the default primefaces CSS is often an issue and there are also not much answers to this question on the internet. Okay why do you want to override the default CSS..? Because of a number of reasons.. For example the default PrimeFaces components are too big and i wanted them to look like those shown in PrimeFaces showcase. So all i have to do is to override the CSS with my custom CSS.
Create a CSS file in the WebContent\resources\css folder (create the css folder). Put the following code in the CSS file:

.ui-widget,
.ui-widget .ui-widget
{
    font-size: 90% !important;
}

Now all you have to do is to include this CSS file in your JSF page by adding the following code.

<h:outputStylesheet name="css/custom-style.css" />

And thats all, now you can add any styles, classes to this CSS file and make your JSF/PrimeFaces components fancy and the way you want them to be. Cheers.

Advertisements
Categories: Java, JSF, PrimeFaces
  1. No comments yet.
  1. No trackbacks yet.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: