This is a migrated thread and some comments may be shown as answers.
Custom skin problem
1 Answer 153 Views
This is a migrated thread and some comments may be shown as answers.
Wei
Top achievements
Rank 1
Wei asked on 19 Dec 2008, 05:34 PM
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:
<%@ 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

Sort by
0
Martin
Telerik team
answered on 20 Dec 2008, 12:53 PM
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.
Asked by
Wei
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or