CSS: Images not showing for JQuery datepicker

Question

I am using the datepicker from here: https://jqueryui.com/datepicker/

I clicked on view source there, then copied the code.

The three below lines:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

I copied the scripts/css and saved them locally, I then downloaded the smoothness template, unzipped it, put the images in /images on my server but the arrows images don't display, this is how it looks: http://postimg.org/image/bcnvipy61/

Have I copied the images in the wrong place or something? (I am not good with CSS)

EDIT (after reading the below comments:

<link rel="stylesheet" href="css/jquery-ui.css">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui.js"></script>

so the paths are:

css/
js/
images/

Solution

This section of the jquery-ui.css file controls all of the icons:

.ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}
.ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}
.ui-state-default .ui-icon {
    background-image: url("images/ui-icons_888888_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
    background-image: url("images/ui-icons_454545_256x240.png");
}
.ui-state-active .ui-icon {
    background-image: url("images/ui-icons_454545_256x240.png");
}
.ui-state-highlight .ui-icon {
    background-image: url("images/ui-icons_2e83ff_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url("images/ui-icons_cd0a0a_256x240.png");
}

It uses ui-icon images as a background and changes the background position.

E.g.:

.ui-icon-arrow-1-e { background-position: -32px -32px; }

to find the right icon.

The point is the the path in the first section is relative so if you css lives in the directory above images it works great.

E.g. Doing something like this:

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>

but if you want it to live in a css directory in a sibling directory or elsewhere you either have to provide absolute links to the images in the site or skip upward enough directories to indicate where to find that image directory. So just change the jquery-ui.css file appropriately to match what you want to do.

E.g. change to:

.ui-widget-content .ui-icon {
        background-image: url("/images/ui-icons_222222_256x240.png");
 }

or:

.ui-widget-content .ui-icon {
        background-image: url("../images/ui-icons_222222_256x240.png");
}

Sorry, probably too much extraneous info there, but I was on a roll...

Comments

[Abdulla Nilam]

Did you include JS Library??

[Jorge F]

If you downloaded the theme from jqueryui, you should put the jquery-ui.css on your css folder (in case you use it that way) and then in your css file, you could change the directory with ../images/image.png in case you have the css folder and an image folder

[Abdulla Nilam]

<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/…>

[Ryan]

I made an edit above to show you how I call the stylesheet and javascript

[Jorge F]

Well then in your jquery-ui.css you should change the images/ path you can find in that file and change that to ../images/. It should work that way. Of course you should have all the jqueryui images in the images folder

[Ryan]

Hey! Thanks for the details, better more than less in most cases :) but it's confused me more here, especially this part The point is the the path in the first section is relative so if you css lives in the directory above images it works great. Does that mean you want me to move /css to /images/css ?

[l.j. cooper]

No actually, leave things where they are and edit the css file to point to the correct path either as an absolute: /images/ui-icons_222222_256x240.png - now it doesn't matter where the css lives it will always look in the root of the site and then decend to the images directory to find the images; or relative ../images/ui-icons_222222_256x240.png - if the css lives in a /css directory it goes up one directory (..) then decends into the images directory. Or do away with the css directory and put the css file in the root (which just seems like it'll cause you organizational headache later)

[I'm here for Winter Hats]

I changed the location of my images, outside of the default image folder and linking to their new location was not working. I tried your solution. Adding the "../" to any path solved my issue. Hopefully this helps others as well.