Icons not Showing for custom Skin

2 posts, 0 answers
  1. Hernan
    Hernan avatar
    11 posts
    Member since:
    Dec 2016

    Posted 16 Dec 2016 Link to this post

    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,

  2. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 20 Dec 2016 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top