Globally Changing Default Style in Primefaces

Globally changing default style in Primefaces

Create a style sheet file:

/resources/css/default.css

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

(please note that I removed the !important "hack", see also How do I override default PrimeFaces CSS with custom styles? for an in-depth explanation of how to redefine PF styles)

Include it in the <h:body> of your template using <h:outputStylesheet> (it will be auto-relocated to the end of the HTML head, after all PrimeFaces own stylesheets):

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

If you aren't using a master template and thus need to include this in every single page, I recommend to reconsider your page design and to utilize JSF2 Facelets templating capabilities. This way you've only one master template file where all defaults of both the head and the body are definied. See also this answer for a concrete example: How to include another XHTML in XHTML using JSF 2.0 Facelets?

How to globally style all PrimeFaces input components having set required=true

Just use this CSS selector. Gauranteed to work for all PF input fields for PF 7.0or higher.

input[aria-required="true"] {
   color: red;
}

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.

Sample Image

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).

change Primefaces Stylesheet

only style have to write in tag in . after change code to that is work good .

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
 <title>IGNORED</title>  
 <f:facet name="">
 <style type="text/css">
    submenu .ui-menu-child{
        left: -60px !important;
        width: 8.5em !important;
    }

    .submenu > ul{
        left: -60px !important;
        width: 8.5em !important;
    }
    .ui-widget-content.ui-menu-list.ui-corner-all.ui-helper-clearfix.ui-menu-child.ui-shadow{
        left: -60px !important;
        width: 8.5em !important;
    }

    .submenu .ui-menu-child{background: blue !important; } 
</style>
</f:facet>
</h:head>

<h:body>

<ui:composition>  
    <h:outputScript name="header.js" library="js" target="head"/>
    <p:menubar id="mnubr_main" style="font-size: 75% !important;">
        <p:submenu styleClass="submenu" id="sbmnu_karkard" label="#{msg.karkard}"   style="float: right;">  
            <p:menuitem value="#{msg.khodrohaye_sabok}" url="../../../pages/karkard/sabok" style="float: right;"/>  
            <p:menuitem value="#{msg.khodrohaye_sangin}"     url="../../../pages/karkard/sangin" /> 
            <p:menuitem value="تست۱" url="../../../pages/tarefe" /> 
        </p:submenu>

        <f:facet name="options" class="ui-float-left" id="haha"> 
            <p:commandButton id="btn_exit" title="#{msg.exit}"
                             icon="ui-icon-exit" style="float: left; margin-right: 5px;"
                             actionListener="#{userController.logout}" 
                             oncomplete="handleRedirectRequest(xhr, status, args)"/>
            <p:outputLabel value="#{userController.selected.specification.name}" style="margin-top: 5px;"/>
        </f:facet>
    </p:menubar>
    <p:spacer height="20px"/>
</ui:composition>

Remove all styling from Primefaces components?

Set primefaces.THEME context parameter to none and you'll get a functional ui with no styles.

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

You don't need to spend hours editing styles. Styling of PrimeFaces is done via shared styles like ui-widget-header, ui-widget-content which you can customize via the themeroller web form. I don't think JSF and theming can get any easier than PrimeFaces.

Globally Changing Default Style in Primefaces