DNN 3.1.1, Cute Editor 5 - Setting the EditorBodyStyle property in Web.config

Last post 09-14-2005, 12:00 PM by Adam. 9 replies.
Sort Posts: Previous Next
  •  09-12-2005, 1:09 PM 10393

    DNN 3.1.1, Cute Editor 5 - Setting the EditorBodyStyle property in Web.config

    Ok, I'm using the latest version of DotNetNuke and the latest version of Cute Editor.
     
    My skin for DotNetNuke has a black background, and whenever I go to edit the text in a Text/HTML module, the cute editor Normal tab also has the black background (as expected), therefore I can't read a bloody thing I'm typing!
     
    So I thought I'd change the EditorBodyStyle property in the Web.config file to point to another .css file.  But it ain't working :(
    I copied the example.css file that comes with the Cute editor download into my ~DotNetNuke/Portals/_default/Skins/SKINNAME/ directory, and set the EditorBodyStyle property to the following:
     
    EditorBodyStyle="~\Portals\_default\Skins\SKINNAME\example.css"

    Why doesn't this work?  I've also tried:

    EditorBodyStyle="/Portals/_default/Skins/SKINNAME/example.css" 

    and many other combinations... what am I doing wrong???!!
        
  •  09-12-2005, 1:11 PM 10394 in reply to 10393

    Re: DNN 3.1.1, Cute Editor 5 - Setting the EditorBodyStyle property in Web.config

  •  09-12-2005, 1:34 PM 10400 in reply to 10394

    Re: DNN 3.1.1, Cute Editor 5 - Setting the EditorBodyStyle property in Web.config

    Ok that works, thanks, but I also wanted to show my own set of styles in the drop down Css list - i.e. only the styles defined in example.css.   Is this possible?  I don't want my users to see all the DNN styles such as SubHead, Normal etc etc.  The drop down list just gets too long and ugly.
  •  09-12-2005, 1:43 PM 10402 in reply to 10400

    Re: DNN 3.1.1, Cute Editor 5 - Setting the EditorBodyStyle property in Web.config

    You are welcome.

    >>but I also wanted to show my own set of styles in the drop down Css list

    That's a good point.

    Try:

    EditorWysiwygModeCss="/yourpath/example.css"



     
     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  09-12-2005, 4:25 PM 10421 in reply to 10402

    Re: DNN 3.1.1, Cute Editor 5 - Setting the EditorBodyStyle property in Web.config

    Ok thanks for your help, after a bit of work, I think I've worked out a good combination that works with DNN.
    This might be useful for other new users...
    Here is what I have in my Web.config:

    ... 
    EditorBodyStyle="background-color: #FFF; color: #000;"
    EditorWysiwygModeCss="~\Portals\_default\Skins\SKINNAME\skin.css"
    ...

    You should point your EditorWysiwygModeCss to your skin.css file.  This is because if you point it to another CSS file, those styles are not going to be applied to the page when you update the module - i.e. any other CSS file would only be applied whilst editing, whereas the skin.css file is always applied to your pages. 

    You could if you want set it to another CSS file, as long as the styles defined in it are the same named styles that are in your skin.css file.  You could do this for example if you only want the user to see a subset of the styles defined in you skin.css.

    Also, I would not style HTML tags directly in your skin.css file - for example I was styling the p tag as follows:

    p {
      color: #FFF;
    }

    This causes a problem in the Cute editor, because all the drop downs were showing white on white, so I couldn't read what any of the styles were called when editing.  

    I tried to fix this by adding color: #000; to the .CuteEditorDropDown styles in the 'Themes/Office2003_BlueTheme/style.css.aspx' file.  This made the text in the drop downs black on white, but had the undesired effect of not showing what the true colours of any styles I had defined in skin.css were.

    I hope that helps someone!


  •  09-13-2005, 7:18 AM 10472 in reply to 10421

    Re: DNN 3.1.1, Cute Editor 5 - Setting the EditorBodyStyle property in Web.config

    Ok, I'm still having a lot of pain. 
     
    How does the EditorWysiwygModeCss property work?  I was under the impression that I could overwrite the styles I have in my skin.css file so that I could actually read them in the drop down lists (i.e. change all the colors of my white fonts to black so that I could read them on the white background).
     
    So I have this as my EditorWysiwygModeCss property:
     
    EditorWysiwygModeCss="~\Portals\_default\Skins\SKINNAME\editor.css"
     
    In my skin.css file I have a style which had a white colour (to go on my black background):

    .MyStyle {
        color: #FFF;
        ...
    }
     
    But in the drop down list of Css classes in the cute editor, I want to change it to black so that i can read it in the dropdown, so in my editor.css file I did this:
     
    .MyStyle {
        color: #000;
        ...
    }
     
    However, that doesn't work :(  it seems to read the styles in editor.css to populate the drop down list, but actually apply the styles with the same name from skin.css
     
    What can I do???!!
  •  09-13-2005, 12:29 PM 10489 in reply to 10472

    Re: DNN 3.1.1, Cute Editor 5 - Setting the EditorBodyStyle property in Web.config

    Can you explain more details?
     
    Suggestion: if your web site background-Color is black, you may need to use the black background in the editor as well.
     
    Hope it helps.
     
     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  09-13-2005, 5:00 PM 10515 in reply to 10489

    Re: DNN 3.1.1, Cute Editor 5 - Setting the EditorBodyStyle property in Web.config

    Ok I've been going round in circles all day and I think I've broken it down to one simple problem.

    If I have the following line set in my Web.config, then the editor works fine, and shows the correct styles in the Normal and Preview views:

    EditorWysiwygModeCss="~\Portals\_default\Skins\SKINNAME\skin.css"
     
    However, if I change the line to the following, then no styles are applied in the editor:
     
    EditorWysiwygModeCss="~\Portals\_default\Skins\SKINNAME\editor.css"
     
    Even though editor.css contains THE EXACT SAME DATA as skin.css
     
    Does the style sheet defined in the EditorWysiwygModeCss property have to be linked in the header of the document? 

    This would explain why skin.css works, but editor.css doesn't.   If this is the case, then it's a bit of a problem with DNN unless I alter Default.aspx (effectively a Core change).
     
     
  •  09-14-2005, 7:44 AM 10541 in reply to 10515

    Re: DNN 3.1.1, Cute Editor 5 - Setting the EditorBodyStyle property in Web.config

    Ok, I don't know what's happened, but it seems to be working now.  However, I have the same background image problem that is described in this thread:
     
     
    i.e.  I have EditorBodyStyle="background-image: none;" set - the background is not displayed in Normal and Preview modes, but it is in HTML view.  When I click on Preview and back to HTML, the background is not displayed.
     
    Has this bug been fixed?
  •  09-14-2005, 12:00 PM 10551 in reply to 10541

    Re: DNN 3.1.1, Cute Editor 5 - Setting the EditorBodyStyle property in Web.config

     
    For the background-Color issue.
     
    Open your web.config file, in the CuteEditor section, make sure you specify the background to white:

    EditorBodyStyle="background-color:#ffffff"
     
    Keep me posted.

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

View as RSS news feed in XML