Custom skin problem

2 posts, 0 answers
  1. Wei
    Wei avatar
    33 posts
    Member since:
    Oct 2008

    Posted 19 Dec 2008 Link to this post

    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> 
     
     
  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 20 Dec 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top