How do you change button font size?

14 posts, 0 answers
  1. ADe
    ADe avatar
    42 posts
    Member since:
    Jul 2008

    Posted 22 Mar 2009 Link to this post

    Is there a way to change the font and it's size in buttons that are skinned with the FormDecorator? I've tried putting the values in the formdecorator css all over the place and it never seems to take effect.
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 23 Mar 2009 Link to this post

    Hello ADe,

    You can do this by modifying the following selectors:
    .rfdSkinnedButton span.rfdInner 
     


    Regards,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ADe
    ADe avatar
    42 posts
    Member since:
    Jul 2008

    Posted 23 Mar 2009 Link to this post

    Added the following to my stylesheet and it made no difference..

    .rfdSkinnedButton span.rfdInner   
    {   
        font-familyVerdanaArialSans-serif;  
        font-size11px;  
    }  
  5. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 23 Mar 2009 Link to this post

    Hello ADe,

    I apologize for the omission. You need to use the !importand directive in order to override the style:
    .rfdSkinnedButton span.rfdInner    
    {    
        font-familyVerdanaArialSans-serif !important;   
        font-size11px !important;   
    }  



    Sincerely yours,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  6. ADe
    ADe avatar
    42 posts
    Member since:
    Jul 2008

    Posted 23 Mar 2009 Link to this post

    Still makes no difference.
  7. Jake
    Jake avatar
    27 posts
    Member since:
    Feb 2009

    Posted 23 Mar 2009 Link to this post

    ADe,

    From your reply, it sounds as if you added the class Georgi mentioned to your own CSS.  I had a similar issue where I thought adding classes to my own stylesheet would override the embedded version and it would not work.

    If you can use FireFox and the FireBug plugin (or use Google Chrome) you can right click on an element and "inspect" it.  This will show you to see CSS classes and styles being applied.  See if the class you added is appearing (and that it's coming from your stylesheet).

    An alternative to adding the class to your stylesheet is to set EnabledEmbeddedSkins="false" and use your own custom skin by copying the embedded skin you were using from your Telerik install & skins folder to your web application.    Then you can change the CSS to whatever you need to.  See this link for more info: http://demos.telerik.com/aspnet-ajax/grid/examples/styles/customskin/defaultcs.aspx.  This is the path I took as I liked the skin Telerik provided me, but needed to make some tweeks and change images.

    Hope this helps!
  8. ADe
    ADe avatar
    42 posts
    Member since:
    Jul 2008

    Posted 23 Mar 2009 Link to this post

    Cheers Jake,

    I was putting it in my own stylesheet but only because that seemed to be what was suggested. I do have my own skin and have tried adding the css Georgi suggest there too but it doesn't want to take affect.

     

    I've also tried editing almost everything in the FormDecorator.MySkinName.css and it made no difference.

    Dug out Firefox and went digging and the following works,

    .radfdSkinnedFormButton .radfdOuterSpan .radfdInnerSpan  
    {   
        font-familyVerdanaArialSans-serif !important;  
        font-size11px !important;  
    }  

    This is ok but not perfect as even though our site currently has only one skin in the future it will have more that the user can select. The above would affect all buttons and not just the ones specified by the "MySkinName".

    Does anyone know what I would have to add to FormDecorator.MySkinName.css to get the same affect?

    Cheers
    ADe
  9. Jake
    Jake avatar
    27 posts
    Member since:
    Feb 2009

    Posted 23 Mar 2009 Link to this post

    ADe,

    I have noticed that some CSS is still generated by someTelerik controls which have no regard to the skin being applied.  This seems to be one of those cases.  Hopefully someone on the support team can fill us in on this.

    BTW, I recently implemented the FormDecorator on our application and have been having to work though a number of formatting issues like this (i.e. RadioButtons and CheckBoxes).  So, don't feel alone.  It's a nice little widget, when it works the way you want :)

    Jake
  10. ADe
    ADe avatar
    42 posts
    Member since:
    Jul 2008

    Posted 23 Mar 2009 Link to this post

    Thanks again,

    I don't supose you know how to add some padding to the left/right of the buttons in FormDecorator.MySkinName.css? Everthing I try results in pure chaos :P
  11. Jake
    Jake avatar
    27 posts
    Member since:
    Feb 2009

    Posted 23 Mar 2009 Link to this post

    ADe,

    After tinkering for a bit, I can get the buttons to space out by specifying margins vs. padding in the following section of the CSS:

    /* do NOT change these settings, otherwise the skinned buttons will be broken when used within a decoration zone */

    a.radfdSkinnedFormButton.radfd_Default

    {

     

    -moz-user-select: none !important;

     

     

    outline: none !important;

     

     

    text-decoration: none !important;

     

     

    cursor: default !important;

     

     

    text-align: center !important;

     

     

    background-color: transparent !important;

     

     

    border: 0 !important;

     

     

    display: inline-block !important;

     

    }

    Note, the comments in place by Telerik developer :)  There is an inner and outer span around the button text, and then a class for the <a> itself.  Adding padding, or margins results in the rounded corners repeating themselves.

  12. Martin
    Admin
    Martin avatar
    585 posts

    Posted 25 Mar 2009 Link to this post

    Hi Jake,

    Yes, the comments in the code have been added as a note that any changes to the property values will result in element dislocation. We are using a link tag width two nested spans in order to achieve both rounded corners and ability to keep the rounded corners with different widths of the buttons. Probably, in the coments I should have had to add that the offset of the spans is equal to the corner-radius of the images that the rounded corners consists of.

    The reason that certain values are hardcoded in FormDecorator.css (the base stylesheet of the control) is that we have tried to minimize the page jumping during the process of skinning. This is why we have taken the original buttons' fonts, font-sizes, weight, padding, margin, etc.

    Any modifications to these properties may lead to page jumpings, element dislocation, etc.

    However, if you need different settings, you have to modify the base and the skin-specific files, as well as the respective image sprites that the button consists of, but have in mind that we will not be able to handle problems that may arise. At least at this stage.

    Kind regards,
    Martin Ivanov
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  13. ADe
    ADe avatar
    42 posts
    Member since:
    Jul 2008

    Posted 25 Mar 2009 Link to this post

    Yeah, I managed to add padding to my buttons by widening the ButtonSprites.gif image by 8 pixels and then in the FormDecorator.MySkinName.css I upped the left and right padding from 4 to 8px. Looks nice now!

    a.radfd_MySkinName  
    {  
        padding-left8px;  
    }  
     
    a.radfd_MySkinName .radfdInnerSpan,  
    a.radfd_MySkinName.radfdInputDisabled:hover .radfdInnerSpan  
    {  
        margin-right8px;  
        background-position: 0 -21px;  

    Cheers
    ADe
  14. Joe
    Joe avatar
    26 posts
    Member since:
    May 2009

    Posted 24 Sep 2009 Link to this post

    Old post, but I took ADe's advice on using firebug inspector.  Here is what I got for a asp:button
    a.RadForm_Sunset:hover .rfdInner { 
    background-position:0 -63px; 
    color:#3D1400; 
    Telerik....:f04ee865 (line 530) 
    a.RadForm_Sunset .rfdInner, a.RadForm_Sunset.rfdInputDisabled:hover .rfdInner { 
    background-position:0 -21px; 
    color:#3D1400; 
    margin-left:4px; 
    margin-right:4px; 
    Telerik....:f04ee865 (line 511) 
    .rfdSkinnedButton .rfdInner { 
    font-size:16px !important; 
    mvtest2.aspx (line 99) 
    .rfdSkinnedButton .rfdInner { 
    -x-system-font:none !important; 
    background-repeat:repeat-x; 
    display:block !important; 
    font-family:"Segoe UI",Arial,Verdana !important; 
    font-size:12px !important; 
    font-size-adjust:none !important; 
    font-stretch:normal !important; 
    font-style:normal !important; 
    font-variant:normal !important; 
    font-weight:normal !important; 
    line-height:21px !important; 
    padding:0 !important; 
    white-space:nowrap; 
    width:auto !important; 
    Telerik....:f04ee865 (line 93) 
    a.RadForm_Sunset, a.RadForm_Sunset span { 
    background-image:url(/demo/WebResource.axd?d=LTDmDOsUqk8Uy6fgmAtfKTOe_ta-r5MV3SmlwnbC-htiBNnGZBKosZF9S_jsHqRdM8ZwhENOLEZ22A9HsrhdhRPRnzFjdJYzb8ODrLIf3BU1&t=633782379440000000); 
    color:#3D1400; 
    Couple of notes:You will notice line 511 has font-size of 16px !important.  Line 99 has font-size 12px !important.  Line 511 is my entry and 99 is the embedded entry.  In order to make this work, I had to either add the style to my ascx control or aspx page.  External stylesheet DOES NOT work. Hope this was helpful.

    joe
  15. Martin
    Admin
    Martin avatar
    585 posts

    Posted 28 Sep 2009 Link to this post

    Hello Joe,

    Certain CSS settings of RadFormDecorator have been hardcoded on purpose while we were developing the control. This has been done in order to prevent unwanted inheritance of global styles, etc. Basically you can override a CSS property value set with !important by making the override selector heavier than the existing one and applying again the !important flag to it. In the case with font-size, you may use the following CSS to force new setting for the font-size:

    html.rfdButton a.rfdSkinnedButton *
    {
     font-size: 13px !important;
    }


    However, please, consider that any interventions of such nature may require that you forcefully apply other settings (for example padding or line-height, or modify the image sprites that the skin is made up) so the control looks adequate.

    Best wishes,
    Martin Ivanov
    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
UI for ASP.NET Ajax is Ready for VS 2017