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.

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.

• javascript
• jquery
• css
• jgrowl

2 Answers 2

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

You can use the parameter of Configuration Options of jGrowl

theme is a CSS class designating custom styling for this particular message, intended for use with jQuery UI.

CSS:

.jGrowl .changeCount {
    background-color: #337ab7;
}

JS:

$.jGrowl("Message in box", {theme: 'changeCount'});

More information about this plugin here: https://github./stanlemon/jGrowl/blob/master/README.md