JGrowl set theme from css

Question

I have some code using Jquery Growl function. But I want to customize it to something like that - https://codepen.io/killerek/pen/qqdZJp

I'm using a code:

<script type="text/javascript">
    $.jGrowl('{$message}');
</script>

I wanted to use my own css code by editing this line as follows but didn't work for me.

<script type="text/javascript">
    $.jGrowl('{$message}','{theme: 'default'});
</script>

Any other ideas? Thanks

Answer 1

The key to using the theme option is the CSS definition, as theme just maps to a CSS class.

In the jGrowl repository there is an example folder that demonstrates this behavior:

Check out the CSS here: https://github.com/stanlemon/jGrowl/blob/master/examples/jgrowl.html#L16-L19

.jGrowl .manilla {
    background-color:       #FFF1C2;
    color:                  navy;
}

And the javascript here: https://github.com/stanlemon/jGrowl/blob/master/examples/jgrowl.html#L95-L120

$.jGrowl("Here is a custom theme.", {
    theme:  'manilla'
});

Notice theme of manilla maps to .jGrowl .manilla.

For your situation you would need a similar declaration .jGrowl .default.