Custom External Skin Issue

[Conor Morrissey]

Hi guys,

I want to create a custom skin for the RadEditor...

I have followed this article closely to copy Windows7 skin to my local project so I can rename it, and update files as necessary...
http://www.telerik.com/support/kb/aspnet-ajax/editor/register-external-skin-vista-radeditor.aspx

For the most part it works, but I am experiencing an issue with the Image Manager...

Please see attached JPG for issue with the Image Preview... I cannot access properties or insert the image as it's not picking up the correct styles. I copied the skin directly from my installation folder and have not changed anything.

Could you advise?

Thanks,
Chris.

[Rumen]

Hi Chris,

For your convenience I have created and attached a sample working project in which the editor is configured to load and use its Windows7 external skin.

Please, note that there is an IE 31 css files limitation which could cause problems. Please, see the following blog post which explains how to combine the css files and reduce their size: Internet Explorer CSS limits.

All the best,
Rumen
the Telerik team

[Conor Morrissey]

Thanks, this has helped me understand the issue deeper...

Everything appears fine if the EnableEmbeddedBaseStylesheet is not specified and the external embedded resources are still being pulled into the project.

If I set EnableEmbeddedBaseStylesheet="false" then some of the elements do not appear properly. My skin CSS attributes are being overwritten by the embedded resources.

Are there some CSS attributes missing from the skins, that are only in the embedded CSS files?

Thanks.

[Rumen]

Hi Chris,

If the EnableEmbeddedBaseStylesheet property is set to false, the embedded skin file should not be loaded on the page and you should manually register the base skin files. I tested the provided project by setting this property to false, but I was unable to reproduce the problem. You can see my test in the following video: http://screencast.com/t/FsD5Y1hB.

Are you able to reproduce the problem with the provided sample project in my earlier post? Can you modify it so that the problem is reproducible and send it for examination on our end?

Best regards,
Rumen
the Telerik team

[Conor Morrissey]

Hi Rumen,

Thanks for doing this. The issue is in the video you sent me. I print screened it and highlighted the area concerned.

You can't see the insert image button (bottom right of the image manager pane)... the styles are missing.

Thanks,

Chris

[Rumen]

Hello Chris,

Here is the classes to import in the DialogCss.css file:

@import url('../ToolBar.css');
@import url('../FormDecorator.css');
@import url('../TabStrip.css');
@import url('../Editor.css');
@import url('../TreeView.css');
@import url('../Splitter.css');
@import url('../Slider.css');
@import url('../Upload.css');
@import url('../Window.css');
@import url('../Grid.css');
@import url('../Widgets.css');
@import url('../FileExplorer.css');
@import url('../Menu.css');
@import url('../MultiPage.css');
 
@import url("Window.Windows7.css");
 
@import url("Widgets.Windows7.css");
@import url("Upload.Windows7.css");
@import url("Ajax.Windows7.css");
@import url("ColorPicker.Windows7.css");
@import url("ComboBox.Windows7.css");
@import url("Editor.Windows7.css");
@import url("FormDecorator.Windows7.css");
@import url("Grid.Windows7.css");
@import url("Menu.Windows7.css");
@import url("Slider.Windows7.css");
@import url("Splitter.Windows7.css");
@import url("TabStrip.Windows7.css");
@import url("ToolBar.Windows7.css");
@import url("TreeView.Windows7.css");

We have missed the following one:

@import url('../MultiPage.css');

Best wishes,
Rumen
the Telerik team