jQuery UI ThemeRoller - Installing themes

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.

Emilie

So, did you just install your custom theme stuff in the base folder? – Goods

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" />

Respective

The jquery-ui-1.8.custom.css file is actually in the js sub-folder, but I've copied it (and the UI js file) to another folder - my css link is correct. – Emilie

Scratch that last comment - I think I'm talking out of my hat. I'll check... :) – Emilie

@Emilie - These are CDN hosted as well, for example to pull redmond from google change your stylesheet link to: ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/… – Respective

Nick, thanks yeah, I know google hosts this stuff, but without understanding what was supposed to be going on I probably wouldn't have been much use. The lack of a CSS sub-dir completely threw me! – Emilie

Answer 2

Smoothness is a grey theme - are you sure that it is not setup correctly? Maybe try one of the more colorful themes and see if it matches up with themeroller.

Glauconite

Sorry - I actually tried redmond first - same results (see above) – Emilie

Answer 3

Smoothness is the "default" gery theme you get when you download jquery ui. When you roll your own theme then the css directory should have a "custom" directory which has your rolled theme.

Are you sure you didn't selected the smoothness teheme while downloading jqueryUI instead of custom or another theme?

Sometimes, when you change a theme you need to actually reload the page (f5) to see the changes.

Balneal