JGrowl set theme

Question

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.

Answer 1

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