17

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.

CJM
  • 11,908
  • 20
  • 77
  • 115

3 Answers3

16

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" />
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 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. – CJM Apr 02 '10 at 01:02
  • Scratch that last comment - I think I'm talking out of my hat. I'll check... :) – CJM Apr 02 '10 at 01:12
  • 2
    @CJM - These are CDN hosted as well, for example to pull redmond from google change your stylesheet link to: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css – Nick Craver Apr 02 '10 at 01:21
  • 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! – CJM Apr 02 '10 at 01:40
0

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.

Justin Ethier
  • 131,333
  • 52
  • 229
  • 284
0

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.

Ben
  • 16,275
  • 9
  • 45
  • 63