Hi, I am trying to put a custom skin to use with FormDecorator.
All I did is past content of "FormDecorator.Office2007.css" to my page, rename "Office2007" to "MyWebsite" and create a folder "FormDecorator" and copy over Telerik stock Office2007 skin images.
Create a page, added RadScriptManager and RadFormDecorator and a button.
Set RadFormDecorator with EnableEmbeddedSkins="False" Skin="MyWebsite"
The weird thing is, when I clicked on the button (actually mouse down), the button background disappears! Release mouse will revive the background but if you click the button again the same problem will happen again.
This problem is reproduceable on IE,Firefox,Safari,Opera,Chrome
Please advise how to fix this issue. Thanks!
Following is my test page:
All I did is past content of "FormDecorator.Office2007.css" to my page, rename "Office2007" to "MyWebsite" and create a folder "FormDecorator" and copy over Telerik stock Office2007 skin images.
Create a page, added RadScriptManager and RadFormDecorator and a button.
Set RadFormDecorator with EnableEmbeddedSkins="False" Skin="MyWebsite"
The weird thing is, when I clicked on the button (actually mouse down), the button background disappears! Release mouse will revive the background but if you click the button again the same problem will happen again.
This problem is reproduceable on IE,Firefox,Safari,Opera,Chrome
Please advise how to fix this issue. Thanks!
Following is my test page:
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="test" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; width: 100%; margin: 0px; |
| padding: 0px; overflow: hidden;"> |
| <head runat="server"> |
| <title></title> |
| <style> |
| /***********************************Copy of FormDecorator.Office2007.css********************************//* FORM DECORATOR */.radfd_MyWebsite.radfd_ScrollBars |
| { |
| scrollbar-3dlight-color: #606f94; |
| scrollbar-arrow-color: #4d5874; |
| scrollbar-base-color: #f5f5f5; |
| scrollbar-darkshadow-color: #5f6e93; |
| scrollbar-face-color: #d8dfe8; |
| scrollbar-highlight-color: #fff; |
| scrollbar-shadow-color: #a3a3a3; |
| scrollbar-track-color: #efefef; |
| } |
| /* label settings */.radfd_MyWebsite label.MyWebsite |
| { |
| color: #626262; |
| } |
| /* checkbox settings */.radfd_MyWebsite .radfdCheckboxUnchecked, .radfd_MyWebsite .radfdInputDisabled.radfdCheckboxUnchecked:hover |
| { |
| background: transparent url(FormDecorator/CheckBoxSprites.gif) no-repeat 0 0; |
| } |
| .radfd_MyWebsite .radfdCheckboxUnchecked:hover |
| { |
| background: transparent url(FormDecorator/CheckBoxSprites.gif) no-repeat 0 -200px; |
| } |
| .radfd_MyWebsite .radfdCheckboxChecked, .radfd_MyWebsite .radfdInputDisabled.radfdCheckboxChecked:hover |
| { |
| background: transparent url(FormDecorator/CheckBoxSprites.gif) no-repeat 0 -420px; |
| } |
| .radfd_MyWebsite .radfdCheckboxChecked:hover |
| { |
| background: transparent url(FormDecorator/CheckBoxSprites.gif) no-repeat 0 -640px; |
| } |
| /* end of checkbox settings *//* radiobutton settings */.radfd_MyWebsite .radfdRadioUnchecked, .radfd_MyWebsite .radfdInputDisabled.radfdRadioUnchecked:hover |
| { |
| background: transparent url(FormDecorator/RadioButtonSprites.gif) no-repeat 1px 0; |
| } |
| .radfd_MyWebsite .radfdRadioUnchecked:hover |
| { |
| background: transparent url(FormDecorator/RadioButtonSprites.gif) no-repeat 1px -220px; |
| } |
| .radfd_MyWebsite .radfdRadioChecked, .radfd_MyWebsite .radfdInputDisabled.radfdRadioChecked:hover |
| { |
| background: transparent url(FormDecorator/RadioButtonSprites.gif) no-repeat 1px -440px; |
| } |
| .radfd_MyWebsite .radfdRadioChecked:hover |
| { |
| background: transparent url(FormDecorator/RadioButtonSprites.gif) no-repeat 1px -640px; |
| } |
| /* end of radiobutton settings *//* button settings */a.radfd_MyWebsite, a.radfd_MyWebsite span |
| { |
| background-image: url(FormDecorator/ButtonSprites.gif); /* font: normal 12px Arial, Verdana, Sans-serif; */ |
| color: black; |
| } |
| a.radfd_MyWebsite.radfdInputDisabled:hover |
| { |
| background-position: 0 0; |
| } |
| a.radfd_MyWebsite |
| { |
| padding-left: 4px; |
| } |
| a.radfd_MyWebsite .radfdInnerSpan, a.radfd_MyWebsite.radfdInputDisabled:hover .radfdInnerSpan |
| { |
| margin-right: 4px; |
| background-position: 0 -21px; |
| } |
| a.radfd_MyWebsite.radfdInputDisabled:hover .radfdOuterSpan |
| { |
| background-position: right 0; |
| } |
| a.radfd_MyWebsite:hover |
| { |
| background-position: 0 -42px; |
| } |
| a.radfd_MyWebsite:hover .radfdInnerSpan |
| { |
| background-position: 0 -63px; |
| } |
| a.radfd_MyWebsite:hover .radfdOuterSpan |
| { |
| background-position: right -42px; |
| } |
| /* button settings *//* clicked button styles */a.radfd_MyWebsite.radfd_Clicked |
| { |
| background-image: url(FormDecorator/ButtonSprites.gif); |
| background-position: 0 -84px; |
| background-repeat: no-repeat; |
| } |
| a.radfd_MyWebsite.radfd_Clicked span |
| { |
| background-image: url(FormDecorator/ButtonSprites.gif); |
| color: #000; |
| } |
| a.radfd_MyWebsite.radfd_Clicked .radfdInnerSpan |
| { |
| background-position: 0 -105px; |
| background-repeat: repeat-x; |
| } |
| a.radfd_MyWebsite.radfd_Clicked .radfdOuterSpan |
| { |
| background-position: right -84px; |
| background-repeat: no-repeat; |
| } |
| /* end of clicked button styles *//* do NOT change these settings, otherwise the skinned buttons will be broken when used within a decoration zone */a.radfdSkinnedFormButton.radfd_MyWebsite |
| { |
| -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; |
| } |
| /* Headings 4-6 */.radfd_MyWebsite h4.radfd_h4 |
| { |
| color: #567db0; |
| border-bottom: solid 1px #a0a0a0; |
| } |
| .radfd_MyWebsite h5.radfd_h5 |
| { |
| color: #000000; |
| border-bottom: solid 1px #a0a0a0; |
| } |
| .radfd_MyWebsite h6.radfd_h6 |
| { |
| color: #000000; |
| } |
| /* LABEL */.radfd_MyWebsite label.radfd_label |
| { |
| color: #000000; |
| } |
| /* FIELDSET & LEGEND */.radfd_MyWebsite table.radfd_roundedWrapper_fieldset legend, .radfd_MyWebsite fieldset.radfd_fieldset legend |
| { |
| /*Mandatory to set the height of the legend, so as to be able to calculate the rounded corners in IE properly*/ |
| font-size: 12px; |
| height: 30px; |
| line-height: 30px; |
| color: #000000; |
| } |
| .radfd_MyWebsite table.radfd_roundedWrapper_fieldset fieldset, .radfd_MyWebsite fieldset.radfd_fieldset |
| { |
| border: solid 1px #d5dfe5; |
| background-image: url(FormDecorator/FieldsetBgr.png); /* |
| having a background image on a fieldset is not okay with IE */ |
| background-repeat: no-repeat; /*Mandatory to use because of incorrect IE positioning of the image*/ |
| } |
| /* Due to a glitch in IE the following 2 classes must be declared separately for correct parsing of the textarea class in IE6*/.radfd_MyWebsite table.radfd_roundedWrapper input, .radfd_MyWebsite table.radfd_roundedWrapper textarea, .radfd_MyWebsite input.radfd_input, .radfd_MyWebsite textarea.radfd_textarea |
| { |
| border: solid 1px #7f9db9; |
| background: #ffffff; |
| color: #000000; |
| overflow: hidden; |
| } |
| .radfd_MyWebsite table.radfd_roundedWrapper input[disabled="disabled"]:hover, .radfd_MyWebsite table.radfd_roundedWrapper textarea[disabled="disabled"]:hover |
| { |
| border: solid 1px #8e8e8e; |
| background: #ffffff; |
| color: #171717; |
| overflow: hidden; |
| filter: alpha(opacity=30); |
| -moz-opacity: .3; |
| opacity: .3; |
| } |
| /* add classes for HOVER effect */.radfd_MyWebsite table.radfd_roundedWrapper input:hover, .radfd_MyWebsite table.radfd_roundedWrapper textarea:hover, .radfd_MyWebsite table.radfd_roundedWrapper:hover .radfd_roundedInnerSpan, .radfd_MyWebsite input.radfd_input:hover, .radfd_MyWebsite textarea.radfd_textarea:hover |
| { |
| border-color: #38577e !important; |
| background: #ffffff; |
| } |
| .radfd_MyWebsite table.radfd_roundedWrapper:hover .radfd_roundedOuterSpan |
| { |
| background-color: #38577e !important; |
| } |
| /***********************************************************************************************/</style> |
| </head> |
| <body style="height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden;"> |
| <form runat="server"> |
| <telerik:RadScriptManager ID="uxRadScriptManager" runat="server"> |
| </telerik:RadScriptManager> |
| <telerik:RadFormDecorator ID="uxRadFormDecorator" runat="server" EnableEmbeddedSkins="False" |
| Skin="MyWebsite" /> |
| <asp:Button ID="uxButton" runat="server" Text="Button" /> |
| </form> |
| </body> |
| </html> |
1 Answer, 1 is accepted
0
Hi Wei,
Please, open a new support ticket, and send us a small running project along with your skin of RadFormDecorator and we will do our best to help. We have never encountered such issue and we have to examine it thoroughly.
Regards,
Martin Ivanov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Please, open a new support ticket, and send us a small running project along with your skin of RadFormDecorator and we will do our best to help. We have never encountered such issue and we have to examine it thoroughly.
Regards,
Martin Ivanov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.