prev/next icons not showing in customized jquery datepicker theme

Question

I implemented jQuery DatePicker in my VS2010 project and it works fine with one small issue. When I implemented a custom theme, I lost my prev and next icons (for moving through the months).

Here's the image:

Here are the jquery library references:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="~/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="~/lightbox/js/lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="~/lightbox/css/lightbox.css" media="screen" />
<link type="text/css" rel="Stylesheet" href="~/Scripts/jquery-ui-1.8.9.custom.css" />

Here are my image references in jquery-ui-1.8.9-custom.css

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(~/images/jquery/ui-icons_d8e7f3_256x240.png); }
.ui-state-default .ui-icon { background-image: url(~/images/jquery/ui-icons_6da8d5_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(~/images/jquery/ui-icons_217bc0_256x240.png); }
.ui-state-active .ui-icon {background-image: url(~/images/jquery/ui-icons_f9bd01_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(~/images/jquery/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(~/images/jquery/ui-icons_cd0a0a_256x240.png); }

I modified the path to be sure it pointed to the files. Not sure what I'm missing.

Any help would be greatly appreciated.

Thanks.

Answer 1

Are you sure your paths are pointing correctly (AKA, are you seeing the jQuery UI icons elsewhere in your site)? That is the first thing I would check...particularly because you modified the path. You may have inadvertently screwed something up.

Update

I think you need to fix your paths - I don't think they are pointing correctly. From what I see, they have to be relative to your .custom.css file. So, for example, my jquery-ui-1.8.9.custom.css file exists in my Content folder. My states and images are referenced like this:

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }

Therefore, I have to place an images folder at the same level as the jquery-ui-1.8.9.custom.css and place all the images inside that folder. Try that and see if it fixes the problem for you.

Answer 2

For me, the issue was that the Themeroller was adding double quotes around the image paths. I just removed those from my custom CSS file, and everything worked.

i.e. I changed:

url("images/ui-bg_highlight-hard_100_fafaf4_1x100.png")

to:

url(images/ui-bg_highlight-hard_100_fafaf4_1x100.png)

throughout the whole CSS file.

Answer 3

I also was having this problem. I was pulling my hair out. But yes, JasCav is correct, you must put an "images" folder at the same level as your query-ui-1.8.9.custom.css (or in my case jquery-ui-1.8.16.custom.css) file. And inside this folder copy your *.png files from your jquery ui download.

Answer 4

I had the exact same problem and finally solved it.

The problem was coming from the rights on the 'images' directory. I had to make the directory browsable for 'others' by using chmod:

chmod o+rx images

I hope this helps