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 ?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With