This is a migrated thread and some comments may be shown as answers.

RadEditor Toolbar Icons not displaying in custom skin

10 Answers 294 Views
ScriptManager and StyleSheetManager
This is a migrated thread and some comments may be shown as answers.
Joseph Bonanno
Top achievements
Rank 1
Joseph Bonanno asked on 23 Mar 2012, 06:01 AM
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.

10 Answers, 1 is accepted

Sort by
0
Joseph Bonanno
Top achievements
Rank 1
answered on 26 Mar 2012, 01:11 AM
Anybody? Still unable to get this to work.
0
Kate
Telerik team
answered on 27 Mar 2012, 08:46 AM
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.
0
Joseph Bonanno
Top achievements
Rank 1
answered on 27 Mar 2012, 03:35 PM
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.
0
Joseph Bonanno
Top achievements
Rank 1
answered on 28 Mar 2012, 05:43 PM
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.
0
Kate
Telerik team
answered on 29 Mar 2012, 03:32 PM
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.
0
KG
Top achievements
Rank 1
answered on 28 Nov 2012, 02:42 PM
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>
0
Bozhidar
Telerik team
answered on 03 Dec 2012, 09:28 AM
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.
0
Waseem
Top achievements
Rank 1
answered on 05 Sep 2014, 05:02 PM
Forget attachment.
0
Waseem
Top achievements
Rank 1
answered on 05 Sep 2014, 05:03 PM
0
Waseem
Top achievements
Rank 1
answered on 05 Sep 2014, 10:32 PM
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
Tags
ScriptManager and StyleSheetManager
Asked by
Joseph Bonanno
Top achievements
Rank 1
Answers by
Joseph Bonanno
Top achievements
Rank 1
Kate
Telerik team
KG
Top achievements
Rank 1
Bozhidar
Telerik team
Waseem
Top achievements
Rank 1
Share this question
or