jQuery datepicker przyciski prev i next nie wyświetlają się, jak wskazywać na obrazy folderów motywów w css

Question

Użyłem jquery ui datepicker, aby z powodzeniem dodać kontrolkę kalendarza do mojego pola tekstowego, ale poprzednie i następne przyciski nie są widoczne, chociaż zawiera tag działa funkcjonalnie po kliknięciu:

W jaki sposób mogę to zmienić, aby pokazać ikony wyświetlane na http://jqueryui.com/datepicker/, gdy te obrazy zostaną znalezione w moim pakiecie internetowym w .. \ Content \ theme \ base \ images, a nie w lokalizacjach przedstawionych poniżej

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

Czy muszę wywoływać obraz wewnątrz css w podobny sposób, jak nazywa się obrazy? m w moim kodzie C#? Tak jak w:

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

Answer 1

Upewnij się, że Twój jquery-ui.min.css wskazuje właściwy plik obrazów. Konsola powinna pokazywać błąd podczas próby załadowania ikon.

Na przykład, jeśli jest to lokalizacja pliku CSS: http://example.com/css/jquery-ui.min.css, plik ikony powinien być w formacie http://example.com/css/images/ui-icons_222222_256x240.png. Link w pliku CSS jest związany z plikiem CSS, a nie z plikiem HTML ładującym go.

Answer 2

Już prawie jesteś.

Po prostu upewnij się, że zmieniasz adres URL i dodajesz "! Important" na końcu linii.

To pozwoli ci dodać dowolny obraz, który chcesz.

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

Mam nadzieję, że to zadziała.

Answer 3

zauważyłem z komunikatem o błędzie, że strona szukał w:

http://site/Content/images/image.png

Nie jestem pewien, dlaczego, od Mooseman za odpowiedź:

łącza w CSS plik jest względny do pliku CSS, a nie do pliku HTML ładującego go.

Wydaje się, że związek był krewny z site.css (który jest zawarty w Content) zamiast Jquery-ui.mincss, a więc najwyraźniej nie mógł znaleźć PNG.

Po zmianie ścieżki w JQuery-ui.min.css do

themes/base/images/image.png

on teraz działa idealnie.