CODEWITHSUNDEEP
jquery-ui
Theopile
Theopile

Reputation: 918

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

Upvotes: 2

Views: 385

Answers (2)

Steve
Steve

Reputation: 91

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>

Upvotes: 2

slifty
slifty

Reputation: 13771

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?

Upvotes: 1

Related Questions