ansaurus

Question

why jGrowl popup doesnt look as expected?

Answer 1

A:

Use firebug to check the css that is applied to the popup box. propabely some of the css is overwritten by css you wrote yourself.

Nealv 2010-07-27 19:58:32

its applied. but still coudn't figure out why its not styling as expected!

clonex1 2010-07-27 20:36:04

Answer 2

A:

I think jquery-ui-1.7.2.custom.css is adding styling classes to your jgrowl notification object. I'm not great at debugging css so I haven't figured out how to fix it. Try commenting out the jquery-ui-1.7.2.custom.css link and see if that makes your jgrowl notification look like you are expecting.

Ruth 2010-07-30 17:37:01

OK, I think I have it figured out. Go into jquery.jgrowl.js. Look for ui-state-highlight. It is one of the classes set on the notification. I believe this is for "theme rolling". If you want to just hack the jquery.jgrowl.js file then remove the ui-state-highlight class and the jgrowl notification will now have the black background like you are expecting.

Ruth 2010-07-30 18:11:12

Its not even included, this is my current jgrowl notificationhttp://hinuts.com/sd.PNG

clonex1 2010-08-01 13:21:38

It looks like it is getting closer. Try looking in jquery.jgrowl.js for all instances of ui-state-highlight. Try removing all of them.

Ruth 2010-08-04 14:20:10

Answer 3

A:

In Firebug or in your CSS file, add !important declarations (ex. background-color: red !important; ) and see if your styles are applied correctly. If so, your rules are being overridden by ones with a higher specificity (or rules that are applied after yours with equal specificity).

Edit: I created a jGrowl test page and its notifications display correctly. Try commenting out any other style sheets in your head and see if the issue persists. Also, make sure the files are in the directories specified. (The ./ is redundant and not needed: . indicates current directory, so referencing ./folder/test.js is the same as just folder/test.js)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>  

    <link rel="stylesheet" href="jquery.jgrowl.css" type="text/css" />
    <link rel="stylesheet" href="examples/css/redmond/jquery-ui-1.7.2.custom.css" type="text/css" />

    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="examples/jquery.ui.all.js"></script>
    <script type="text/javascript" src="jquery.jgrowl.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $.jGrowl( "jGowl test", { sticky: true } );
    });
    </script>

</head>
<body>
</body>
</html>

tedmiston 2010-07-30 17:46:49

i tried it its overridden with the red color but the header and message classes are still in different colorhttp://hinuts.com/sd.PNGcheck the shot

clonex1 2010-08-01 13:26:27

Take a look at my addition to the above post.

tedmiston 2010-08-03 19:34:24

Answer 4

A:

jGrowl containers will have their style affected if you are referencing jQuery UI's stylesheet on the same page as jGrowl. As of jGrowl version 1.2.2 all jGrowl containers are decorated with the CSS class "ui-state-highlight", which adds a background, border, and font-color to the style definition.

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background:url("images/ui-bg_glass_55_fbf9ee_1x400.png") repeat-x scroll 50% 50% #FBF9EE;
    border:1px solid #FCEFA1;
    color:#363636;
}

To prevent this behavior you can make the following addition to the jquery.jgrowl.css file:

div.jGrowl > .ui-state-highlight {
    background: inherit;
    color: inherit;
    border: inherit;
}

Nathan Taylor 2010-08-26 18:07:01

ansaurus

tags:

views:

answers:

why jGrowl popup doesnt look as expected?

related questions