WYSIWYG editors are unreadable font color

[Kershek]

My site has a blue background with light yellow text.  Whether I use either the standard WYSIWYG editor or JCE, both show a white background with the light yellow text of my articles, which is unreadable.  How can I get the background changed so it is the same as my site?

Here is my site:
http://baronyoftwinmoons.org/

[colza]

I don't see a problem, I take it you fixed it?

If you did good on you,
always better to find out yourself, then you remember it  lol

Colza

P.S did you use the css file or what.

[Kershek]

No, the problem is still occurring.  On the front end, it happens when editing calendar items or creating news items (both of which require registration). On the back end, it happens on any HTML editing screen.

I also have a problem with how lists show up, because the alternating background colors really mess with the blue background and don't look good.  You can see that plainly here:  http://baronyoftwinmoons.org/history/bardic-tales/ .  I suspect there will be css-editing involved there, but it's very difficult for me to find the right value to change.

Hopefully, both of these questions can be answered by the gurus here!

[jakebls]

Hello

In JCE, you can call a custom CSS file that the editor uses.
From the backend:
  - Components>JCE Admin>JCE Configuration
  - Set Template CSS Classes to NO
  - In the Custom CSS Classes field, enter the name of your CSS file for the editor to use. (editor_content.css)
  - Save the Configuration.
  - In your current Template CSS folder add the CSS file for the editor to use (editor_content.css).

In the editor_content.css file you can set the editors background color by using the BODY tag.

BODY {
margin: 0px 0px 0px 0px;
background-color : #ffffff ;
color : #000000;
}

You should also add the rest of the tags that are setup in your template_css.css file that the editor will use (p h1, h2, h3, a:link, etc)

Here is a basic on that  I use for the editor_content.css:

html{
  font-family      : Verdana, Arial, Helvetica, sans-serif;
}

BODY {
margin: 0px 0px 0px 0px;
background-color : #ffffff ;
color : #000000;
}

h1 {
color: #000; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 36px; font-weight: bold;
}

h2 {
color: #000; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 30px; font-weight: bold;
}

h3 {
color: #000; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 24px; font-weight: bold;
}


h4 {
color: #000; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 18px; font-weight: bold;
}

h5 {
color: #000; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 14px; font-weight: bold;
}

h6 {
color: #000; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; font-weight: bold;
}

/* Horizontal Line */
hr {
background: #FF6600; height:2px; border: 1px inset;
}

hr.separator {
background: #FF6600;
height: 1px;
width: 75px;
border: 0px;
}

.x-small, .x-small a:link  {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8px;
color:#3366C0;
text-decoration:none;
font-weight:medium;
}


.small {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF6600;
text-decoration: none;
font-weight: normal;
}

.smalldark {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #333333;
        text-decoration: none;
        font-weight: normal;
        }

td,tr, div {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}

p{
  font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
  color: #000000; word-wrap: break-word;}
 
ul {
text-indent: 0px;
        list-style: disc;
        list-style-position:inside;
        list-style-type: disc;
        padding: 10px;
        margin: 20px;

}
li {
list-style: disc;
  list-style-position:inside;
        text-indent: 2px;
        list-style-position: inside;
        list-style-type: disc;
        padding: 2px;
        margin: 2px;

}

br{
clear: all;
}


Hope this helps!
Jake

[Kershek]

Thanks!  I'll try that tonight.

[pe7er]

jakebls solution sounds good! However, you could try some shorter method.

Put the following in your template_css.css:
.mceContentBody {
text-align: left;
background: #FFF none;
font: normal 11px Arial, Helvetica, sans-serif;
}
btw: this method is for the TinyMCE editor, I don't know if it works with JCE.
Maybe you'll have to add some CSS class name to .mceContentBody for JCE...

[jakebls]

Good call pe7er !  I'll have to try that!

[arst06d]

Thanks Pe7er, that sorted out my problem with JCE.

[bushie]

Odd, but the .mce fix didn't work for me.  I still had that damned black background.  I did switch the classes of in the template_css file and went to editor css and got the white background.

Only problem now is that I am finding all the HTML content is coded with tags instead of tags.  Now some may not worry about this, but as a "traditional" coder I want my  paragraphs back.

Cheers,


Ric

[goodgbb]

Follow these easy steps to solve the background annoying problem!

1. Use JCE editor
2. Components -> JCE Admin -> JCE Configuration -> Template CSS classes = No
3. Done!

[MeanCatCoffee]

Follow these easy steps to solve the background annoying problem!

1. Use JCE editor
2. Components -> JCE Admin -> JCE Configuration -> Template CSS classes = No
3. Done!

That method did solve my problem. I now have black text on a white background when editing content. The only problem is now whenever I am editing something the following error appears at the top of the page:

* The file name 'templates/joomlage0018-earthslight/css/editor_content.css' was entered in the JCE Custom CSS field. This file could not be found in the default templates folder.
* The css file '/templates/system/css/editor.css' is being used instead.

Other than getting that error, everything seems to be working just fine. But that error is really irritating me and I would like to get rid of it. I did not add anything to my css file as pe7er suggested above because I was not sure where exactly in the css file to add the string (I can open and edit the file).

Sorry to be so dense. Can anyone help?