Custom skin and v 2008.3

3 posts, 0 answers
  1. John
    John avatar
    6 posts
    Member since:
    Dec 2007

    Posted 10 Nov 2008 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 10 Nov 2008 Link to this post

    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.
  3. John
    John avatar
    6 posts
    Member since:
    Dec 2007

    Posted 10 Nov 2008 Link to this post

    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.
Back to Top