Question

I’m trying to install jQuery UI with a ThemeRoller theme for the first time. I’ve downloaded jquery 1.4.2… I’ve downloaded jQuery UI with a couple of themes. I’ve tried to follow the instructions but they seem contradictory and don’t seem to related to the downloaded files.

When I try to use a datepicker… the datepicker functionality works, but it has the default (grey) style.

This page refers to a folder/sub-folder/css files that don’t exist. This page refers to a ui.theme.css file that doesn’t exist.

The downloads I received included the following:

--development-bundle
---demos
----docs
----external
----themes
------base
------Redmond
----ui
------i8n
------minified
--js

So what do you put where? I’ve copied the js to the appropriate directory and linked it into my page. And I copied the themes/base folder as well, and linked into the jquery.ui.all.css file. Even the included demos only display the default (grey) styling.

Where am I going wrong?

EDIT:

Sorry, I actually tried Redmond first, but when it didn’t work, I tried Smoothness (a random selection -didn’t realise it was the grey one). I get the same results for each – grey.
[also corrected folder structure above]

EDIT 2:
Well, I’ve figured it out…. neither of the initial Smoothness or Redmond downloads had a CSS folder (as could be seen from the structure I described above). Both of these themes were downloaded within minutes of each other and have different file sizes).
I’ve just tried downloading Cupertino, which does have a CSS folder – when I copy this to my app, I get appropriate styling.

So I tried downloading Redmond again, and lo and behold – it also now has a CSS folder…
I wondered if I might have downloaded the same theme twice, but they have different timestamps and different file sizes… I’m puzzled. Perhaps the jQuery server was just having a brain-fart!

Todays gold star goes to nick for putting me onto the trail of jquery-ui-1.8.custom.css, which eventually led to my epiphany!

EDIT 3:

I’ve just started downloading Start and Humanity – both zip files DO NOT have a CSS folder!

Digging further, it seems I might not be crazy after all.

Answer 1

You need to change this link in your head, it should be in this format:

<link rel="Stylesheet" href="/css/MY_THEME_HERE/jquery-ui-1.8.custom.css" />

For example, if you downloaded the redmond theme would be:

<link rel="Stylesheet" href="/css/redmond/jquery-ui-1.8.custom.css" />

Whatever theme you chose when downloaded should be included in the zip at this path. If you built a custom theme, it will be:

<link rel="Stylesheet" href="/css/custom-theme/jquery-ui-1.8.custom.css" />