Problem with Custom Skin

[Omar]

I built a custom skin from the "Black" Standard skin using the Visual Style Builder, but when the CSS are generated the images are loaded using ImageHandler.ashx, so I have this on my CSS files: 

background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&
file=btn_corner_unselect.png&t=1824754566');

The problem is that ImageHandler.ashx is failing to load the images because the complete skin is under
App_Themes, I put all the stuff here because I'm using the skin as a theme so I don't need to register
the CSS files, exists some way to fix this using the skin under this folder?
Best Regards.

[Bozhidar]

Hello,

Could you tell us which browser did you use to get that result? Coudl you also try to create the same skin using Firefox, as while testing Visual Style Builder FireFox seems to be the most friendly browser to it  (and I have never get such an error with that browser)?

Once you have the results lets us know what happened.

Kind regards,
Bozhidar
the Telerik team

[Omar]

Hello Bozhidar,

Thanks for your quick response!

Ok, I'm going to be more specific on all that I did.

1. Using firefox 9.0.1 I have created a custom skin based on the "Black" included with Telerik. The only change I did was using the "Fine Tune" tab of the Visual Style Buider change the button control to use a custom background image, the tool saved my changes and when I download my zip file, I have checked if the new images exists and the CSS file include the reference to that images, and the so far everything is ok.
2. After that I registered the custom skin using the following method: http://tv.telerik.com/watch/aspnet/visualstylebuilder/create-custom-skin-radpanelbar-with-vsb (in the folder App_Themes to avoid the manual registration of the CSS Files).
3. I have tried to do all of this with the only difference of not using images and everything works perfect.
4. The Issue is that the reference created on the CSS file to the image is not working:
background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&
control=Button&skin=BEEnterprise&file=btn_body_unselect.png&t=1824754566');
5. When I reviewed the network traffic I realized that the ImageHandler.ashx can't find the image because is on the special folder App_Themes that is not allowed.
6. My biggest question is if exists some way to allow the ImageHandler.ashx get the images from that folder or another solution that works without have to register manually the CSS.

Best Regards.

[Bozhidar]

Hello,

Could you please send me your custom skin and a simple sample ASPX code that reproduces the issue. I`ll check it locally to find what should be the problem.

In my opinion this is a wrong generated CSS background image path. The background image path should look like that:

.RadButton_test .rbToggleCheckbox,
.RadButton_test .rbToggleCheckboxChecked,
.RadButton_test .rbToggleCheckboxFilled,
.RadButton_test .rbToggleRadio,
.RadButton_test .rbToggleRadioChecked
{
        background-image:url('Button/ToggleSprite.gif');
}

This is taken just now from a RadButton skin created with Visual Style Builder using FireFox version 10.0.

Kind regards,
Bozhidar
the Telerik team

[Omar]

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.

[Bozhidar]

Hi,

For some reason the VSB rendered a wrong background image path:

background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Button&skin=BEEnterprise&file=btn_body_unselect.png&t=1824754566');

it should be:

background-image: url(Button/btn-body-unselect.png);

Attached is a small project, containing your files and fixed CSS.

Note, that your RadButton custom skins does not use the image sprites based on the embedded skin as it is described at: RadButton Custom Skin Tutorial. It may cause some conflicts or / and wrong visual appearance.

As for the Visual Style Builder, we will test it to find why it generates the wrong background-image paths.

Greetings,
Bozhidar
the Telerik team

[Omar]

Thanks very much for your answer!

That's was helpful!

Best Regards.