Globally changing default style in Primefaces

Question

How should I change and apply changes to the default style of primefaces globally and only once?

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


        

Answer 1

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?

Answer 2

This works fine.

.ui-g {
    font-size: 13px;
}

Answer 3

It works fine with following css

body {
    font-size: 75% !important;

}

.ui-widget,.ui-widget-header,.ui-widget-content,.ui-widget-header .ui-widget-header,.ui-widget-content .ui-widget-content,.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button
    {
    font-size: 100% !important;
}

Answer 4

I would recommend using:

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

instead of BalusC's approach, unless you like the font size decreasing as you nest your JSF components together.

I'd agree with BalusC that you should create a stylesheet and consider templating, but I disagree with the suggested CSS (though I'm still not decided on the use of !important!).

Section 8.4 of the Primefaces 3.1 user guide suggests using

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

which is similar to BalusC's suggestion but uses !important.

This will do two things:

1. set the font size of components with the ui-widget class to 90% (of the parent)
2. set the font size of components with the ui-widget class and are children of another component with the ui-widget class to 90% (of the parent)

Do you really want to set the font size of a nested ui-widget to 90%? If you have 2 or 3 levels of nested ui-widgets the font size is going to keep decreasing. Try the following (Primefaces) JSF markup and you'll see my point.

    <h:form>
        <p:button value="Normal"></p:button>
        <p:panel>
            <p:button value="A bit smaller"></p:button>
            <p:panel>
                <p:button value="Even smaller again"></p:button>
                <p:panel>
                    <p:button value="Tiny"></p:button>
                </p:panel>
            </p:panel>
        </p:panel>
    </h:form>

I believe the reason .ui-widget .ui-widget was required in the standard jQuery CSS was to prevent the reverse problem: font size increasing in nested ui-widgets.

The default styles are typically the following:

.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }

Without the style defined for .ui-widget .ui-widget, the default font-size: 1.1em style applied to .ui-widget causes the font size to increase in nested ui-widgets.

By adding the more specific .ui-widget .ui-widget selector with font size set to 100% (or 1em) you will ensure that you get a consistent font size, no matter how deep you nest your components.