The Normal tab of the editor is using BODY for the background color, and the CSSStyle for the text color.

 

I dont think the BODY tag should be applied at all to the editor as what is specified in BODY does not apply to the editor.

Just because I set a BGColor in the BODY tag does not mean that is going to be the background color for where I place the HTML. I tried changing the background color to white using the BackColor property, but that didnt work.

Here is the situation, BODY background-color: black. The style that sets the area where text is displayed is .Content with a background-color: #FFFF00. The style that sets the text color is .Normal with a color: black.

 

The Normal tab of the editor shows black on black, I have to physically change the color of the text to white, even though I dont want the text color to be white, I want it to be black as this is the correct color for the .Content foreground, but I cant see what I'm typing. In addition the preview tab show what I've typed as black on black as well (but only for the area where I typed, the rest is white).

Kyrus,

 

Please check the following property setting of your editor.

 

Editor.EditorWysiwygModeCss Property
Specifies the location of the style sheet that will be used by the editable area. Multiple Style Sheets are supported. Example EditorWysiwygModeCss="example.css,~/portal.css,/default.css"  

 

Editor.EditorBodyStyle Property

The style to be applied to the Editor body.   

Cute Editor uses default font of the current page.  The default font of web page is Times new roman. If you want to change the default font from Times new roman to Verdana, you can add the following code into the style sheet file:

I had changed my site over to some wacky colors just to make sure eveything was styling correctly, most of the time the background for the page will be white... but I should still get this to work properly.

The following setup results in black on black, I'm not sure what I'm missing...

            base.AutoConfigure = AutoConfigure.Default;
            base.EnableStripScriptTags = false;
            base.EditorBodyClass = "HTMLEditor_BodyStyle";
            base.PreviewModeCss = "HTMLEditor_BodyStyle";
           
            base.CssClass = "HTMLEditor_Text";
           
            base.ThemeType = ThemeType.Office2007;

            if (!My.WebConfig.CuteSoft.UsePortalCSS)
                base.AutoParseClasses = false;
            else
            {
                base.AutoParseClasses = true;
                base.EditorWysiwygModeCss = My.User.StyleSheet; 
            }

 

The styles for the HTMLEditor are

.HTMLEditor_BodyStyle
{
 background-color: White;
 color: Black;
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    FONT-FAMILY: Calibri;
}
.HTMLEditor_Text
{
    color: White;
    background-color: Black;
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    FONT-FAMILY: Calibri;
}

 

The styles pumped into EditorWysiwygModeCss are

.HeadBg
{
    COLOR: #FFFFFF;
    BACKGROUND-COLOR: #2072a4;
}
BODY
{
    background-color: black;
  
}
.SiteTitle
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 20pt;
    COLOR: white;
    FONT-FAMILY: Calibri
}
.ComponentTitle
{
    BACKGROUND-COLOR: black
}
.SubTabBg
{
    FONT-WEIGHT: normal;
    BORDER-LEFT-COLOR: #004684;
    BORDER-BOTTOM-COLOR: #004684;
    COLOR: blue;
    BORDER-TOP-COLOR: #004684;
    BACKGROUND-COLOR: #87c1d2;
    BORDER-RIGHT-COLOR: #004684
}
.TabBg
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    BORDER-LEFT-COLOR: #7fb1de ;
    BORDER-BOTTOM-COLOR: #7fb1de ;
    COLOR: white;
    BORDER-TOP-COLOR: #7fb1de ;
    FONT-FAMILY: Calibri;
    BACKGROUND-COLOR: #87c1d2;
    BORDER-RIGHT-COLOR: #7fb1de
}

.TabBgBorderless
{
    BORDER-LEFT-COLOR: #004684;
    BORDER-BOTTOM-COLOR: #004684;
    BORDER-TOP-COLOR: #004684;
    BACKGROUND-COLOR: gray;
    BORDER-RIGHT-COLOR: #004684
}
.OtherTabsBg
{
    BORDER-LEFT-COLOR: white;
    BORDER-BOTTOM-COLOR: white;
    BORDER-TOP-COLOR: white;
    BACKGROUND-COLOR: #004684;
    BORDER-RIGHT-COLOR: white
}
.OtherTabsBgBorderless
{
 border-bottom: solid 1px black;
 border-right: solid 1px black;
}
.SelectedTab
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: white;
    BACKGROUND-COLOR: #87c1d2;
    FONT-FAMILY: Calibri
}
.SelectedTabBorderless
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: white;
    FONT-FAMILY: Calibri
}
A.SelectedTab:link
{
    COLOR: #004684;
    TEXT-DECORATION: none
}
A.SelectedTabBorderless:link
{
    COLOR: white;
    TEXT-DECORATION: none
}
A.SelectedTab:visited
{
    COLOR: #004684;
    TEXT-DECORATION: none
}
A.SelectedTabBorderless:visited
{
    COLOR: white;
    TEXT-DECORATION: none
}
A.SelectedTab:active
{
    COLOR: #004684;
    TEXT-DECORATION: none
}
A.SelectedTabBorderless:active
{
    COLOR: white;
    TEXT-DECORATION: none
}
A.SelectedTab:hover
{
    COLOR: #004684;
    TEXT-DECORATION: none
}
A.SelectedTabBorderless:hover
{
    COLOR: white;
    TEXT-DECORATION: underline
}
.SubOtherTabs
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    BORDER-LEFT-COLOR: #7fb1de ;
    BORDER-BOTTOM-COLOR: #7fb1de ;
    COLOR: black;
    BORDER-TOP-COLOR: #7fb1de ;
    FONT-FAMILY: Calibri;
    BACKGROUND-COLOR: #7fb1de;
    TEXT-DECORATION: none;
    BORDER-RIGHT-COLOR: #7fb1de
}
.OtherTabs
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    BORDER-LEFT-COLOR: #7fb1de ;
    BORDER-BOTTOM-COLOR: #7fb1de ;
    COLOR: white;
    BORDER-TOP-COLOR: #7fb1de ;
    FONT-FAMILY: Calibri;
    BACKGROUND-COLOR: #004684;
    TEXT-DECORATION: none;
    BORDER-RIGHT-COLOR: #7fb1de
}
.OtherTabsBorderless, .OtherTabsBorderlessText
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Calibri;
    TEXT-DECORATION: none;
}
.OtherTabsBorderless
{
 border-bottom: solid 1px black;
    BACKGROUND-COLOR: #87C1D2;
}
a.OtherTabs:link
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: white;
    TEXT-DECORATION: none
}
a.OtherTabsBorderlessText:link
{
    COLOR: black;
    TEXT-DECORATION: none
}
a.OtherTabs:visited
{
    COLOR: black;
    TEXT-DECORATION: none
}
a.OtherTabsBorderlessText:visited
{
    COLOR: black;
    TEXT-DECORATION: none
}
a.OtherTabs:active
{
    COLOR: black;
    TEXT-DECORATION: none
}
a.OtherTabsBorderlessText:active
{
    COLOR: black;
    TEXT-DECORATION: none
}
a.OtherTabs:hover
{
    COLOR: black;
    TEXT-DECORATION: underline
}
a.OtherTabsBorderlessText:hover
{
    COLOR: black;
    TEXT-DECORATION: underline
}
.SiteLink
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Calibri;
    BACKGROUND-COLOR: #87c1d2;
}
A.SiteLink:link
{
    COLOR: black;
    TEXT-DECORATION: none
}
A.SiteLink:visited
{
    COLOR: black;
    TEXT-DECORATION: none
}
A.SiteLink:active
{
    COLOR: black;
    TEXT-DECORATION: none
}
A.SiteLink:hover
{
    COLOR: #004684;
    TEXT-DECORATION: underline
}
.Accent, .AccentText
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Calibri
}
.Message
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    FONT-FAMILY: Calibri;
    BACKGROUND-COLOR: #87c1d2
}
.ItemTitle
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Calibri
}
.Head, .HeadText
{
    FONT-WEIGHT: bolder;
    FONT-SIZE: 10pt;
    COLOR: white;
    FONT-STYLE: normal;
    FONT-FAMILY: Calibri;
    BACKGROUND-COLOR: #2072a4;
}
.SubHead
{
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Calibri
}
.SubSubHead
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Calibri
}

/* these are a Tree styles */
.NormalTreeCss
{
 font-family: Calibri;
    font-weight: normal;
    line-height: 12px;
 font-size: 11px;
 color: black;
}
   
.SelectedTreeCss
{
 font-family: Calibri;
    font-weight: normal;
    line-height: 12px;
 font-size: 11px;
 color:White;
 background: navy;
}

.OverTreeCss
{
 font-family: Calibri;
    font-weight: normal;
    line-height: 12px;
 font-size: 11px;
 color:White;
 background-color: #33ccff;
}
   
.CutTreeCss
{
 font-family: Calibri;
    font-weight: normal;
    line-height: 12px;
 font-size: 11px;
 color: white;
 background: gray;
}

.Normal
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    FONT-FAMILY: Calibri;
    color: Black;
}
.Normal a:link  { color: Black; text-decoration: underline; }
.Normal a:visited { color: Black; text-decoration: underline; }
.Normal a:active { color: Black; text-decoration: underline; }
.Normal a:hover  { color: Black; text-decoration: underline; }

.NormalTextBox
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    FONT-FAMILY: Calibri
}
.NormalRed
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: blue;
    FONT-FAMILY: Calibri
}
.NormalBold
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    FONT-FAMILY: Calibri;
    TEXT-DECORATION: none
}
.NormalBold a:link  { color: Black; text-decoration: underline; }
.NormalBold a:visited { color: Black; text-decoration: underline; }
.NormalBold a:active { color: Black; text-decoration: underline; }
.NormalBold a:hover  { color: Black; text-decoration: underline; }

.CommandButton
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    FONT-FAMILY: Calibri
}
A.CommandButton:link
{
    COLOR: black;
    TEXT-DECORATION: underline
}
A.CommandButton:visited
{
    COLOR: black;
    TEXT-DECORATION: underline
}
A.CommandButton:active
{
    COLOR: black;
    TEXT-DECORATION: underline
}
A.CommandButton:hover
{
    COLOR: blue;
    TEXT-DECORATION: underline
}

.DataGridSelect
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 11px;
    BACKGROUND-IMAGE: none;
    LINE-HEIGHT: 12px;
    BACKGROUND-REPEAT: repeat;
    FONT-FAMILY: Calibri;
    BACKGROUND-COLOR: #D3D3D3
}
.RightMenu
{
    BORDER-RIGHT: buttonhighlight 2px outset;
    BORDER-TOP: buttonhighlight 2px outset;
    BORDER-LEFT: buttonhighlight 2px outset;
    WIDTH: 120px;
    BORDER-BOTTOM: buttonhighlight 2px outset;
    POSITION: absolute;
    BACKGROUND-COLOR: menu;
    TEXT-ALIGN: left
}
.RightMenuItem
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    FONT-FAMILY: Calibri
}
.RightMenuItem:hover
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: white;
    FONT-FAMILY: Calibri;
    BACKGROUND-COLOR: #0099cc;
    TEXT-DECORATION: none
}
.RightMenuImage
{
    BACKGROUND-COLOR: #33ccff
}
.RightMenuImage:hover
{
    BACKGROUND-COLOR: #0099cc
}
H1
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 20px;
    COLOR: #666644;
    FONT-FAMILY: Calibri
}
H2
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 20px;
    COLOR: #666644;
    FONT-FAMILY: Calibri
}
H3
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 12px;
    COLOR: #004684;
    FONT-FAMILY: Calibri
}
H4
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 12px;
    COLOR: #004684;
    FONT-FAMILY: Calibri
}
H5
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    COLOR: #004684;
    FONT-FAMILY: Calibri
}
DT
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    COLOR: #004684;
    FONT-FAMILY: Calibri
}
H6
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    COLOR: #004684;
    FONT-FAMILY: Calibri
}
TFOOT
{
    FONT-SIZE: 12px;
    COLOR: #004684;
    FONT-FAMILY: Calibri
}
THEAD
{
    FONT-SIZE: 12px;
    COLOR: #004684;
    FONT-FAMILY: Calibri
}
TH
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    VERTICAL-ALIGN: baseline;
    COLOR: #004684;
    FONT-FAMILY: Calibri
}
A:link
{
    COLOR: #004684;
    TEXT-DECORATION: none
}
A:visited
{
    COLOR: #004684;
    TEXT-DECORATION: none
}
A:active
{
    COLOR: #004684;
    TEXT-DECORATION: none
}
A:hover
{
    COLOR: blue;
    TEXT-DECORATION: underline
}
SMALL
{
    FONT-SIZE: 8px
}
BIG
{
    FONT-SIZE: 14px
}
BLOCKQUOTE
{
    FONT-FAMILY: Lucida Console, monospace
}
PRE
{
    FONT-FAMILY: Lucida Console, monospace
}
UL LI
{
    LIST-STYLE-TYPE: square
}
UL LI LI
{
    LIST-STYLE-TYPE: disc
}
UL LI LI LI
{
    LIST-STYLE-TYPE: circle
}
OL LI
{
    LIST-STYLE-TYPE: decimal
}
OL OL LI
{
    LIST-STYLE-TYPE: lower-alpha
}
OL OL OL LI
{
    LIST-STYLE-TYPE: lower-roman
}

.NewItem
{
 color: Red;
 vertical-align: super;
 font-size: 6pt;
 font-family: Calibri
}
.ErrorText
{
 FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    FONT-FAMILY: Calibri;
 color: Red;
}
.Help_Image
{
 height: 12px;
 width: 12px;
 background-image: url(../images/help_blue.gif);
}
.hr
{
 height: 1px;
 background-color: Black;
}