RadEditor Toolbar Icons not displaying in custom skin

11 posts, 0 answers
  1. Joseph Bonanno
    Joseph Bonanno avatar
    19 posts
    Member since:
    Sep 2009

    Posted 23 Mar 2012 Link to this post

    Hello:

    I am using the Rad StylesheetManager in version 2009.3.1503.35.

    I have successfully created custom skins for all controls including all parts of radeditor with the exception of displaying the toolbar Icons. It appears that the image associated with the following class does not want to display:
    .reTool span
    {
        background-image: url('<%=WebResource("CustomSkinsManager.VoltTrack.Editor_Images.CommandSpritesLight.png")%>');
    }

    I've tried replacing this image with several others with no luck. All other images associated with RadEditor display perfectly including the hover state for each item in the toolbar. All items in the toolbar are functional with the exception of the actual icon displaying.

    Is there something else I need to update in order for this to work?

    I previously had this set up as a custom skin within the main project and it was working perfectly.

  2. Joseph Bonanno
    Joseph Bonanno avatar
    19 posts
    Member since:
    Sep 2009

    Posted 25 Mar 2012 Link to this post

    Anybody? Still unable to get this to work.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 27 Mar 2012 Link to this post

    Hello Joseph,

    It seems that you are using our classic asp.net controls for which we no longer provide support (you can read more on the issue in the following post - Telerik's Support Lifecycle Policy)

    Kind regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Joseph Bonanno
    Joseph Bonanno avatar
    19 posts
    Member since:
    Sep 2009

    Posted 27 Mar 2012 Link to this post

    Wow.. I guess I expected a little more in the "forum" section.. I do realize the toolset is old, I was hoping someone here had previous experience with the issue.

    Does anybody in the telerik community have any suggestions for what could be causing this?

    I have tested the the CommandSpritesLight.png file is working properly as a web resource by attaching it to another class and it displays perfectly. All css and html is the same as it was previously with the exception of changing the images over to web resources as part of the conversion to the skin manager.

    Is there a reference somewhere else in the telerik code that needs to be updated in order for this to work? I can get the image to work on any class except .reTool span.


    Any help from anybody is appreciated.
  6. Joseph Bonanno
    Joseph Bonanno avatar
    19 posts
    Member since:
    Sep 2009

    Posted 28 Mar 2012 Link to this post

    Well I think I found a solution. It appears the css block for ie6 fall back is causing the issue:

    /* IE6 does not support PNG alpha channel, so we use gifs for the command sprites instead */
    * html .reTool span,
    * html .reTool_text span,
    * html .reTlbVertical .reTool_text span,
    * html .reToolbar .reSplitButton.reTool_text span
    {
        _background-image: url('<%=WebResource("CustomSkinsManager.VoltTrack.Editor_Images.CommandSpritesLightIE6.gif")%>');
    }

    By Adding an !important top the .toolbar span block located above this, the issue rectified itself.

    By Adding an !important top the .toolbar span block located above this, the issue rectified itself. 
    /* reTool */
    .reTool span 
        background-image: url('<%=WebResource("CustomSkinsManager.VoltTrack.Editor_Images.CommandSpritesLight.png")%>')!important
    }


    I'm not overly concerned about ie6 as we are in a corporate environment and require better than ie6. I wanted to update this just so anybody else that runs into this issue has a reference. We will be upgrading to the latest toolset shortly, but with any large application, updates such as this are slow and painful.
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 29 Mar 2012 Link to this post

    Hi Joseph ,

    Thank you for sharing your workaround with us, although it is related to an old version of our controls. You can also find your Telerik points updated.

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Prasanth
    Prasanth avatar
    1 posts
    Member since:
    Jun 2012

    Posted 28 Nov 2012 Link to this post

    Hello friends ,

    I have created my custom skin of name "MySkin"

    the css of all controls are applying smoothly except RadEditor and its toolbar.

    I am not able to call "Myskin.Editor.css" on my  aspx page .

    Following are the things which i did :-  

    1.  Build Action = embeddResource (to all css and Image files)
    2.  below is the code of my RadEditor.cs

    [assembly: WebResource("Telerik.Web.UI.Skins.Editor.css", "text/css", PerformSubstitution = true)]
    [assembly: WebResource("Telerik.Web.UI.Skins.MySkin.Editor.MySkin.css", "text/css", PerformSubstitution = true)]
    [assembly: WebResource("Telerik.Web.UI.Skins.MySkin.Editor.LoadingSpell.gif", "image/gif")]
    [assembly: WebResource("Telerik.Web.UI.Skins.MySkin.Editor.MySkin.gif", "image/gif")]
    [assembly: WebResource("Telerik.Web.UI.Skins.MySkin.Editor.ToolBarSprites.gif", "image/gif")]
    [assembly: WebResource("Telerik.Web.UI.Skins.MySkin.Editor.ToolbarVerticalSprites.gif", "image/gif")]

    [assembly: WebResource("Telerik.Web.UI.Skins.Common.CommandSpritesDark.png", "image/png")]
    [assembly: WebResource("Telerik.Web.UI.Skins.Common.CommandSpritesDarkIE6.gif", "image/gif")]
    [assembly: WebResource("Telerik.Web.UI.Skins.Common.CommandSpritesLight.png", "image/png")]
    [assembly: WebResource("Telerik.Web.UI.Skins.Common.CommandSpritesLightIE6.gif", "image/gif")]


    [assembly: WebResource("Telerik.Web.UI.Skins.Common.CommonIcons.gif", "image/gif")]
    [assembly: WebResource("Telerik.Web.UI.Skins.Common.CustomLinksSprites.gif", "image/gif")]
    [assembly: WebResource("Telerik.Web.UI.Skins.Common.CommonIcons.gif", "image/gif")]
    [assembly: WebResource("Telerik.Web.UI.Skins.Common.ApplyClassSprites.gif", "image/gif")]


    [assembly: WebResource("Telerik.Web.UI.Skins.Common.ComplianceCheck.png", "image/png")]
    [assembly: WebResource("Telerik.Web.UI.Skins.Common.ModalDialogAlert.gif", "image/gif")]
    [assembly: WebResource("Telerik.Web.UI.Skins.Common.ModalDialogConfirm.gif", "image/gif")]



    namespace Telerik.Web.UI.Skins
    {
        [Telerik.Web.EmbeddedSkin("Editor", null, typeof(RadEditor))] //base stylesheet
        [Telerik.Web.EmbeddedSkin("Editor", "MySkin", typeof(RadEditor))] //new MySkin skin
        public class RadEditor
        {
        }
        [Telerik.Web.EmbeddedSkin("Tool", null, typeof(EditorToolGroup))] //base stylesheet
        [Telerik.Web.EmbeddedSkin("Tool", "MySkin", typeof(EditorToolGroup))] //new MySkin skin
        public class EditorToolGroup
        {
        }
        [Telerik.Web.EmbeddedSkin("Tool", null, typeof(EditorTool))] //base stylesheet
        [Telerik.Web.EmbeddedSkin("Tool", "MySkin", typeof(EditorTool))] //new MySkin skin
        public class EditorTool
        {
        }
    3 . below id is code of my aspx page

     <telerik:RadEditor ID="txtContent" runat="server" Width="70%" MaxTextLength="4000">
                                    <ImageManager ViewMode="Grid" ViewPaths="~/Images" />
                                    <Tools>
                                        <telerik:EditorToolGroup>
                                            <telerik:EditorTool Name="Bold" />
                                            <telerik:EditorTool Name="Italic" />
                                            <telerik:EditorTool Name="Underline" />
                                            <telerik:EditorTool Name="StrikeThrough" />
                                            <telerik:EditorTool Name="Indent" />
                                            <telerik:EditorTool Name="Outdent" />
                                            <telerik:EditorTool Name="JustifyLeft" />
                                            <telerik:EditorTool Name="JustifyCenter" />
                                            <telerik:EditorTool Name="JustifyRight" />
                                            <telerik:EditorTool Name="JustifyFull" />
                                            <telerik:EditorTool Name="JustifyNone" />
                                            <telerik:EditorTool Name="InsertUnorderedList" />
                                            <telerik:EditorTool Name="InsertOrderedList" />
                                        </telerik:EditorToolGroup>
                                        <telerik:EditorToolGroup>
                                            <telerik:EditorTool Name="InsertLink" />
                                            <telerik:EditorTool Name="Unlink" />
                                            <telerik:EditorTool Name="InsertImage" />
                                            <telerik:EditorTool Name="ImageManager" />
                                            <telerik:EditorTool Name="AbsolutePosition" />
                                            <telerik:EditorTool Name="InsertTable" />
                                            <telerik:EditorTool Name="InsertSymbol" />
                                        </telerik:EditorToolGroup>
                                        <telerik:EditorToolGroup>
                                            <telerik:EditorTool Name="ForeColor" />
                                            <telerik:EditorTool Name="FontSize" />
                                            <telerik:EditorTool Name="FontName" />
                                            <telerik:EditorTool Name="BackColor" />
                                        </telerik:EditorToolGroup>
                                    </Tools>
                                    <TemplateManager ViewPaths="~/Images"
                                        UploadPaths="~/Images/New">
                                    </TemplateManager>
                                </telerik:RadEditor>
  9. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 03 Dec 2012 Link to this post

    Hello,

    From the information provided I do not see something wrong, but it is possible that some URLs in your project to be wrong. You could check with Fiddler or Firebug to see if all embedded resources are loaded on the page.

    If you could not find something wrong, you could send us your project to check it on our side. Just ensure that you have provided all resources and the project is runnable.

    Greetings,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 05 Sep 2014 in reply to Bozhidar Link to this post

    Forget attachment.
  11. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 05 Sep 2014 in reply to w Link to this post

    ......
  12. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 05 Sep 2014 in reply to Bozhidar Link to this post

    For custom tools, use this css for missing icons.

    .reToolbar span
    {
        position: absolute !important;
        padding: 0px !important;
    }

    .reWrapper_corner, .reWrapper_center, .reLeftVerticalSide, .reRightVerticalSide
    {
        line-height: 0px !important;
        font-size: 0px !important;
    }

    .reToolCell
    {
        background-color:White !important;
        border: none !important;
    }

    .reTlbVertical
    {
        background-color: White !important;
        border: none !important;
    }

    .reToolbar li
    {
        background-image: none !important;
    }

    .Default .reTool .split_arrow
    {
        margin: 0px 0px 0px 23px !important;
    }

    Thanks,
    Muhammad Waseem
    The Telerik Team
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017