Need Button (FormDecorator) Tweaks - How?

3 posts, 0 answers
  1. Kevin
    Kevin avatar
    61 posts
    Member since:
    Oct 2008

    Posted 18 Aug 2009 Link to this post

    Whether or not this is done in the style builder, I'm looking for the best way to make the following adjustments to the WebBlue button skin:
    * adjust padding between text in button and button edge
    * adjust font family,color,style in button
    * ability to override particular button background colors

    For example, we want to have less spacing between the button text and the edge of the button.  We want to use a smaller font of a different color. 

    And if possible, we want some buttons (like a cancel button) have a different background color to make it stand out more.  I kind of had a solution to this, where I overrode particular styles within a div tag, and wrapped the cancel buttons in that div.  However once the new version came out this broke (as of q2 I think).

    It looks like this type of adjustment cannot be made to buttons using the visual styler.  Is this correct?  If not, what are the particular styles that need to be overridden to accomplish these items?

  2. Kevin
    Kevin avatar
    61 posts
    Member since:
    Oct 2008

    Posted 19 Aug 2009 Link to this post

    I was able to accomplish much of what I am after by using the following css:

    .RadForm_WebBlue.rfdButton a.rfdSkinnedButton,  
    .RadForm_WebBlue.rfdButton input[type="button"].rfdDecorated,  
    .RadForm_WebBlue.rfdButton input[type="reset"],  
    .RadForm_WebBlue.rfdButton input[type="submit"].rfdDecorated,  
    .RadForm_WebBlue.rfdButton button  
        fontnormal 11px ArialVerdana !important;  
        padding-left5px !important;  
        padding-right3px !important;  
        color#444444 !important;  

    That gets me control over the font info and the text color info and the padding.

    Any suggestions on how to create multiple button background colors for different button "types?"

  3. Martin
    Martin avatar
    585 posts

    Posted 25 Aug 2009 Link to this post

    Hello Kevin,

    Congratulations on figuring out how to tweak FormDecorator. Unfortunately due to limitations of CSS you cannot set style for the different types of buttons (as far as I understand you need different styles for button, reset and submit types) simply because you cannot refer the parent of an element with CSS, only its children, and as you have noticed the runtime of FormDecorator wraps the real buttons in an <a /> tag, so in order to style an input[type=submit] you need to style it's parent <a /> as well, which is impossible.

    Best wishes,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top