Primefaces components CSS customization

Question

As I see in the primefaces documentation,

    1) To change the font-size of PrimeFaces components globally, use the `.ui-widget` style class. 
       An example with 12px font size.

        .ui-widget,
        .ui-widget .ui-widget {
               font-size: 12px !important;
         }

I have 2 questions on this:

Why is the .ui-widget written thrice in the above code?
For two different instances of tabView I want to customize its header background-color differently, but I couldnt find a way to do that. Is that even possible ?

maple_shaft · Accepted Answer · 2011-06-10 10:54:39Z

3

In the style declaration they are comma delimiting the list of different class overrides. Specifically this piece of css states:

Classes ui-widget and ui-widget child elements of an element that has the class ui-widget.

As far as the header background is considered you might not have luck using simple CSS to modify the background color as I believe that it is likely using various different 1px wide GIF or JPG images repeated as opposed to a solid contiguously declared color.

If you want to customize the default themes of the Primefaces components with your own stylesheets then you are best to look into a tool like Firebug, https://addons.mozilla.org/en-US/firefox/addon/firebug/ for inspecting classes, styles and modifying them real time on ANY web page that Firefox is currently viewing. It even has built in Javascript debugging.

answered Jun 10, 2011 at 10:54

maple_shaft

10.5k6 gold badges48 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kukeltje · Accepted Answer · 2017-03-31 09:05:32Z

2

For two different instances of tabView I want to customize its header background-color differently, but I couldnt find a way to do that. Is that even possible ?

tabView, like all other PrimeFaces components has the attribute styleClass. Therewith you can assign your own CSS style class to a tabView instance (or any instance of a different component).

So you can create two style classes with different background colors.

xhtml:

<p:tabView styleClass="myClass">
   ...
</p:tabView>

css:

.myClass {
   background-color: yellow;
}

You might need a more specific selector, read about css specificity

edited Mar 31, 2017 at 9:05

Kukeltje

12.4k4 gold badges26 silver badges47 bronze badges

answered Jun 10, 2011 at 11:12

Sebi

2,5843 gold badges26 silver badges29 bronze badges

Comments

8bitjunkie · Accepted Answer · 2012-04-22 16:49:07Z

0

Perhaps a little subjective, but unless you're looking to customise existing Jquery UI IDs within a pre-existing/pre-rolled Primefaces theme then you're on a bit of a hiding to nothing. PanelGroups, PanelGrids and TabViews, for example, burst their containers and not even an overflow:auto can repair it.

One of the most infurating things about the Primefaces library is how the components do not pass W3C validation, leading to hours of "Fighting the Framework".

answered Apr 22, 2012 at 16:49

8bitjunkie

13.4k10 gold badges61 silver badges73 bronze badges

Collectives™ on Stack Overflow

Primefaces components CSS customization

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related