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?
Thx!
* 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?
Thx!
2 Answers, 1 is accepted
0
Kevin
Top achievements
Rank 2
Rank 2
answered on 19 Aug 2009, 07:11 PM
I was able to accomplish much of what I am after by using the following css:
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?"
Thx
| .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 |
| { |
| font: normal 11px Arial, Verdana !important; |
| padding-left: 5px !important; |
| padding-right: 3px !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?"
Thx
0
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.
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.