Custom Skin

[pmessina]

I've been working with the Telerik AJAX controls and creating custom skins for quite a few them, so I have the process down pat. The only one for some reason I can not seem to figure out is the datepicker. When I add the calendar.AnySkin.css to my skin folder none of the datepicker images can be found. I looked in the css sheet for calendar and none of the images are referenced in there which makes senses as it is for a calendar control and not a datepicker. When I do a text search on all of Telerik skins to find out which css I'm missing the image its calling does not appear in any style sheets. So my question is what am I missing?

[Dimo]

Hello Peter,

The image buttons for Rad Date/Time Pickers and the 4 navigation buttons in the RadCalendar titlebar are not referenced in the skins, they are simple <img /> elements. In order to tell the controls where they are when using a custom skin, you need to specify the ImagesPath property:

<telerik:RadDatePicker ImagesPath="~/some_folder/"  />

<telerik:RadCalendar ImagesPath="~/some_folder/"  />


In the location, specified by ImagesPath, you have to put images with the following names:

datePickerPopup.gif    (used by date picker)
datePickerPopupHover.gif    (used by date picker)

clock.gif       (used by time picker)
clockHover.gif    (used by time picker)

fastNavLeft.gif    (used by calendar)
arrowLeft.gif    (used by calendar)
arrowRight.gif    (used by calendar)
fastNavRight.gif    (used by calendar)


Alternatively to setting ImagesPath, you can specfy ImageURLs:


<telerik:RadDateTimePicker   DatePopupButton-ImageUrl=""   DatePopupButton-HoverImageUrl=""   TimePopupButton-ImageUrl=""   TimePopupButton-HoverImageUrl=""/>


<telerik:RadCalendar  NavigationNextImage="" NavigationPrevImage="" FastNavigationNextImage="" FastNavigationPrevImage=""   />


Take a look at the following help article and let us know if you need more information:

Customizing the Navigation Controls


Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[pmessina]

Thank you for the response and that worked perfect. I'm kinda curious about the reasoning for this. I've been working with Teleriks for quite some time now and everything follows an object oriented path as it should, but a bandied such as this instead of having a separate css seams to go against the grain. Was this a bug or a decision in development? 

[Dimo]

Hi Peter,

RadCalendar still uses some of Telerik's old conventions about HTML and CSS usage. However, we are currently changing this, so you will probably see an image-less control (using CSS sprites only) with significantly decreased HTML output and optimized CSS skins for Q3 2008  :)


Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.