The Joomla! Forum ™



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.



Post new topic Reply to topic  [ 11 posts ] 
Author Message
PostPosted: Sun Jan 29, 2006 8:06 am 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Aug 21, 2005 6:51 pm
Posts: 38
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:
[color=blue]/templates/TEMPLATENAME/css/editor_content.css
[/color]

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.

Top
 Profile  
 
PostPosted: Thu Feb 02, 2006 3:21 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Feb 02, 2006 3:15 pm
Posts: 14
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


Top
 Profile  
 
PostPosted: Fri Feb 03, 2006 10:35 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Jan 26, 2006 7:48 pm
Posts: 9
take a look here:

http://forum.joomla.org/index.php/topic ... 96173.html


Top
 Profile  
 
PostPosted: Sat May 06, 2006 7:12 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu May 04, 2006 5:32 am
Posts: 15
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).


Top
 Profile  
 
PostPosted: Wed Sep 13, 2006 3:33 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Oct 25, 2005 2:04 am
Posts: 39
I tried accessing the mambot and it says restricted access :(


Top
 Profile  
 
PostPosted: Wed Sep 13, 2006 1:37 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu May 04, 2006 5:32 am
Posts: 15
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).


Top
 Profile  
 
PostPosted: Thu Jul 10, 2008 8:44 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Mon Feb 27, 2006 7:52 pm
Posts: 258
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.


Top
 Profile  
 
PostPosted: Tue Aug 12, 2008 4:59 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Wed May 07, 2008 3:25 am
Posts: 4
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?


Top
 Profile  
 
PostPosted: Thu Jun 25, 2009 9:12 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Thu Jun 25, 2009 9:01 pm
Posts: 1
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.


Top
 Profile  
 
PostPosted: Thu Jul 23, 2009 9:37 am 
Joomla! Intern
Joomla! Intern
Online

Joined: Wed Sep 07, 2005 5:56 pm
Posts: 64
None of the previous answers where working in my case, for I have (and must have) in my template
Code:
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:
.mceContentBody  {
   background: none !important;
}


and it works :)


Top
 Profile  
 
PostPosted: Thu Nov 03, 2011 9:20 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Thu Nov 03, 2011 9:16 am
Posts: 2
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.

_________________
http://mylocalcause.com


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 11 posts ] 



Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group