Problem with dialog styles and own skin

7 posts, 0 answers
  1. Karsten Doering
    Karsten Doering avatar
    8 posts
    Member since:
    Dec 2005

    Posted 31 Jan Link to this post

    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

  2. Rumen
    Admin
    Rumen avatar
    14275 posts

    Posted 31 Jan Link to this post

    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

    Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
  3. Karsten Doering
    Karsten Doering avatar
    8 posts
    Member since:
    Dec 2005

    Posted 03 Feb Link to this post

    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

     

  4. Rumen
    Admin
    Rumen avatar
    14275 posts

    Posted 11 Feb Link to this post

    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

    Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
  5. Karsten Doering
    Karsten Doering avatar
    8 posts
    Member since:
    Dec 2005

    Posted 11 Feb Link to this post

    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

     

  6. Rumen
    Admin
    Rumen avatar
    14275 posts

    Posted 12 Feb Link to this post

    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

    Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
  7. Karsten Doering
    Karsten Doering avatar
    8 posts
    Member since:
    Dec 2005

    Posted 12 Feb in reply to Rumen Link to this post

    Hello Rumen,

    thank you.

    Regards

    Karsten

Back to Top