[Solved] RadDatePicker custom skin for sharing embedded calendar still refer to Telerik WebResource

[Andrew Zhao]

I have two RadDatePicke controls which share a embedded calendar control. I created the custom skin for RadInput and RadCalendar, and tried to customize the popup calendar look and feel. Howerer, many times, the CSS is referred to Telerik WebResource instead of my customized local CSS file. How to avoid the reference to Telerik WebResource? Please advise it.
WebForm.aspx

    <link href="../Skins/NonTrans/Calendar.NonTrans.css" rel="stylesheet" type="text/css" />
    <link href="../Skins/Calendar.css" rel="stylesheet" type="text/css" />
    <link href="../Skins/NonTrans/Input.NonTrans.css" rel="stylesheet" type="text/css" />
    <link href="../Skins/Input.css" rel="stylesheet" type="text/css" />
        <table style="border-bottom: 1px dotted #EFEFEF; margin-bottom: 8px; font-size: 11px;" width="90%">
        <tr>
            <td colspan="4" style="padding-bottom:8px;">
            <asp:Label ID="CustomDateRangeLabel" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
            <asp:Label ID="DateRangeFromLabel" runat="server" AssociatedControlID="fromDatePicker"></asp:Label>
            </td>
            <td>
            <telerik:RadDatePicker ID="fromDatePicker" runat="server"
                Width="120px"
                BackColor="White"
                BorderWidth="0"
                AutoPostBack="false"
                ZIndex="8000"
                TabIndex="12"
                Font-Names="verdana, arial, sans-serif"
                DateInput-EmptyMessage="MM/DD/YYYY"
                DateInput-AccessKey="F"
                Skin="NonTrans"
                EnableEmbeddedSkins="false"
                SharedCalendarID="SharedCalendar"
                OnSelectedDateChanged="RadDatePicker_OnSelectedDateChanged">
                <ClientEvents OnDateSelected="FromDateSelected" />
            </telerik:RadDatePicker>
            </td>
            <td>
            <asp:Label ID="DateRangeToLabel" runat="server" AssociatedControlID="toDatePicker"></asp:Label>
            </td>
            <td>
            <telerik:RadDatePicker ID="toDatePicker" runat="server"
                Width="120px"
                BackColor="White"
                BorderWidth="0"
                ZIndex="8000"
                TabIndex="14"
                DateInput-AccessKey="T"
                Font-Names="verdana, arial, sans-serif"
                AutoPostBack="false"
                DateInput-EmptyMessage="MM/DD/YYYY"
                Enabled="true"
                Skin="NonTrans"
                EnableEmbeddedSkins="false"
                SharedCalendarID="SharedCalendar"
                OnSelectedDateChanged="RadDatePicker_OnSelectedDateChanged">
                <ClientEvents OnDateSelected="ToDateSelected" />
                <DatePopupButton onblur="CloseDropDown()" />
            </telerik:RadDatePicker>
            </td>
        </tr>
        </table>
            <telerik:RadCalendar ID="SharedCalendar" runat="server"
                Skin="NonTrans"
                EnableEmbeddedSkins="false"
                EnableEmbeddedBaseStylesheet="false"
                ShowRowHeaders="false"
                CssClass="datepicker"
                TabIndex="13"
                ShowOtherMonthsDays="false"
                DayNameFormat="Short"
                DayStyle-Font-Bold="true"
                DayOverStyle-Font-Bold="true">
            </telerik:RadCalendar>

FireBug Window

.RadCalendar .rcMain .rcRow a, .RadCalendar .rcMain .rcRow span {
display:block;
padding:1px 5px 1px 0;
text-decoration:none;
}
Teleri...f65231b (line 665)

.RadCalendar .rcMain .rcRow a, .RadCalendar .rcMain .rcRow span {
display:block;
padding:1px 1px 1px 0;
text-decoration:none;
}
Calendar.css (line 121)

.RadCalendar_NonTrans .rcMain .rcRow a, .RadCalendar_NonTrans .rcMain .rcRow span {
color:#405EBE;
padding:1px 1px 1px 0;
text-align:center;
}

[Dimo]

Hi Andrew Zhao,

Based on the code snippet, it looks like you have custom base stylesheets as well (Calendar.css and Input.css). If this is the case, please set EnableEmbeddedBaseStylesheet="false" to the DatePickers.

Note that if you have other DatePickers, Calendars or Inputs on the page, they will still register their base stylesheets and they will override your custom styles. In order to prevent this, you should either disable these controls' base styles as well, or increase the specificity of your custom base styles. For more information about specificity, please refer to:

http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

Best wishes,
Dimo
the Telerik team