Problem with dialog styles and own skin

[Karsten]

Hello,

I have a styling problem when a dialog is shown in RadEditor (e.g. linkmanager). I have assigned my own skin.:

<telerik:RadEditor ID="radEditor" runat="server" AutoResizeHeight="true" EditModes="Design,Html" DialogsCssFile="/editordialog.css">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Cut" />
            <telerik:EditorTool Name="Copy" />
            <telerik:EditorTool Name="Paste" />
            <telerik:EditorTool Name="PastePlainText" />
            <telerik:EditorTool Name="FormatStripper" />
        </telerik:EditorToolGroup>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Bold" />
            <telerik:EditorTool Name="Italic" />
            <telerik:EditorTool Name="Unterline" />
        </telerik:EditorToolGroup>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Indent" />
            <telerik:EditorTool Name="Outdent" />
            <telerik:EditorTool Name="InsertUnorderedList" />
            <telerik:EditorTool Name="InsertOrderedList" />
        </telerik:EditorToolGroup>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="LinkManager" />
            <telerik:EditorTool Name="InsertParagraph" />
            <telerik:EditorTool Name="ApplyClass" />
        </telerik:EditorToolGroup>
    </Tools>
    <CssClasses>
        <telerik:EditorCssClass Name="remove CSS" Value="" />
        <telerik:EditorCssClass Name="title" Value="p.EditorTitle" />
    </CssClasses>
    <CssFiles>
        <telerik:EditorCssFile Value="~/App_Themes/EditForm/Form.css" />
    </CssFiles>
</telerik:RadEditor>

 

Skin, EmbeddedSkins and RenderMode are defined in web.config.

I have read some older posts like:

https://www.telerik.com/forums/css-skin-not-setting-for-radeditor-dialogs#D2y6DCqSQkiiOjw0-LqBhA
https://feedback.telerik.com/aspnet-ajax/1377496-adding-dialogscssfile-to-radeditor-changes-radeditor-class

But this doesn't change anything.

<telerik:RadEditor ID="radEditor" runat="server" AutoResizeHeight="true" EnableEmbeddedSkins="false" Skin="myown" RenderMode="Lightweight" EditModes="Design,Html" DialogsCssFile="/editordialog.css">

 

editordialog.css

@import url("/App_Themes/RadControls/myown/FormDecorator.myown.css");
@import url("/App_Themes/RadControls/myown/ColorPicker.myown.css");
@import url("/App_Themes/RadControls/myown/FormDecorator.myown.css");
@import url("/App_Themes/RadControls/myown/Grid.myown.css");
@import url("/App_Themes/RadControls/myown/Input.myown.css");
@import url("/App_Themes/RadControls/myown/PanelBar.myown.css");
@import url("/App_Themes/RadControls/myown/Rotator.myown.css");
@import url("/App_Themes/RadControls/myown/Slider.myown.css");
@import url("/App_Themes/RadControls/myown/Splitter.myown.css");
@import url("/App_Themes/RadControls/myown/TabStrip.myown.css");
@import url("/App_Themes/RadControls/myown/ToolBar.myown.css");
@import url("/App_Themes/RadControls/myown/TreeView.myown.css");
@import url("/App_Themes/RadControls/myown/Upload.myown.css");
@import url("/App_Themes/RadControls/myown/Window.myown.css");
@import url("/App_Themes/RadControls/myown/ComboBox.myown.css");
@import url("/App_Themes/RadControls/myown/Button.myown.css");
@import url("/App_Themes/RadControls/myown/Editor.myown.css");
@import url("/App_Themes/RadControls/myown/ListBox.myown.css");

 

I created the style with the theme builder tool on this site: https://themebuilder.telerik.com/aspnet-ajax

I tested with versions 2019.3.1023 and 2020.1.114

 

Maybe I missed something important. I hope you can help me.

 

Regards

Karsten

[Rumen]

Hello,

Where is located the editordialog.css fil?

If it is placed in the root of the web app, you have to set the ~ symbol before the /editordialog.css to properly point to it:

DialogsCssFile="~/editordialog.css"

Also please delete the dialog cache before testing since the dialog contents are loaded in an iframe.

Regards,
Rumen
Progress Telerik

[Karsten]

Hello Rumen,

what do you mean with "delete the dialog cache"? Do you talk about the browser cache?

I deleted browser cache and changed the dialogcssfile property. My problem is not the dialog. After changing everything the editor itself is not more usable (see telerik_1.png).

When I remove the property DialogCssFile the editor is working (see telerik_2.png).

So for some reason, changing the property changed css styles in the main page or changes css classes of the editor. 

In telerik_3.png you can see how the LinkManager looks like, when the dialogcssfile property is not set. 

 

Regards

 

Karsten

 

[Rumen]

Hello Karsten,

I followed the instructions at https://www.telerik.com/support/kb/aspnet-ajax/editor/details/registering-an-external-skin-of-radeditor and I was unable to replicate the problem with the RadEditor configuration provided by you.

For your convenience, I have attached my test project and a video demonstration of my test. I hope that they will help you to find the reason for the issue on your end.

Regards,
Rumen
Progress Telerik

[Karsten]

Hello Rumen,

in my web.config Telerik.EnableEmbeddedBaseStylesheet was set to false. This was the reason for this strange behaviour.

Thanx for your help.

But there seems to be at least one control left which is not styled correctly.
I attached a screenshot for you.

 

Regards

Karsten

 

[Rumen]

Hi Karsten,

To style the dropdown contents open the editordialog.css file that you load via the DialogsCssFile property and put the following CSS class in the end and save it:

.reLightweightDialog .reDropDownBody {
    border-color: #e6e6e6;
    color: #333;
    background-color: #fff;
}

After that clean the browser cache and refresh the page to retest.

Regards,
Rumen
Progress Telerik

[Karsten]

Hello Rumen,

thank you.

Regards

Karsten