Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Changing Font in FormDecorator Custom Skin

8 Answers 149 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Nathan
Top achievements
Rank 2
Nathan asked on 08 Nov 2011, 05:26 PM
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!!

8 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 09 Nov 2011, 01:55 PM
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.
0
Nathan
Top achievements
Rank 2
answered on 16 Nov 2011, 12:11 AM
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
0
Bozhidar
Telerik team
answered on 16 Nov 2011, 09:28 AM
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.
0
Nathan
Top achievements
Rank 2
answered on 16 Nov 2011, 08:56 PM
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!
0
Nathan
Top achievements
Rank 2
answered on 16 Nov 2011, 10:10 PM
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?
0
Bozhidar
Telerik team
answered on 17 Nov 2011, 08:36 AM
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.
0
Nathan
Top achievements
Rank 2
answered on 17 Nov 2011, 04:33 PM
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
0
Bozhidar
Telerik team
answered on 17 Nov 2011, 05:05 PM
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.
Tags
FormDecorator
Asked by
Nathan
Top achievements
Rank 2
Answers by
Bozhidar
Telerik team
Nathan
Top achievements
Rank 2
Share this question
or