jQuery dialog theme and style

Question

How do I change the background color of the title bar of a jQuery dialog?

I have looked at the themeroller but it does not seem to work for me.

Thanks

Answer 1

You can change it by modifying the ui-dialog-titlebar CSS class, but I highly recommend you to use the ThemeRoller tool.

See also:

• UI/Dialog/Theming
• UI/Theming/API

Answer 2

I do this way (adding "ui-state-error" style for header):

<script type="text/javascript">
            $(function () {
                $("#msg").dialog({
                    open: function () {
                        $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
                    }

                });

            });
        </script>  

Answer 3

There are classes associated with each element in the dialog.

Use Firebug to inspect the elements and use CSS to style them. For example, the title bar has the class "ui-dialog-titlebar".

(this assumes that you are using the jQuery UI Dialog)