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

2 posts, 0 answers
  1. Andrew Zhao
    Andrew Zhao avatar
    11 posts
    Member since:
    Mar 2010

    Posted 14 Jul 2010 Link to this post

    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;
    }
  2. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 15 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top