The attached files are the content of "Button" folder that is the only change on my custom skin and the following is the CSS generated under the name "Button.BEEnterprise.css":
/* RadButton Black Skin */
.RadButton_BEEnterprise.rbSkinnedButton,
.RadButton_BEEnterprise .rbDecorated,
.RadButton_BEEnterprise.rbVerticalButton,
.RadButton_BEEnterprise.rbVerticalButton .rbDecorated,
.RadButton_BEEnterprise .rbSplitRight,
.RadButton_BEEnterprise .rbSplitLeft
{
background-image:url('Button/ButtonSprites.gif');
}
.RadButton_BEEnterprise .rbToggleCheckbox,
.RadButton_BEEnterprise .rbToggleCheckboxChecked,
.RadButton_BEEnterprise .rbToggleCheckboxFilled,
.RadButton_BEEnterprise .rbToggleRadio,
.RadButton_BEEnterprise .rbToggleRadioChecked
{
background-image:url('Button/ToggleSprite.gif');
}
.RadButton_BEEnterprise .rbDecorated,
.RadButton_BEEnterprise .rbVerticalText
{
color: #ffffff;
}
.RadButton_BEEnterprise .rbDecorated:hover,
.RadButton_BEEnterprise.rbVerticalSkinnedButton:hover .rbVerticalText
{
color: #d97a4e;
}
.RadButton_BEEnterprise.rbSkinnedButtonChecked .rbDecorated,
.RadButton_BEEnterprise.rbSkinnedButtonChecked:hover .rbDecorated
{
color: #fa7537;
}
.RadButton_BEEnterprise.rbToggleButton,
.RadButton_BEEnterprise.rbToggleButton.rbDisabled,
.RadButton_BEEnterprise.rbToggleButton.rbDisabled:hover
{
color: #ffffff;
}
.RadButton_BEEnterprise.rbToggleButton:hover
{
color: #d97a4e;
}
.RadButton_BEEnterprise.rbDisabled .rbDecorated,
.RadButton_BEEnterprise.rbDisabled:hover .rbDecorated
{
color: #d1d1d1;
}
.RadButton_BEEnterprise.rbLinkButton
{
border: 1px solid #666666;
background-color: #2e2e2e;
color: #ffffff;
text-decoration: none;
}
.RadButton_BEEnterprise.rbLinkButton:hover
{
background-color: #4f4f4f;
color: #d97a4e;
}
.RadButton_BEEnterprise.rbLinkButtonChecked,
.RadButton_BEEnterprise.rbLinkButtonChecked:hover
{
background-color: #73706f;
color: #fa7537;
}
.RadButton_BEEnterprise.rbLinkButton.rbDisabled,
.RadButton_BEEnterprise.rbLinkButton.rbDisabled:hover
{
background-color: #6b6b6b;
border: 1px solid #000000;
color: #d1d1d1;
}
.RadButton_BEEnterprise.rbLinkButton:hover .rbSplitLeft,
.RadButton_BEEnterprise.rbLinkButton:hover .rbSplitRight
{
background-color: #2e2e2e;
}
.RadButton_BEEnterprise.rbLinkButton .rbSplitRight
{
border-left: 1px solid #cccccc;
}
.RadButton_BEEnterprise.rbLinkButton .rbSplitRight:hover
{
background-position: -126px -137px;
background-color: #333333;
border-left: 1px solid #cccccc;
}
.RadButton_BEEnterprise.rbLinkButton .rbSplitRight:active,
.RadButton_BEEnterprise.rbLinkButton .rbSplitRight:focus
{
background-color: #666666;
border-left: 1px solid #cccccc;
}
.RadButton_BEEnterprise.rbLinkButton .rbSplitLeft
{
border-right: 1px solid #cccccc;
}
.RadButton_BEEnterprise.rbLinkButton .rbSplitLeft:hover
{
background-color: #333333;
border-right: 1px solid #cccccc;
}
.RadButton_BEEnterprise.rbLinkButton .rbSplitLeft:active,
.RadButton_BEEnterprise.rbLinkButton .rbSplitLeft:focus
{
background-color: #666666;
border-right: 1px solid #cccccc;
}
/* IE6 Fix, should be important to override the joint selectors */
*html .RadButton_BEEnterprise.rbLinkButton,
*html .RadButton_BEEnterprise.rbLinkButton:hover
{
border: 1px solid #666666 !important;
}
.RadButton_BEEnterprise .rbDecorated {
background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_body_unselect.png&t=1824754566');
background-position: 0% 0pt;
font-family: Arial;
}
.RadButton_BEEnterprise.rbSkinnedButton {
background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_corner_unselect.png&t=1824754566');
}
.RadButton_BEEnterprise:hover .rbDecorated {
background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_body_hover.png&t=1824754566');
width: 76px;
background-repeat: repeat-x;
}
.RadButton_BEEnterprise:hover.rbSkinnedButton {
background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_corner_hover.png&t=1824754566');
}
.RadButton_BEEnterprise:active .rbDecorated {
background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_body_hover.png&t=1824754566');
color: rgb(0, 0, 0);
}
.RadButton_BEEnterprise:active.rbSkinnedButton {
background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_corner_hover.png&t=1824754566');
}
.RadButton_BEEnterprise:hover .rbDecorated {
width: 76px;
}
To reproduce the error just create the Button folder and put this files inside, also create the CSS file with the name above, then put the CSS file and the Button folder inside a folder named "
BEEnterprise" and include it into a new WebForm project (even not inside the App_Themes folder, just in the root), then in the WebConfig type:
<appSettings>
<add key="Telerik.Skin" value="BEEnterprise"/>
<add key="Telerik.EnableEmbeddedSkins" value="false"/>
</appSettings>
Also create an aspx page and register the css of the button control in that page, drag and drop a telerik button and the skin is not applied, I'm using chrome to view the application, with the network traffic monitor of chrome you will see that ImageHandler.ashx is not found.
Best Regards.