Change the color of Toolbar on primefaces

Asked

Viewed 736 times

0

I wanted to change the background color of Toolbar what the tag would be

<p:toolbar>
    <f:facet name="right">
        <h:commandButton value="Sair" style="color: "/>
    </f:facet>
</p:toolbar>

1 answer

0


When accessing your page through the browser, go on inspect element, click on the object you want to know the information and look for the tag class, in the case of Toolbar of the first faces has the information of all the elements that make up the object.

class="ui-toolbar ui-widget ui-widget-header ui-corner-all ui-helper-clearfix"

In your css you declare the class

.ui-toolbar {
    background-color: red;
}

In this case every time you call Toolbar will come this information, if you want this color application only in a tag, the right would be you create a styleClass.

<p:toolbar styleClass="teste">
    <f:facet name="right">
        <h:commandButton value="Sair" style="color: "/>
    </f:facet>
</p:toolbar>

..

.teste {
        background-color: red;
    } 
  • Yeah, I would have done it that way, but then he picks up the color and then he disappears. as if another css configuration was interfering there is some tag that forces him to use only this css with the color I chose ?

  • Try to put ! Mportant in front of configuration: background-color: red ! Mportant;

  • Because it takes the color and then disappears, it tests on another page and the current page also checks if there is another toobar in the file, maybe one is overwriting the other, and this can be some configuration in css.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.