Search code examples
javascriptjquerycssjgrowl

JGrowl set theme

My Jgrowl code is:

    $(document).ready(function() {
        $.jGrowl("<strong>Error!</strong><br />An invalid ID was passed and your template could not be loaded", { sticky: true, theme: 'test' });
    });

And my CSS in the Jgrowl CSS is:

.test{
    background-color:       #000000;
}

But it's not applying that CSS to the box. I'm probably misusing the theme option, but am struggling to find much documentation on it.

Solution

  • The .test background-color is overridden by the "div.jGrowl div.jGrowl-notification" style. You could make the .test style !important:

    .test{
    background-color:       #000000 !important;
}

    or access the .test class more specifically like so:

    "div.jGrowl div.jGrowl-notification.ui-state-test"

    this will override it too