How to add a css to PrimeFaces?

Question

I try to add css to PrimeFaces and overwrite the defaults components font size.

My default.css:

.body {
    font-size: 10%;
}

.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: 10%;
}

.button{   
    font-size: 10%;
}

.ui-widget.button{
    font-size: 10%;   
}

On the xml body:

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

and for example I tried to add new css to the button:

<p:commandButton styleClass="button" id="add" value="Add" ajax="false"/>

What am I doing incorrectly, do not see any effects.

Check if the css is loaded, check in the **generated html** if your selectors are [specific enough](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) (use a browser developer tool) — Kukeltje, May 08 '15 at 07:13
also check if the order of loading of the stylesheets is right — Kukeltje, May 08 '15 at 07:19
@Eiten, Where is your default.css located? Try icluding it using simple css tag. — Parkash Kumar, May 08 '15 at 07:38
This change helped, but I do not why: CSS is located in folder CSS. — , May 08 '15 at 07:45
You can also check it by chrome's inspect element feature to check and adjust CSS as you desire — Sarz, May 08 '15 at 07:54
Where are you defining the ` `? is it in your `` in your jsf page? — cнŝdk, May 08 '15 at 08:36
possible duplicate of [What is the JSF resource library for and how should it be used?](http://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used) — Kukeltje, May 08 '15 at 10:39
Could you also add a view of your project folder tree? The thing is for css file to be processed as a resource it should be located in web/resources folder of your project. See this answer for more info http://stackoverflow.com/a/12282175/4745608 — Aleksandr Erokhin, May 08 '15 at 11:59

score -1 · Answer 1 · edited May 08 '15 at 08:06

Try removeing , from :

.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: 10%;
}

Replace it with this :

.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: 10%;
}

score -1 · Answer 2 · edited May 08 '15 at 08:31

-1

In Primefaces you can create your own Themes to define components layout. you can copy and change a community theme or create your own with Theme Roller.

All steps are well explained in the documentation/User Guides.

edited May 08 '15 at 08:31

cнŝdk

31,391
7
56
78

answered May 08 '15 at 08:26

Matthias

1,378
10
23

1

This is a way to complex solution for just changing font-size and you want to keep all other stuff from the PF theme – Kukeltje May 08 '15 at 10:37

How to add a css to PrimeFaces?

2 Answers2