Mis-matching styles being applied to Editor

Last post 09-14-2009, 1:54 PM by Kyrus. 3 replies.
Sort Posts: Previous Next
  •  09-14-2009, 11:33 AM 55615

    Mis-matching styles being applied to Editor

    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.
  •  09-14-2009, 11:51 AM 55619 in reply to 55615

    Re: Mis-matching styles being applied to Editor

    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).
  •  09-14-2009, 11:54 AM 55620 in reply to 55615

    Re: Mis-matching styles being applied to Editor

    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:

    body, td { font-family: Verdana; }

    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-14-2009, 1:54 PM 55624 in reply to 55620

    Re: Mis-matching styles being applied to Editor

    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;
    }

     
View as RSS news feed in XML