How to: TinyMCE editor dark background fix, custom CSS styles

Need help with a WYSIWYG-editor in Joomla! 1.0.x? This is the place to be.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Locked
User avatar
Heat
Joomla! Apprentice
Joomla! Apprentice
Posts: 38
Joined: Sun Aug 21, 2005 6:51 pm
Contact:

How to: TinyMCE editor dark background fix, custom CSS styles

Post by Heat » Sun Jan 29, 2006 8:06 am

How to fix the dark background in TinyMCE editor when your site has a dark background.

Additional: Also, how to set up custom CSS classes just for the editor.

I'm using Joomla 1.07 and tested with IE 6 and Firefox 1.07 and I use the TinyMCE editor in advanced mode.

Dark Background fix

By default, TinyMCE editor uses your template's CSS file to determine the background of the textarea of the editor. This is fine if
your site has the same background as it's content area. But for those of us who have a site with a dark background and a light
content area, it can be impossible to see what you're doing. Not only does the editor use the current template's template_css.css
file, it has it's own CSS file and we will make use of it in this fix.

1. Browse your Joomla installation and find the following file
/mambots/editors/tinymce/jscripts/tiny_mce/themes/advanced/css/editor_content.css.

2. Now copy this file to the CSS folder of your site's current theme.

3. Log into your administration backend and go to Mambots/Site Mambots.
In the Mambot Manager find TinyMCE WYSIWYG Editor and click.


4. In the right Parameters column find Template CSS classes and make sure Yes is clicked. Below that, find Custom CSS Classes.
    In the field next to it type in the path to your template's CSS folder along with the name of the CSS you just copied there.


Example:
/templates/TEMPLATENAME/css/editor_content.css


Now test it. Refresh your browser, log in and hopefully the editor will have a white background...great!

New problem, where are my styles? Well, since we no longer use the theme's CSS file for the editor, we don't have the styles for
our site to apply while we compose/edit. Read on to the next section while we fix this AND we improve upon it's usage.

Custom CSS classes in the editor

Now your editor is lacking all those style classes your template uses. One easy fix would be to just open the templates CSS file and
copy/paste all those classes into editor_content.css wouldn't it?

Wait a second. Do you really need ALL those classes to show up in the editor's dropdown menu? Many of those classes apply
to sections of your template not accessible by the WYSIWYG editor. How about we just use a few select classes we know we
need for our editable content.

I like this idea because registered members submit edited content to the site and I don't want
Joe Schmoe submitting content after he has highlighted some text and applied the wrong style
to it(remember that purple color used only in the pathway text!).


So basically we copy over only those classes we need/allow for editing content. I even went one step further and renamed the classes so anyone could read them in the editor's menu and know what they are used for.

Important: any styles you add to editor_content.css must also be added to your template's template_css.css file for them to work while viewing the content of your site.

Here is an example of what I put in my CSS file.
Note: leave the existing content in editor_content.css, just add to it.

Style used for a table

table.table_light_grey
{
background: #f7f7f7;
padding: 1px;
}


Style used to for italicized text(good for footnotes)

.text_small_9_grey_italic
{
  font-style: Arial, Helvetica, sans-serif;
color: #999999;
font-size: 9px;
font-style: italic;
}


This worked great for me. you can even add different font face styles.

The only problem I forsee is if you run a site with a theme chooser.
In this case, you would need to make sure you did the above steps for each theme.
Last edited by Heat on Sun Jan 29, 2006 8:25 am, edited 1 time in total.

sirmistermatt
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Thu Feb 02, 2006 3:15 pm
Contact:

Re: How to: TinyMCE editor dark background fix, custom CSS styles

Post by sirmistermatt » Thu Feb 02, 2006 3:21 pm

The quick fix for me was as follows:

On administration panel, from Mambots menu, select Site Mambots.

Put a check next to TinyMCE WYSIWYG Editor, click Edit button at top of page

On left side of next page under "Parameters," where it says Template CSS Classes, select No.

Click Save button at top of page.

VOILA! Done. No complex this and that. I'd imagine most people don't care to customize their backend editor.
http://www.monshishi.com - Gothic Clothing

meisi
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu Jan 26, 2006 7:48 pm

Re: How to: TinyMCE editor dark background fix, custom CSS styles

Post by meisi » Fri Feb 03, 2006 10:35 am


ia2ca
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Thu May 04, 2006 5:32 am

Re: How to: TinyMCE editor dark background fix, custom CSS styles

Post by ia2ca » Sat May 06, 2006 7:12 pm

I too had the same issue - but didn't go through all that mess to fix it.  I just added:

background-color:  #000000

to the "custom CSS class" input box in the setup for TinyMCE (mambot).

benthabits
Joomla! Apprentice
Joomla! Apprentice
Posts: 39
Joined: Tue Oct 25, 2005 2:04 am

Re: How to: TinyMCE editor dark background fix, custom CSS styles

Post by benthabits » Wed Sep 13, 2006 3:33 am

I tried accessing the mambot and it says restricted access :(

ia2ca
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Thu May 04, 2006 5:32 am

Re: How to: TinyMCE editor dark background fix, custom CSS styles

Post by ia2ca » Wed Sep 13, 2006 1:37 pm

There is a known bug with mambot access and 1.12 (and an easy fix).  Do a quick forum search and you'll find it (don't have the link handy).

User avatar
railer
Joomla! Explorer
Joomla! Explorer
Posts: 291
Joined: Mon Feb 27, 2006 7:52 pm

Re: How to: TinyMCE editor dark background fix, custom CSS style

Post by railer » Thu Jul 10, 2008 8:44 pm

Thanks sirmistermatt,
Your method worked for me too! I turned off Template CSS Classes in both of my text editors. Don't know what all that other stuff was that others are recommending in this thread.
Best,
railer
sirmistermatt wrote:The quick fix for me was as follows:

On administration panel, from Mambots menu, select Site Mambots.

Put a check next to TinyMCE WYSIWYG Editor, click Edit button at top of page

On left side of next page under "Parameters," where it says Template CSS Classes, select No.

kdcpelt
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Wed May 07, 2008 3:25 am

Re: How to: TinyMCE editor dark background fix, custom CSS style

Post by kdcpelt » Tue Aug 12, 2008 4:59 pm

Greetings,
I too, attempted this fix (Joomla 1.5) but despite attempts to get the pathname in there and turning the CSS Template setting to "NO", I do not see any styles in the list. Per the instructions, the path name should be:

/templates/TEMPLATENAME/css/editor_content.css

right?

Also per the instructions there should be a file called "template_css.css" which must contain the same style which was placed in "editor_content.css"....

right?

I still see no update to the pulldown menu in TinyMCE. Any thoughts on why this would be?

Ui Neill
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Jun 25, 2009 9:01 pm

Re: How to: TinyMCE editor dark background fix, custom CSS style

Post by Ui Neill » Thu Jun 25, 2009 9:12 pm

Using Joomla! 1.5 with TinyMCE 2.0
I just renamed the editor.css (xditor.css) file so TinyMCE editor can't find it or use it.
It reverted to black type on white background.
Sometimes the simple solution is the best.

Pachat
Joomla! Intern
Joomla! Intern
Posts: 68
Joined: Wed Sep 07, 2005 5:56 pm

Re: How to: TinyMCE editor dark background fix, custom CSS style

Post by Pachat » Thu Jul 23, 2009 9:37 am

None of the previous answers where working in my case, for I have (and must have) in my template

Code: Select all

body {
	background: #ededed url(../images/someimage.jpg) 0 0 repeat-x !important;
}
(It worked only if I removed !important but the page would show some defects then).

So, the only very simple thing I did is to add the following in my template.css

Code: Select all

.mceContentBody  {
	background: none !important;
}
and it works :)

mannu_3
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Thu Nov 03, 2011 9:16 am
Contact:

Re: How to: TinyMCE editor dark background fix, custom CSS s

Post by mannu_3 » Thu Nov 03, 2011 9:20 am

I upgraded to Mambo 4.5.2. I like it very much despite small problems with 3rd party components that couldn't be corrected with patches or uninstalling them. Why was dark blue choosen as the background color in TinyMCE editor instead of white like in 4.5.1a. I think it is harder to see text when editing.


Locked

Return to “WYSIWYG Editors - 1.0.x”