Achieve 3D effect with DatePicker

4 posts, 2 answers
  1. Greg Barretta
    Greg Barretta avatar
    10 posts
    Member since:
    Jan 2010

    Posted 15 Jan 2010 Link to this post

    I am looking for the 3d effect that I can achieve using ASP controls such as textbox, dropdownlistbox etc by simply setting BackColor to White. I have found I can achieve this with RadTextBox by setting the backcolor along with setting Skin="". If I do that with datapickers or comboboxes, I lose all of the graphics associated with the controls. Any ideas on how to achieve this effect aside from designing a custom skin? Thanks
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8451 posts

    Posted 18 Jan 2010 Link to this post

    Hello Greg,

    Here is what you can do to achieve the desired look for the RadDatePicker's textbox:

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    <style type="text/css">
     
    .RadPicker .RadInput .riTextBox
    {
        border-style:inset solid solid inset;
        border-width:2px 1px 1px 2px;
        border-color:#aaa #ccc #ccc #aaa;
    }
     
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" />
     
    </form>
    </body>
    </html>


    As for the RadComboBox, I am not sure how exactly do you imagine the control should look like, but if you need it exactly as a regular asp:DropDownList, a custom skin is the only solution.


    Greetings,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Greg Barretta
    Greg Barretta avatar
    10 posts
    Member since:
    Jan 2010

    Posted 19 Jan 2010 Link to this post

    Great, that answered that question but raises another. I have not been able to define formatting in an css file without using cssclass. Your answer helped me to get an idea of what it needs to look like. I am trying to define the formating to apply to all Telerik controls, starting with RadTextBox. I tried to look at the html after rendering and by looking at the RadDatepicker and RadTextbox class definitions it appears that for textbox, it should read

    .RadInput .riTextBox
    {
        border-style:inset solid solid inset;
        border-width:2px 1px 1px 2px;
        border-color:#aaa #ccc #ccc #aaa;

    }


    This does not work. Can you tell me what this needs to be for TextBox, and give me some insight on how these are defined so I can easily determine myself what it is for the other controls without having to ask every time? Thanks!
  4. Answer
    Dimo
    Admin
    Dimo avatar
    8451 posts

    Posted 20 Jan 2010 Link to this post

    Hello Greg,

    The specificity of your CSS selector is lower than the one in the RadInput skins. Please use

    html body form .RadInput .riTextBox
    {
        border-style:inset solid solid inset;
        border-width:2px 1px 1px 2px;
        border-color:#aaa #ccc #ccc #aaa;
    }

    or

    .RadInput .riTextBox
    {
        border-style:inset solid solid inset !important;
        border-width:2px 1px 1px 2px !important;
        border-color:#aaa #ccc #ccc #aaa !important;
    }

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

    (pay attention to the links at the end)

    Sincerely yours,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top