How to Customize the Growl PrimeFaces Component

I believe that every JSF fan has heard about PrimeFaces, the open source component suite for Java Server Faces (PrimeFaces). From my point of view, it is a real pleasure to explore PrimeFaces components and to get play with their capabilities. Recently, I had to use a customized growl component, meaning that I needed to make it appear in different locations and changing it’s aspect. Let me share this experience with you!
The final result (after customization) is shown in the below image:


- Replacing the default info icon with a custom image can be accomplished by using the infoIcon attribute of <p:growl> component:

<p:growl id="growl" infoIcon="./imgs/user.png" />

- In addition, you can customize the image’s CSS properties, like width and height, by modifying the CSS class ui-growl-image:

.ui-growl-image { 
    width: 100px;
    height: 95px;
    float: left;
}

- By default, the growl’s message will be displayed for 6000 ms and after that will be hidden. You can change this period by setting the sticky attribute to true (the message will never get hide) or changing the duration in the life attribute.

<p:growl id="growl" infoIcon="./imgs/user.png" showDetail="true"
                                          sticky="false" life="10000" />

- The growl background it is also customizable through CSS. This time operate over ui-growl-item-container class:

.ui-growl-item-container {
    background-image: url('./imgs/background.jpg');
}

- The growl closing icon is set by default in the top left corner. If you want it to appear in a different place, like top right corner, you need to modify the CSS ui-growl-icon-close class:

.ui-growl-icon-close {
    cursor: pointer;
    position: absolute;
    left: 335px;
    top: 15px;
}

- You can also change the font and style of the summary and the detail message, like below:

.ui-growl-title {
    font: 28px "Lucida Console", Monaco, monospace;
    text-align: center;
}
.ui-growl-message p {
    font: 20px "Lucida Console", Monaco, monospace;
    letter-spacing: -1px;
}

- Finally, you can place the growl anywhere you want, top left, bottom left, bottom right, center and so on by ui-growl class:

.ui-growl {   
    position:fixed;
    top: 40%;
    left: 37%;
    width: 360px;
    height: 110px;
    z-index:9999; 
}

That’s it ! Hope you like it!

 

From http://e-blog-java.blogspot.com/2011/07/how-to-customize-growl-primefaces.html