Changing Font in FormDecorator Custom Skin

9 posts, 0 answers
  1. Nathan
    Nathan avatar
    52 posts
    Member since:
    Apr 2011

    Posted 08 Nov 2011 Link to this post

    I'm using the FormDecorator to decorate all controls. All looks great, but I would like to change the font being used to Calibri 11pt. I'm using a custom skin created for the FormDecorator which is placed in App_Themes. I've tried setting the font here, but no luck.

    I attempted to set the font for all labels and buttons. Below are the changes I made to the FormDecorator (changes bold):
    .RadForm_CustomSkin.rfdLabel label
    {
    color: #000;
    font-size:11pt;
    font-family: Calibri, Arial, Verdana;

    }
    *html .RadForm_CustomSkin a.rfdSkinnedButton,
    *html .RadForm_CustomSkin .rfdSkinnedButton button,
    *html .RadForm_CustomSkin .rfdSkinnedButton input.rfdDecorated,
    .RadForm_CustomSkin.rfdButton a.rfdSkinnedButton,
    .RadForm_CustomSkin.rfdButton a.rfdSkinnedButton *
    {
    background-image: url('FormDecorator/ButtonSprites.gif');
    color: #000;
    font-size:11pt;
    font-family: Calibri, Arial, Verdana;


    }

    When I view the label from the IE developer toolbar, I see that ".rfdLabel.RadForm Label" is still using 12px Segoe UI, but I dont see this style anywhere in my custom skin. Could you please help me change the font for these controls?

    Thanks!!
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 09 Nov 2011 Link to this post

    Hi Nathan,

    Could you try to use the !important rule in order to override the existing basic styles:

    .RadForm_CustomSkin.rfdLabel label
    {
    color: #000;
    font-size:11pt !important;
    font-family: Calibri, Arial, Verdana !important;
    }
    *html .RadForm_CustomSkin a.rfdSkinnedButton,
    *html .RadForm_CustomSkin .rfdSkinnedButton button,
    *html .RadForm_CustomSkin .rfdSkinnedButton input.rfdDecorated,
    .RadForm_CustomSkin.rfdButton a.rfdSkinnedButton,
    .RadForm_CustomSkin.rfdButton a.rfdSkinnedButton *
    {
    background-image: url('FormDecorator/ButtonSprites.gif');
    color: #000;
    font-size:11pt !important;
    font-family: Calibri, Arial, Verdana  !important;
     
    }


    Best wishes,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nathan
    Nathan avatar
    52 posts
    Member since:
    Apr 2011

    Posted 15 Nov 2011 Link to this post

    Thanks for your quick response. I tried this but unfortunately it did not work. Could the controls be using the "Default" skin as opposed to the styling provided by the Form Decorator? If so, how can I determine this?

    One of my labels used this style: .rfdLabel.RadForm Label
    One of the styles I changed in Form Decorator is ".RadForm_CustomSkin.rfdLabel label". Notice my custom skin is named "CustomSkin".

    Thanks,
    Nathan
  5. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 16 Nov 2011 Link to this post

    Hi Nathan,

    I have tried the following code and it changes the font family and font size. It will work in all skin nevertheless if this is embedded or custom:

    <%@ 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">
            html.RadForm.rfdTextbox input[type="text"],
            html.RadForm.rfdTextbox input[type="password"],
            html.RadForm.rfdTextarea textarea,
            html.RadForm.rfdTextarea textarea[disabled]:hover,
            html.RadForm.rfdTextbox input[disabled][type="text"]:hover,
            html.RadForm.rfdTextbox input[disabled][type="password"]:hover,
            html.RadForm .rfdCheckboxChecked,
            html.RadForm .rfdInputDisabled.rfdCheckboxChecked:hover,
            html.RadForm .rfdCheckboxUnchecked,
            html.RadForm .rfdInputDisabled.rfdCheckboxUnchecked:hover,
            html.RadForm.rfdLabel label,
            html.RadForm .rfdAspLabel,
            html.RadForm .rfdRadioUnchecked,
            html.RadForm .rfdInputDisabled.rfdRadioUnchecked:hover,
            html.RadForm .rfdRadioUnchecked:hover,
            html.RadForm .rfdRadioChecked,
            html.RadForm .rfdInputDisabled.rfdRadioChecked:hover,
            html.RadForm .rfdRadioChecked:hover,
            html.RadForm .riTextBox, /* prevents text flcikering in IE8, when TadTextBox is used with RDF */
            html.RadForm .rfdValidationSummaryControl,
            html.RadForm .rfdLoginControl,
            html.RadForm legend
            {
                font-size: 11pt;
                font-family: Calibri, Arial, Helvetica, sans-serif;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="sm1" runat="server" />
        <telerik:RadSkinManager runat="server" ShowChooser="true"></telerik:RadSkinManager>
        <br />
        <br />
        <telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" />
        <label>Decorated Label</label>
        <asp:TextBox runat="server" Text="Decorated textBox"></asp:TextBox>
        </form>
    </body>
    </html>


    Best wishes,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  6. Nathan
    Nathan avatar
    52 posts
    Member since:
    Apr 2011

    Posted 16 Nov 2011 Link to this post

    Got it! My Form Decorator was not referencing the custom skin. 

    BEFORE:
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="all"  />
            
    AFTER:
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="all" Skin="CustomSkin" EnableEmbeddedSkins="false"  />
            
    Thanks for your help!
  7. Nathan
    Nathan avatar
    52 posts
    Member since:
    Apr 2011

    Posted 16 Nov 2011 Link to this post

    I'm actually still having an issue with the buttons. I was able to update the Form Decorator control by setting the skin to my "CustomSkin". This corrected the issue I was having with Labels, Textboxes, and Checkboxes. However, the button controls seem to still be set to a default skin rather than the Form Decorator styles.

    I have a test page with the following:
     <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="all" Skin="CustomSkin" EnableEmbeddedSkins="false"  />
           
            <telerik:RadButton ID="btnTelerik" runat="server" Text="Telerik"></telerik:RadButton>
            
            <asp:Button ID="btnASP" runat="server" Text="ASP" />
          
            <asp:CheckBox ID="chkASP" runat="server" Checked="true" Text="ASP Checkbox" />
            
            <telerik:RadTextBox ID="txtTelerik" runat="server" Text="Telerik"></telerik:RadTextBox>
            
            <asp:TextBox ID="txtASP" runat="server" Text="ASP"></asp:TextBox>

    When I view the Telerik button through IE Developer Toolbar, I see the class is being set to "rbDecorated" and it's not pointing to the FormDecorator CSS. It seems it's still trying to use a default skin rather than CSS. Is this normal for Telerik buttons - can they not be styled using Form Decorator?
  8. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 17 Nov 2011 Link to this post

    Hello Nathan,

    Note that RadFormDecorator will decorate all input controls, but RadButton is different controls and has nothing to do with FormDecorator. To make you RadButtons look the same way as asp:buttons decorated by FormDecorator custom skin, you will need to create RadButton Custom Skin also. Note that you should apply to RadButton the Skin="CustomSkin" EnableEmbeddedSkins="false" properties in order to make it work.

    All the best,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  9. Nathan
    Nathan avatar
    52 posts
    Member since:
    Apr 2011

    Posted 17 Nov 2011 Link to this post

    Should I be using regular ASP buttons except for special conditions such as a button with custom styling? Currently we have replaced our button controls with Telerik buttons.

    Could you help me determine if it would be best to use telerik with a custom skin setting or a regular ASP button styled using the Form Decorator?

    Thanks,
    Nathan
  10. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 17 Nov 2011 Link to this post

    Hello Nathan,

    It`s a developer`s decision to choose between RadFormDecorator Buttons or RadButtons.
    In shortly RadFromDecorator just decorates the input controls it does not bring any additional functionality to the button.

    When you need the features of the standard asp Button, LinkButton and ImageButton controls enhanced with built-in text and images, toggle and split button modes and rich client side API, RadButton for ASP.NET AJAX is the control that can easily fulfill all these requirements.

    You could use both controls, but then you should have custom skins for both of them. Let`s say you want to have an ordinary ASP button that just applies a form - then I would recommend to use asp formdecorated button. However if you like to put some nice looking icon into your button, you could use the Embedded icons for RadButton.

    All the best,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017