Search code examples
jqueryjquery-uijgrowl

why jGrowl popup doesnt look as expected?

i got this jGrowl notification on my site, when the notifications box its poped jGrowl popup doesnt looks well styled.

this is how i call jgrowl files

<link rel="stylesheet" type="text/css" href="./include/jgrowl/jquery.jgrowl.css" />

this is the notification box

alt text http://hinuts.com/jgrowl.look.png

Solution

  • jGrowl containers will have their style affected if you are referencing jQuery UI's stylesheet on the same page as jGrowl. As of jGrowl version 1.2.2 all jGrowl containers are decorated with the CSS class "ui-state-highlight", which adds a background, border, and font-color to the style definition.

    .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background:url("images/ui-bg_glass_55_fbf9ee_1x400.png") repeat-x scroll 50% 50% #FBF9EE;
    border:1px solid #FCEFA1;
    color:#363636;
}

    To prevent this behavior you can make the following addition to the jquery.jgrowl.css file:

    div.jGrowl > .ui-state-highlight {
    background: inherit;
    color: inherit;
    border: inherit;
}