Custom skin and v 2008.3

[John]

I've just upgraded to the latest release and am very disappointed to discover that the custom skin for my RadCalendar no longer works because all the styles have been renamed in the latest release.

I cannot understand why this was done, nor why there was no information to indicate that it had been.

I had previously spent considerable time customizing this skin, and after upgrading spent some more time trying to work out why my skin wasn't working. Now, I have to spend even more time re-customizing the skin.

If you are using a custom skin on a RadCalendar and haven't upgraded to v 2008.3 yet, please be aware of this issue.

[Dimo]

Hello John,

We have announced about the change in a blog post almost a month ago:

http://blogs.telerik.com/DimoDimov/Posts/08-10-14/Optimized_Rendering_and_Skins_for_RadCalendar_for_ASP_NET_AJAX.aspx

and in our release notes last week:

http://www.telerik.com/products/aspnet-ajax/whats-new/release-history/q3-2008-version-number-2008-3-1105.aspx


Actually, migrating your custom skin to the latest version of RadCalendar is easy, you just need to modify the selectors following these guidelines (you can also refer to one of our skins located in the Skins subfolder of your RadControls installation to see how the selectors are organized)

Let us know if you need more information.


Calendar CSS classes

Old CSS class	New CSS class	Notes
table.calendarWrapper_Skin	table.RadCalendar_Skin
[no class]	td.rcTitlebar	wraps the titlebar table
table.titlebar_Skin	.RadCalendar_Skin .rcTitlebar table	[removed]
[no class]	td.rcTitle	contains the month name and year
[no class]	a.rcFastPrev	used in sprite mode only (when ImagesPath and ImageUrls are NOT set)
[no class]	a.rcPrev
[no class]	a.rcNext
[no class]	a.rcFastNext
[no class]	td.rcMain	wraps table.rcMainTable
table.TableLayout_Skin	table.rcMainTable
[no class]	tr.rcWeek	wraps the column headers (weekday names)
th.ViewSelector_Skin	th.rcViewSel
th.DaysOfWeek_Skin	.RadCalendar_Skin .rcWeek th	[removed] used for column headers
td.DaysOfWeek_Skin	.RadCalendar_Skin .rcRow th	[removed] used for row headers
[no class]	tr.rcRow	wraps all date rows except the column header row
td.radCalDefault_Skin	.RadCalendar_Skin .rcRow td	[removed]
td.otherMonth_Skin	td.rcOtherMonth
td.radCalWeekendDefault_Skin	td.rcWeekend
td.radCalHover_Skin	td.rcHover
td.radCalSelect_Skin	td.rcSelected
td.radCalToday_Skin	td.rcToday
td.outOfRange_Skin	td.rcOutOfRange
[no class]	td.rcHeader	wraps the header template
[no class]	td.rcFooter	wraps the footer template

Month/Year Fast Nagivation

Old CSS class	New CSS class	Notes
div.RadCalendarFastNavPopup	div.RadCalendarFastNavPopup
table.MonthYearFastNav_Skin	table.RadCalendarMonthView_Skin
td#RadCalendar_FastNav_Jan	td#rcMView_Jan
td#RadCalendar_FastNav_###	td#rcMView_###
td#RadCalendar_FastNav_PrevYears	td#rcMView_PrevY
td#RadCalendar_FastNav_NextYears	td#rcMView_NextY
td.selected_Skin	td.rcSelected
td.bottom_Skin	td.rcButtons
input#RadCalendar_FastNav_TodayButton	input#rcMView_Today
input#RadCalendar_FastNav_OkButton	input#rcMView_OK
input#RadCalendar_FastNav_CancelButton	input#rcMView_Cancel

TimeView

Old CSS class	New CSS class	Notes
table.radTimeTableCss_Skin	table.RadCalendarTimeView_Skin
th.radHeaderCss_Skin	th.rcHeader
td.radItemCss_Skin	.RadCalendarTimeView_Skin td	[removed]
td.radAlternatingItemCss_Skin	.RadCalendarTimeView_Skin td	[removed]
td.radTimeOverCss_Skin	td.rcHover
[no class]	td.rcFooter	wraps the footer template

DateTimePicker

Old CSS class	New CSS class	Notes
div.pickerWrapper_Skin	div.RadPicker_Skin
td.inputCell	td.rcInputCell
a.radPopupImage_Skin (pops a calendar)	a.rcCalPopup	used in sprite mode only (when ImagesPath and ImageUrls are NOT set)
a.radPopupImage_Skin (pops a timeview)	a.rcTimePopup
div.RadCalendarPopup	div.RadCalendarPopup	use to distinct when RadCalendar is popped

Calendar MultiMonth View

Old CSS class	New CSS class	Notes
[no class]	table.RadCalendarMultiView_Skin	applied together with .RadCalendar_Skin
[no class]	td.rcCalendars	wraps all month views
[no class]	td.rcCalendar	wraps a single month view
[no class]	td.rcFirstCol, td.rcLastCol, td.rcFirstRow, td.rcLastRow	these classes are applied to the same table cells from the previous line. Use to distinct first/last cells, e.g. when different border styles have to be set

Kind regards,
Dimo
the Telerik team

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

[John]

Hi Dimo

Thanks for your reply.

I did actually read the release notes, however I didn't interpret "All skins are reworked for the new rendering" as "all css classes have been renamed and your custom skin will break". I considered that 'skins' referred to the embedded skins which we are not using and therefore should not have had any impact on us.

With regards to the blogs - there are a significant number of posts there and I simply don't have time to regularly check for new ones that may or may not be relevant to our development.

I appreciate the guidelines you've posted, they should make it easier for us to fix our skin.