CODEWITHSUNDEEP
cssjsfprimefaces
Rajat Gupta
Rajat Gupta

Reputation: 26587

Primefaces components CSS customization

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:

  1. Why is the .ui-widget written thrice in the above code?

  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 ?

Upvotes: 5

Views: 18609

Answers (3)

Sebi
Sebi

Reputation: 2584

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

Upvotes: 2

8bitjunkie
8bitjunkie

Reputation: 13245

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".

Upvotes: 0

maple_shaft
maple_shaft

Reputation: 10463

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.

Upvotes: 3

Related Questions