Search code examples
cssjsfprimefacesgrowl

custom growl message border color

In growl messages, there is always a blue border, which I want to get rid of. Tried adding border-color to different growl classes but it still shows, I want a black border, what should I do? Below is my css, thanks.

.ui-growl{
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
border-color: black}


.ui-growl-item{color:black;background-color:gray; border-color: black;}

.ui-growl-item-container {background-color:gray;border-color:black;  }
Solution

  • I'm not sure why it's blue in your case, perhaps you used a different theme than the default Aristo theme?

    But anyway, the <p:growl> border is overrideable by the following selector:

    .ui-growl-item-container.ui-state-highlight {
    border-color: pink;
}

    See also the following screenshot of the inspection using Chrome developer toolset:

    enter image description here

    Make sure that you specify the overridding style in a stylesheet which is included by a <h:outputStylesheet> in the <h:body> (instead of the <h:head>)

    <h:head>
    ...
</h:head>
<h:body>
    <h:outputStylesheet name="custom.css" target="head" />
    ...
</h:body>

    It will be relocated into the generated HTML <head> anyway and this approach guarantees that it's loaded after any of PrimeFaces-bundled stylesheets.