Icons not Showing for custom Skin

[Hernan]

Good day Telerik Community,

I'm starting at Telerik and I need help with Custom Skins and web resources for showing Icons.

I have made my custom Skin that is the same as the Old Forest Skin One, it's all good with my DLL until I see Icons ("Edit","Delete","Ok","Cancel", etc.). This Icons are not showing (Html broken Image shown and Alt shown), I want to know how to call the Image from the DLL web resource and not through the File itself (for example: ~/Image/Edit.gif, is what I'm doing now but I want to call it from the Web Resource to keep independance of the Skin).

I hope I'm clear with my trouble I am having,

I hope you can help me Solve it :)...

Thanks for Reading,

[Bozhidar]

Hello,

As I understand, you have a custom skin which is put into a DLL and it is not loaded as an external resource. Then it is necessary you sprites/images to be set as an embedded resource (image attached).

Then i the CSS the image should be called like:

.rgSave,
    .rgAdd,
    .rgRefresh,
    .rgEdit,
    .rgDel,
    .rgFilter,
    .rgPagePrev,
    .rgPageNext,
    .rgPageFirst,
    .rgPageLast,
    .rgExpand,
    .rgCollapse,
    .rgSortAsc,
    .rgSortDesc,
    .rgUpdate,
    .rgCancel,
    .rgUngroup,
    .rgExpXLS,
    .rgExpDOC,
    .rgExpPDF,
    .rgExpCSV
    {
        background-image: url('<%=WebResource("Telerik.Web.UI.Skins.#{$skin-name}.Grid.sprite.gif")%>');
    }

And finally, you need to ensure if the image/sprite/css is also described in the CS file with the embedded/required resources, it looks like that for common, black, blacklite and mobile gird:

using System.Web.UI;

//Common
[assembly: WebResource("Telerik.Web.UI.Skins.Common.Grid.export.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Bootstrap.Grid.export.png", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Common.Grid.contextMenu.gif", "image/gif")]

#region Black
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.Black.css", "text/css", PerformSubstitution = true)]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.sprite.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Common.loading_small.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.Black.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.rgDrag.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.AddRecord.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.Cancel.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.Delete.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.Edit.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.Filter.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.MoveDown.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.MoveUp.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.PagingPrev.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.PagingNext.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.PagingFirst.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.PagingLast.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.Refresh.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.SingleMinus.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.SinglePlus.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.SortAsc.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.SortDesc.gif", "image/gif")]
[assembly: WebResource("Telerik.Web.UI.Skins.Black.Grid.Update.gif", "image/gif")]

//Lite
[assembly: WebResource("Telerik.Web.UI.Skins.BlackLite.Grid.Black.css", "text/css", PerformSubstitution = true)]

//Mobile
[assembly: WebResource("Telerik.Web.UI.Skins.BlackMobile.Grid.Black.css", "text/css", PerformSubstitution = true)]
#endregion

If you miss one of the steps the background image will not appear.

Note that these are the steps required to load a background image through the CSS.

Regards,
Bozhidar
Telerik by Progress