JGrowl set theme

javascript jquery css jgrowl
Tom Gullen picture Tom Gullen · Jan 31, 2011 · Viewed 8.9k times · Source

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

Andy picture Andy · Jan 31, 2011

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

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More
Refresh/reload the content in Div using jquery/ajax

I want to reload a div on click of a button. I do not want to reload the full page. Here is my code: HTML: <div role="button" class="marginTop50 marginBottom"> <input type="button" id="getCameraSerialNumbers" value="…

Read More