13 Answers, 1 is accepted
0
Hello ADe,
You can do this by modifying the following selectors:
Regards,
Georgi Tunev
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
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.
0
ADe
Top achievements
Rank 1
Rank 1
answered on 23 Mar 2009, 10:25 AM
Added the following to my stylesheet and it made no difference..
| .rfdSkinnedButton span.rfdInner |
| { |
| font-family: Verdana, Arial, Sans-serif; |
| font-size: 11px; |
| } |
0
Hello ADe,
I apologize for the omission. You need to use the !importand directive in order to override the style:
Sincerely yours,
Georgi Tunev
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
I apologize for the omission. You need to use the !importand directive in order to override the style:
| .rfdSkinnedButton span.rfdInner |
| { |
| font-family: Verdana, Arial, Sans-serif !important; |
| font-size: 11px !important; |
| } |
Sincerely yours,
Georgi Tunev
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
ADe
Top achievements
Rank 1
Rank 1
answered on 23 Mar 2009, 04:42 PM
Still makes no difference.
0
Jake
Top achievements
Rank 1
Rank 1
answered on 23 Mar 2009, 05:37 PM
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!
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!
0
ADe
Top achievements
Rank 1
Rank 1
answered on 23 Mar 2009, 07:11 PM
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-family: Verdana, Arial, Sans-serif !important; |
| font-size: 11px !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
0
Jake
Top achievements
Rank 1
Rank 1
answered on 23 Mar 2009, 07:17 PM
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
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
0
ADe
Top achievements
Rank 1
Rank 1
answered on 23 Mar 2009, 07:25 PM
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
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
0
Jake
Top achievements
Rank 1
Rank 1
answered on 23 Mar 2009, 07:56 PM
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:
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.
0
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.
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.
0
ADe
Top achievements
Rank 1
Rank 1
answered on 25 Mar 2009, 10:30 AM
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!
Cheers
ADe
| a.radfd_MySkinName |
| { |
| padding-left: 8px; |
| } |
| a.radfd_MySkinName .radfdInnerSpan, |
| a.radfd_MySkinName.radfdInputDisabled:hover .radfdInnerSpan |
| { |
| margin-right: 8px; |
| background-position: 0 -21px; |
| } |
Cheers
ADe
0
Joe
Top achievements
Rank 1
Rank 1
answered on 24 Sep 2009, 10:33 PM
Old post, but I took ADe's advice on using firebug inspector. Here is what I got for a asp:button
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
| 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; |
| } |
joe
0
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.
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.