You might frequently want to override the predefined PrimeFaces styles with customized values. Just changing the default values of the PrimeFaces CSS classes won't affect a web page.
You can override the CSS styles in the following two ways:
This is the simplest solution. Add an important keyword to the CSS properties in order to override the CSS styles, as follows:
.ui-message-info, .ui-message-error, .ui-message-warn, .ui-message-fatal { border: 1px solid;; margin: 0px 5px; padding:2px 5px; }
Let's override the CSS properties such border, margin, and padding with
!important
, as follows:.ui-message-info,.ui-message-error,.ui-message-warn,.ui-message-fatal { border: 0!important; margin: 0!important; padding: 0!important; }
All the preceding CSS properties being reset to zero results in message boxes without dimension styles.
Resource ordering in PrimeFaces is the official way of overriding PrimeFaces styles. Have a look at http://blog.primefaces.org...