Want to know how I can change the header through the tabview style property?

Question

I'm doing a project using: jsf, primefaces, css layout editing ... I need to change the background of just one tabview without affecting all other tabviews in the project. I know there is a property: .ui-widget-header. If I change this property in the css file, all headers are changed. Want to know how I can change the heater through the tabview style property?

I tried this in css, but it changes all headers:

 .ui-widget-header {
      border: 1px solid #56585C;
      background: #424548;
      color: #F9F7F7;
      font-weight: bold;
    }

My goal is to take a background from a tabView contained in another tabView without affecting the main tabView

There is no plain java in your question, please remove ot from the tags — Kukeltje, Sep 13 '19 at 15:51

score 0 · Accepted Answer · answered Sep 13 '19 at 15:59

0

Give your tabView a class:

<p:tabView styleClass="certain-tabview-class"

Use CSS descendant selector to style only tabViews with this class:

.certain-tabview-class .ui-widget-header {

answered Sep 13 '19 at 15:59

Vsevolod Golovanov

4,068
3
31
65

Like this: https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles – Kukeltje Sep 13 '19 at 16:08
This pretty much solved my problem. Thanks! @Kukeltje – Talita Mercês Sep 13 '19 at 18:28

Want to know how I can change the header through the tabview style property?

1 Answers1