I'd like to understand how to override default components such as tab menu ONCE throughout the whole application. The way I normally do this (in Chrome) is to inspect the component, get the class and add it to the css, ensuring that the naming convention is consistent with the PF documentation. In the below example I try to INSPECT the tab element from the browser.
After hovering around to the right area I tried a couple of possible CSS variants to change the background color and the default tab widths:
.ui-tabs-selected, .ui-state-active {
width: 20%;
background-color: #ff0000;
}
.ui-tabs-nav {
background-color: #ff0000;
}
The first css option seemed to change the width but not the background color. The second didn't do anything. Instead of trial and error, I want to understand how to get the right class values from doing a page Inspect in the browser console?
1) For changing the default styling of PF components, is it correct to use INSPECT in the browser console and to then add the generated component class names into your css?
2) How do you know what class name you are looking for? What is the correct syntax that defines a correctly generated class name?
A couple of questions here helped me out but didn't answer the above:
The answer to this question provided a clue to use
#tabView .ui-tabs-panel
{
padding: 0;
}
I couldn't figure out how that was decided to as the right reference and the reference didn't work in any case.
The below questions helped to explain that the semi colon is a class pseudo selector and must be escaped if using explicit class references, which I assume doesn't apply to customizing components throughout the whole application ONCE?
Primefaces CSS overwrite single component
This was the most helpful for explaining the underlying theory:
How to use JSF generated HTML element ID with colon ":" in CSS selectors?
This tackles how to use style classes to customize individual components but doesn't go into detail of how to inspect a web page and extract the component specific class to customize that component throughout the whole application:
How to Override Primefaces default CSS?
Styleclasses isn't the option I"m looking for. I'm looking for a generic, application wide customization
These other were great for understanding CSS specificity and inheritance but I'm still not able to apply these theories to my concrete problem:
What are valid values for the id attribute in HTML?
Primefaces override CSS correctly
http://www.w3.org/TR/CSS2/cascade.html
I didn't see any answer in those and would appreciate any guidance on the above questions. Thank you!
