How to use CSS for all ajax controls

4 posts, 2 answers
  1. wanlop
    wanlop avatar
    16 posts
    Member since:
    Nov 2010

    Posted 18 Jul 2012 Link to this post

    Hi,

    We are working on our project by your product.
    We try to create a style sheet file to control all font style in web applications.

    In a style we have define font-name and font-size follow the below style.

        body, td ,input
            {
                font-size: 10pt;
                font-family:MS Sans Serif;
                font-style:normal;
                 font-variant:normal;
                font-weight:normal
            }

    Then we found that it does't any affect to your controls (etc. combobox).

    What should we do for use CSS style in your controls.

    Best Regards
    Wanlop Niwatsreesuphun
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Jul 2012 Link to this post

    Hello,

    Make sure that you are overriding the default styles using the !important specifier.
    CSS:
    <style type="text/css">
          body, td ,input
            {
                font-size: 10pt !important;
                font-family:MS Sans Serif !important;
                font-style:normal !important;
                 font-variant:normal !important;
                font-weight:normal !important;
            }
    </style>

    Thanks,
    Shinu.
  3. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 19 Jul 2012 Link to this post

    Hello,

    As Shinu mentioned, to ensure that your CSS selectors are heavier, you could use !important rule. The following example shows what CSS should be applied in order to oveeride the fonts styles for RadFormDecorator, RadButton and RadDock. The easiest way is to use FireBug for FireFox or WebDeveloperToolBar for Internet Explorer to find, which elements exactly should be overridden:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            body,
            td,
            input,
            .RadDock *,
            .RadForm * {
                font-size: 10pt !important;
                font-family: MS Sans Serif !important;
                font-style: normal !important;
                font-variant: normal !important;
                font-weight: normal !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" />
        <telerik:RadButton runat="server" Text="FontSize Changed">
        </telerik:RadButton>
        <asp:CheckBox runat="server" ID="chb1" Text="Changed font size" />
        <telerik:RadDock ID="dock1" runat="server" Title="Changed Font Size" Top="100">
            <ContentTemplate>
                <p>
                    Changed Font Size
                </p>
            </ContentTemplate>
        </telerik:RadDock>
        </form>
    </body>
    </html>


    Kind regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  4. wanlop
    wanlop avatar
    16 posts
    Member since:
    Nov 2010

    Posted 23 Jul 2012 Link to this post

    Hi Shinu and telerik team,

    Thanks for the your help. You respond very quickly.
    Your answers it really helped me.

    Best Regards,
    Ball
Back to Top