Skinning the bottom buttons in UI for ASP.NET AJAX Editor

-DJ-

263 posts

Member since:
Oct 2004

Posted 31 Jul 2013 Link to this post

Hi,

It's great fun skinning the editor, to say the least.

My most recent fun moment relates to the bottom buttons.

See this image: http://imgur.com/g8gyWv1

You can see that although my class is applied
.reMode_design { background: url(editor/VerticalSpritesLight.png) 0 0 no-repeat !Important; }

it's also overridden :)

So, we get the default icon on top of my icon.

As great as this double pencil button looks, how should I go about getting rid of the original one?

Regards,
-DJ-

Bozhidar

Admin

693 posts

Posted 02 Aug 2013 Link to this post

Hello,

It appears like that, as you are trying to display the image in the wrong element. reMode_design is the anchor element where you put the background image, while the embedded is applied to the SPAN element inside the anchor. That's why you have background images to both elements. Bellow is a simple sample code showing how to override the pen icon. Image is also attached for the example, You will need to adjust background position settings if necessary:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.reEditorModesCell a.reMode_design span {

background-image: url(pen.png);

background-position: 0 0;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server" ID="scr1">

</asp:ScriptManager>

<telerik:RadEditor runat="server" Skin="Metro"></telerik:RadEditor>

</form>

</body>

</html>

Regards,
Bozhidar
Telerik

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 the blog feed now.

pen.png

-DJ-

263 posts

Member since:
Oct 2004

Posted 02 Aug 2013 Link to this post

Hi Bozhidar,

Thank you, that works well.

I'v had a hard time finding help on how to customize that bottom toolbar. I'm using a toolsfile.xml to edit the settings, but haven't been able to edit that toolbar. Also the "settings zone" (not sure what you call it) doesn't show up at all - that is the highlighted area in this pic:

http://tinypic.com/view.php?pic=2dlkppf&s=5

Finally, just one more question. I'm basically done with all skinning, but in the dialog windows (for example flash), there is one area that is totally skinless.

As seen in this pic:

http://tinypic.com/view.php?pic=m7aw41&s=5

I'm thinking this should be skinned with the FileExplorer and Grid css, which I have imported to the dialog css (along with all the other needed css files), but something seems to be rotten in Denmark.

Thanks for your help.
-DJ-

Bozhidar

Admin

693 posts

Posted 06 Aug 2013 Link to this post

Hi,

The settings zone will be shown only when an element is selected to be set - table, image etc.

As for your second question, it definitely should be skinned by FileExplorer and Grid, but I can not say what should be the problem. I will need your project in order to test it and find what should be wrong. Actually FileExplorer contains inside a Splitter, did you have and imported in the Dialog CSS file the Splitter CSS also?

Regards,
Bozhidar
Telerik

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 the blog feed now.

-DJ-

263 posts

Member since:
Oct 2004

Posted 06 Aug 2013 Link to this post

Hi Bozhidar,

The settings zone isn't showing up at all. The context menu does, but not that zone. It must be related to the toolsfile.xml?
Can I access the bottom toolbar from the toolsfile? If I wanted to say, add buttons there.

Regards,
-DJ-

Bozhidar

Admin

693 posts

Posted 07 Aug 2013 Link to this post

Hello,

To show/hide modules, you should have the following in the tool xml file:

<root>

<modules>

<module name="RadEditorStatistics" dockingZone="Bottom"/>

<module name="RadEditorDomInspector" />

<module name="RadEditorNodeInspector" />

<module name="RadEditorHtmlInspector" visible="false" />

</modules>

Check if you missed that lines and add them to check if it will work.

Regards,
Bozhidar
Telerik

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 the blog feed now.

-DJ-

263 posts

Member since:
Oct 2004

Posted 08 Aug 2013 Link to this post

Thanks Bozhidar,

When I changed <Modules> to <modules> it kicked in :)

Just a couple of questions more if you don't mind.

1) I cannot figure out where to localize the PasteHtml window title.
2) I've successfully replaced the image- and file managers with my own versions. Yet I cannot find the PasteHtml dialog in the dialogs folder. I would prefer to edit it somewhat, and then I guess question 1 will be moot.

Regarding the settings zone, the height seems to be hardcoded somewhere, but I haven't found where exactly. The last table cells in the editor seem to be reBottomZone and reResizeCell, but the settings area is found below those cells.

I really need to make it a big higher/taller, as in my skin the text flows out of that area (just using a bit bigger font and textboxes).

Regards,
-DJ-

Bozhidar

Admin

693 posts

Posted 09 Aug 2013 Link to this post

Hello,

Without any project and/or screenshots provided it is really hard to understand what you want to change.

1) I cannot figure out where to localize the PasteHtml window title. - would you like to change the styles of the title, or you like to change the Dialog title. In the first case, you should change the RadWindow styles. In the second case, you should change Telerik.Web.UI\Resources\RadEditor.Tools.resx files in the installation folder. There you should find the following piece of code:

<data name="PasteAsHtml" xml:space="preserve">

<value>Paste As Html</value>

</data>

2) I've successfully replaced the image- and file managers with my own versions. Yet I cannot find the PasteHtml dialog in the dialogs folder. I would prefer to edit it somewhat, and then I guess question 1 will be moot. - it is placed in - Telerik.Web.UI\Editor\DialogControls in the installation folder, there you'll find twodialogs with mozilla prefix in the name:

MozillaPasteHtmlDialog.ascx and MozillaPasteTextDialog.ascx.

The settings zones are reToolZone and reModule. Actually I do not understand which height exactly should be changed - again - without any code or screenshot showing what should be changed, it is hard to be specific.

Note also, that these custom changes are out of the scope of our support, and even if we try to give some help and guidelines it is a developer's responsibility to maintain them and to ensure that the controls will work properly.

Regards,
Bozhidar
Telerik

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 the blog feed now.

-DJ-

263 posts

Member since:
Oct 2004

Posted 09 Aug 2013 Link to this post

Hi,

Thanks Bozhidar, you have basically solved all my problems.
At least for now :)

Regards,
-DJ-