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;
}

Currently, I am embedding this CSS snippet in the head of every XHTML page.

<head>
    <style type="text/css">
        .ui-widget,.ui-widget .ui-widget {
            font-size: 90% !important;
        }
    </style>
</head>

do you use templating in your project? or do you have a header page or any other page that is a part of all your pages or contains them? — Daniel, Feb 05 '12 at 06:59
No, i did not use templating, i can have a header page to contain this, is it the best way to perform this? — Oh Chin Boon, Feb 05 '12 at 08:14
that's what i did in my project, added something like that: in the header page that appears in all pages... — Daniel, Feb 05 '12 at 08:37

score 36 · Accepted Answer · edited May 23 '17 at 11:54

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?

the css above caused selectOneMenu to display a horizontal scrollbar in the dropdown because the menu itself was reduced in size, but each menu item still had the larger font. However when I removed the double .ui-widget .ui-widget after the comma, the drop down menu seems OK. Maybe I need to brush up on my CSS but I don't get what the duplicate .ui-widget .ui-widget is meant to do. — jeff, Jan 21 '15 at 21:53

score 17 · Answer 2 · answered Feb 07 '12 at 11:20

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:

set the font size of components with the ui-widget class to 90% (of the parent)
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.

I have small doubt, instead of `` if I put ``, component size doesn't seems to be resizing. What could be the reason? Besides How can I change the font type to ariel or sans etc? Or do I need to explicitly mention `.ui-datatable`? — Jacob, Feb 22 '12 at 05:29
Thanks Hound Dog. It's rare that I disagree with a BalusC answer but yours was spot on and exactly nailed the problem I've been having since starting to use PF (good explanation of why it's an issue too). — wobblycogs, Jul 08 '13 at 16:30
@wobblycogs thanks - I think this is the only time I've ever questioned BalusC's answers (this one made me doubt myself!) - his JSF knowledge is incredible, and Omnifaces is neat. — James Bassett, Jul 08 '13 at 22:41
@HoundDog Do you know how do I do to reduce the size of all primefaces components not only the fonts. Thanks — John Alexander Betts, Oct 25 '13 at 18:04
@BalusC, what do you think? I had problem described by Hound Dog with your approach. — guest, Jul 10 '15 at 10:38
I didn't suggest that style. I just took over exactly the style the question asker already used and only answered the actual technical question being asked. I've edited the question title accordingly. — BalusC, Sep 18 '15 at 11:30
I actually originally came here because of the question title (i.e. how to set font size globally) because I had issues with the PF manual's approach. Now my answer looks totally random, oh well! I've moved on from JSF, but I see the manual still suggests the same approach. Was I crazy? — James Bassett, Sep 19 '15 at 22:26

score 0 · Answer 3 · answered Feb 17 '14 at 18:17

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;
}

score 0 · Answer 4 · edited Jul 05 '17 at 02:00

0

This works fine.

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

edited Jul 05 '17 at 02:00

Pang

9,564
146
81
122

answered Jul 04 '17 at 22:44

Gustavo Mahecha

239
3
3

Globally changing default style in Primefaces

4 Answers4

Linked