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???!!
    

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.

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:

 

 

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!

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???!!

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.

 

 

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).

 

 

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?

 

For the background-Color issue.