0

I work on PrimeFaces and I am trying to edit css properties of components. while working on growl, I am trying to change closing icon color but I just can't. I tried a lot and a lot and still couldn't figure out.

enter image description here

You can see at the top-right corner, Its background color yellow which I set it that but I cant change icon color. Its always that blue. Here are my codes about growl;

.ui-growl{
    position:fixed;
    top:20%;
    left:38%;
    width: 23%;
}

.ui-growl .ui-state-highlight{
    background: #d2524f;
    border: #d2524f;

}

.ui-growl-message{      
    float: left;
    font-size: 15px;
    margin: 2% 0 0 22%;
}

.ui-growl .ui-growl-icon-close{
    background-color:yellow;
}
Hunter Turner
  • 6,804
  • 11
  • 41
  • 56
Bilal Ekrem Harmanşa
  • 351
  • 3
  • 12

1 Answers1

5

The closing icon is drawn with background-image attribute via the following CSS selector:

.ui-state-highlight .ui-icon {
  background-image: url("/showcase/javax.faces.resource/images/ui-icons_ffffff_256x240.png.xhtml?ln=primefaces-omega");
}

Changing the color attribute will have no effect. To change the icon color you have to modify the image url. This answer gives some hints on that topic.

Tested with PrimeFaces ShowCase.

Community
  • 1
  • 1
irieill
  • 1,203
  • 10
  • 32
  • I dont know is it correct in sense of ethic .s http://www.primefaces.org/icarus/messages.xhtml In this page go Inspect Element and you can see that its easy to change icon color and that code,@Angel Politis just send you can see it top. So how does it work in that icarus theme ? – Bilal Ekrem Harmanşa Jul 26 '16 at 19:05
  • Post info for which PF version this valid – Kukeltje Jul 26 '16 at 19:07
  • I look into library and it says PrimeFaces 5.0 – Bilal Ekrem Harmanşa Jul 26 '16 at 19:10
  • @Bilal Your link points to a live demo of a premium theme. Premium themes seem to be different compared to standard themes. You did not mention you are using a premium theme in your project. If you are not using it in your project, i recomend to do inspection and testing with the standard [PrimeFaces ShowCase](http://www.primefaces.org/showcase/). – irieill Jul 26 '16 at 19:28
  • I see, I am not using the premium one. So I try to modify the image url. – Bilal Ekrem Harmanşa Jul 26 '16 at 19:31
  • The answerer shpuld post here which version he/she used. You did that for your question. Please put it in the question directly next time (or edit your question) – Kukeltje Jul 26 '16 at 19:40
  • @Kukeltje Updated answer with reference to showcase. – irieill Jul 26 '16 at 19:48