How to Customize the Growl PrimeFaces Component

Overwrite CSS of <p:growl>
Add code in <ui:define>:

<style type="text/css">

 .ui-growl {
        position:fixed;
        top:20px;
        right:20px;
        width:301px;
        z-index:9999;
}
.ui-growl-item-container {
        position:relative;
        margin:0 0 10px 0;
        opacity:0.85;
        filter:alpha(opacity=85);
}
.ui-growl-item {
        display:block;
        padding:10px 15px;
}
.ui-growl-item p {
        padding:0;
        margin:0;
}
.ui-growl-icon-close {
        position:absolute;
        top:5px;
        left:3px;
        cursor:pointer;
}
.ui-growl-title {
        font-weight:bold;
        padding:0 0 7px 0;
        display:block;
}
.ui-growl-image {
        width:32px;
        height:32px;
        float:left;
}
.ui-growl-message {
        padding:0 0 5px 0;
        width:220px;
        float:right;
}

.ui-growl-message p {
        font-weight: normal;
}

</style>