This is a migrated thread and some comments may be shown as answers.

How to use CSS for all ajax controls

3 Answers 39 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
wanlop
Top achievements
Rank 1
wanlop asked on 19 Jul 2012, 04:13 AM
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

3 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
answered on 19 Jul 2012, 05:28 AM
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.
0
Accepted
Bozhidar
Telerik team
answered on 19 Jul 2012, 06:25 AM
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.
0
wanlop
Top achievements
Rank 1
answered on 24 Jul 2012, 04:49 AM
Hi Shinu and telerik team,

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

Best Regards,
Ball
Tags
General Discussions
Asked by
wanlop
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Bozhidar
Telerik team
wanlop
Top achievements
Rank 1
Share this question
or