PrimeFaces 2.2.1 looks different locally than in showcase

Question

I've seen similar questions asked here and here. Neither of these answered my question. I've also searched the PrimeFaces forum.

Setting up a vanilla JSF 2.0 project in NetBeans, I've added the Showcase code for Simple Dialog.

Code (index.xhtml) minus the xml declaration and DOCTYPE (XHTML 1.0 Transitional):

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
    <title>PrimeFaces</title>
</h:head>
<h:body>
    <h:panelGrid columns="1" cellpadding="5">
        <p:commandButton value="Basic" onclick="dlg1.show();" type="button"/>

        <p:commandButton value="Modal" onclick="dlg2.show();" type="button"/>

        <p:commandButton value="Effects" onclick="dlg3.show();" type="button"/>
    </h:panelGrid>

    <p:dialog header="Basic Dialog" widgetVar="dlg1">
        <h:outputText value="Resistance to PrimeFaces is futile!" />
    </p:dialog> 

    <p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="200">
        <h:outputText value="This is a Modal Dialog." />
    </p:dialog> 

    <p:dialog header="Effect Dialog" widgetVar="dlg3" showEffect="bounce" hideEffect="explode" height="200">
        <h:outputText value="This dialog has cool effects." />
    </p:dialog>
</h:body>

I've added the aristo theme to my Libraries (NetBeans way of adding to the classpath) and added the following to web.xml

web.xml (partial):

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

No other changes were made, although I quickly installed/uninstalled another theme (dark-hive) just to make certain that the theme was being registered properly. The results are as follows:

Local (Chrome 15.0.874.92):

Screenshot of locally created site

Showcase: (from PrimeFaces Showcase)

enter image description here

Stack:
PrimeFaces 2.2.1
JSF 2.0
Glassfish 3.1.1
Java 1.6.0_18
Windows 7 x64
(Generated by NetBeans 7.0.1)

Edit: This was also tested on FireFox 7.0.1 and IE 9

Can you provide more details about "I've added the aristo theme to my Libraries". Did you add the jar to your project's Libraries or did you create a library? If you build your project and explore into the war file (in the Files explorer) do you see what you expect? — vkraemer, Oct 19 '11 at 05:30
@vkraemer I added the jar from my Libraries which is included with the JSF/PrimeFaces plugin. This is located at `/enterprise/modules/ext/primefaces/primefaces-2.2.1.jar`. Yes, I see what I expect from the directory that is deployed (NetBeans does an inplace-deploy). This is a good point though and I will download the library from PrimeFaces.org and see if there's a change. — Jonathan Spooner, Oct 19 '11 at 05:48
@vkraemer After switching to the downloaded jar I see no change. — Jonathan Spooner, Oct 19 '11 at 05:53
I also deployed it to the server (as opposed to inplace). No change — Jonathan Spooner, Oct 19 '11 at 06:37

score 10 · Accepted Answer · answered Oct 19 '11 at 11:48

Isn't the problem the default font sizes? I can see from the showcase css that it has custom font sizes overriding the theme's default:

body {
    margin: 0px;
    padding: 0;
    font-size: 12px;
    color: #616161;
}

I checked some of my projects and all of them also have some font-size/font-family customization. Hope it helps

score 5 · Answer 2 · edited Jul 25 '13 at 15:00

I read your 3 posts. What's you problem here? Can you describe you problem more specifically? I mean, how different are they?

If it about font size, check PrimeFaces' Document. At Chapter 8.4: Themeing Tips: (Chapter 7.4 in User Guide 3.4 and later)

Default font size of themes might be bigger than expected, to change the font-size of PrimeFaces components globally, use the .ui-widget style class. An example of smaller fonts;

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

Hope that it can help u :)

PrimeFaces 2.2.1 looks different locally than in showcase

2 Answers2