Login/Register
why jGrowl popup doesnt look as expected?
Asked Answered
Solved jqueryjquery-uijgrowl
E

4

9

i got this jGrowl notification on my site, when the notifications box its poped jGrowl popup doesnt looks well styled.

this is how i call jgrowl files

<link rel="stylesheet" type="text/css" href="./include/jgrowl/jquery.jgrowl.css" />

this is the notification box

alt text http://hinuts.com/jgrowl.look.png

Euphonic answered 27/7, 2010 at 19:56 Comment(4)
sorry here's how i call jgrowl files <link rel="stylesheet" type="text/css" href="./include/jgrowl/jquery.jgrowl.css" /> <link rel="stylesheet" type="text/css" href="./include/jgrowl/css/redmond/jquery-ui-1.7.2.custom.css" /> <script type="text/javascript" src="./include/jgrowl/jquery.jgrowl.js"></script> <script type="text/javascript" src="./include/jgrowl/js.js"></script> – Euphonic
are you using blueprint.css per chance? – Polaris
no, just plain jgrowl... i checked the files and paths even redownloaded the files 3 times, still the same result – Euphonic
I had the same issue. I was using jquery-ui so. I found a solution in this other SO answeR: #3347913 – Homeless
F
25

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;
}
Flinger answered 26/8, 2010 at 18:7 Comment(2)
thanks, Nathan. Your answer helped me a lot in understanding else i was lost in the world of CSS.. :) – Shericesheridan
Nathan, you rock. I was trying all kinds of things to tame, circumvent or remove the ui- classes. Your answer was a lifesaver for me. I greatly appreciate your solid solution! – Safir
O
1

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
Outburst answered 30/7, 2010 at 17:46 Comment(2)
i tried it its overridden with the red color but the header and message classes are still in different color hinuts.com/sd.PNG check the shot – Euphonic
Take a look at my addition to the above post. – Outburst
T
0

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.

Treat answered 27/7, 2010 at 19:58 Comment(1)
its applied. but still coudn't figure out why its not styling as expected! – Euphonic
A
0

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.

Administrate answered 30/7, 2010 at 17:37 Comment(3)
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. – Administrate
Its not even included, this is my current jgrowl notification hinuts.com/sd.PNG – Euphonic
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. – Administrate

© 2022 - 2024 — McMap. All rights reserved.