jQuery datepicker prev and next buttons not showing, how to point at theme folder images in css

Question

I have used the jQuery ui datepicker to successfully add a calendar control to my textbox, but the previous and next buttons are not visible although the containing tag works functionally when clicking

The how can I modify this to show the icons shown on the http://jqueryui.com/datepicker/ when these images are found within my web package at ..\Content\theme\base\images and not the locations shown below

.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);
}

Do I need to call the image within css in a similar fashion to how images are called from within my c# code? As in:

"@Url.Content("~/Content/theme/base/images/ui-icons_222222_256x240.png")"

Answer 1

Make sure your jquery-ui.min.css is pointing to the correct file for the images. The console should show an error when you are attempting to load the icons.

For example, If this is the location of your CSS file: http://example.com/css/jquery-ui.min.css, then the icon file should be in http://example.com/css/images/ui-icons_222222_256x240.png. The link in the CSS file is relative to the CSS file, not the HTML file loading it.

Answer 2

You are almost there.

Just ensure you change your url and add the "!important" at the end of the line.

This will allow you to add any image you wish.

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

Hope this works for you.