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.

score 18 · Accepted Answer · edited Jan 30 '17 at 08:35

18

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

edited Jan 30 '17 at 08:35

Alexander Suraphel

10,103
10
55
90

answered Jan 31 '11 at 11:00

Andy

29,707
9
41
58

score 2 · Answer 2 · edited Mar 08 '20 at 23:05

2

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.com/stanlemon/jGrowl/blob/master/README.md

edited Mar 08 '20 at 23:05

noetix

4,773
3
26
47

answered Apr 01 '19 at 19:55

Evelyn Stephanie

21
1

JGrowl set theme

2 Answers2