RadEditor Toolbar Icons not displaying in custom skin

[Joseph Bonanno]

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.

[Joseph Bonanno]

Anybody? Still unable to get this to work.

[Kate]

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

[Joseph Bonanno]

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.

[Joseph Bonanno]

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.

[Kate]

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

[KG]

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>

[Bozhidar]

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

[Waseem]

Forget attachment.

[Waseem]

......

[Waseem]

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