tags:

views:

24

answers:

2
+1  Q: 

jQuery UI Themes

So I downloaded a jQuery UI Theme and link it, but it looks nothing like the them on the site. The buttons are huge and so is the text.

<link rel="stylesheet" type="text/css" href="/css/trontastic/jquery-ui-1.8.2.custom.css">
$('#Delete').dialog({
                modal: true,
                autoOpen: false,
                title: "Delete?",
                buttons: {
                    "Yes": function(){
                        $(this).dialog('close');
                        $('li#'+$id).remove();
                        $('.nav').sortUpdate();
                    },
                    "No":function(){
                        $(this).dialog('close');
                    }
                },
                draggable: false,
                resizable: false
    });

Am I missing something or is there addition css that I have to handcode? Thanks

+1  A: 

Download the Firebug plugin for Firefox. Then right click the element that looks funny and click "Inspect Element" to see where the styles are coming from. (For more info, check http://www.kristarella.com/2009/02/how-to-use-firebug-for-css/ )

It is possible your CSS isn't being linked to properly (it isn't a relative link) -- Is the css folder in your root?

slifty
+1  A: 

The font sizes in the jQuery themes are all relative sizes using the em scale. Start by setting the font-size in the body tag, the theme will work from that.

All the jQuery demos use:

body {
    font-size: 62.5%;
}

As in the jQuery demo css file found at: http://jqueryui.com/demos/demos.css

OR try setting like this:

<body style="font-size:72%;">
... etc ...
</body>
Steve