Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?

like image 666
Rajat Gupta Avatar asked Jun 10 '11 09:06

Rajat Gupta


1 Answers

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.

like image 128
maple_shaft Avatar answered Sep 25 '22 02:09

maple_shaft