1

Topic: Change background color (solved)

How can I change the background color of tinymce?  I have a bunch of input obxes on my form and then a textarea that turns into the tinymce.  All the controls on the page have an orange color (even the textarea), but when the textarea becomes tinymce, it shows up white.

2

Re: Change background color (solved)

Nevermind, I figured it out, it is the editor_content.css in the theme dir.  I alos saw that I can pass in another CSS in the init with content_css, so I just passed in the CSS I am using for the rest of the page.

3

Re: Change background color (solved)

I was also looking for this and I hoped to find the solution here but I already tried editing that css file... for example I have this in the css file:

body {
    background-color: #333333;
        margin:15px;
}

but the background of the textfield is still white as it was before and there is no marginb between the textarea and the rest.


I also noticed that in the three css files,
editor_ui
editor_content
editor_popup
some of the things just don't seem to change when I modifiy the information. Pretty weird.

4

Re: Change background color (solved)

After setting content_css to my own stylesheet, within the mce editor area I see the body background, instead of the background colour set by the mceEditorArea class in editor_ui.css... either that or the editor area is transparent and is making the underlying div colour also transparent!

Any ideas?

FYI:
In my custom css I have...

body
{
    font: 1em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #676767;
    margin: 0px;
    padding: 20px;
    background: transparent url(/gsc/images/gold_stripe.gif) repeat fixed;
}

Is it possible that the editor_ui.css stylesheet isn't being picked up now I'm over-riding the content_css parameter?

5

Re: Change background color (solved)

Most of the time these problems are related to CSS rules being not specific enough. For example, the body{...} rule in ianaturners post might(!) be overruled by any font:... rule of any tag within the body tag itself.
I always go for a content_css file with specific rules for whats "inside" the textarea, for example:

body { background:#fff url(/img/css/backgroundimg.png) no-repeat left top; } /* bg of editor */
body p { font-size:0.8em; color:#000; } /* paragraphs within editor */
body p a { color:#00c; text-decoration: underline; } /* links within paragraphs within editor */

This content_css file is different from my normal page related css file, simply because rules like body {...} are applied to the body tag of the editor and not the body tag of the whole page.

Also very helpful is a Firefox plugin called "Web Developer Tools", where you can enable a CSS hover mouse cursor, which then shows the applied CSS rule of the hovered html element. As far as I remember, there is a similar IE addon as well.

Last edited by donadoni (2005-11-01 09:57:00)

Donadoni

6

Re: Change background color (solved)

Of course I *want* the body of my TinyMCE textarea replacement to look like my page, but only for the text styles, so that my users get a true WSIWYG experience... and hence I set content_css to the same stylesheet as the page it sits on - so I shouldn't have been surprised when the background of the editor area is the same is my body class - perhaps I just expected a wrapper class within body so I can set e.g. the editor background colour to white.

I have now segmented my CSS appropriately.

smile

7

Re: Change background color (solved)

I still don't get it - where can I set the background of the WYSIWYG textarea? I've tried to set it in many places, but nothing changes. IE will show it blue, but Firefox white no matter what.

"Web Developer Tools" doesn't help - it cannot determine what CSS is applied to the textarea. Even more - it cannot even tell what html element it is!

Please, does someone know where the background colour of these textareas is set?!

Last edited by eyedam (2005-12-22 00:09:32)

8

Re: Change background color (solved)

Look at the source code of this example.

Donadoni

9

Re: Change background color (solved)

Thanks for the link!

When I add the content_css definition, I get that textarea white in both Firefox AND IE (not only IE), so at least something cleared out. smile

Still, I cannot manage to change it to other colour than white. If I choose the css file to be 'css/editor_ui.css', then, if I set body background with it, it changes the backoground of the body for the main document, but the textarea is still white. I can avoid changing the background of the main page though if I set only background-colour, as I have an image for the main page there.

If I choose the css file to be something else, like 'css/editorarea.css', it just doesn't change anything, including the background for main page.

I have this kind of script for initializing the tinyMCE editor. Is it correct? Maybe I've made some mistake with making this?

<script language='javascript' type='text/javascript'>
tinyMCE.init ({
    mode : 'textareas',
    theme : 'simple',
    language : 'en',
    browsers: 'msie, gecko',
    content_css: 'css/editorarea.css'
}); 
</script>

Thanks!

Last edited by eyedam (2005-12-22 01:22:52)

10

Re: Change background color (solved)

My first guess is that content_css won't work with the "simple" theme, but I have to verify that. Try to use the advanced theme, like the config in the example.

Donadoni

11

Re: Change background color (solved)

I got a different background with the advanced theme, thanks!

But now I cannot get padding - I don't like that the text appears right next to the textarea border.

If I set padding in that "content_css: 'css/editorarea.css'" file, nothing changes. I get some padding if I set it in "editor_ui.css" under .mceEditor. Unfortunately, the toolbar buttons (I have them at the bottom) are detached from the border by that padding too. What can I do?

I've tried to set the padding under .mceContentBody both in "editorarea.css" and "editor_ui.css", but that doesn't affect anything either.

Thanks!

Last edited by eyedam (2006-01-26 21:03:50)

12

Re: Change background color (solved)

TinyMCE have a bug with file cashing in all browsers (check Mozilla 1.5, IE 6.0). I try change redactor background color with "content_css" derective, but failed until clear cash in browsers options. After that all work fine, but if I want change some option in my css file - I must clear cash again !!!

13

Re: Change background color (solved)

yep, always clear your cache.

14

Re: Change background color (solved)

just wanted to add ... if it doesn't work, clear your cache ... this thread saved me a couple of houres !

15

Re: Change background color (solved)

donadoni wrote:

Look at the source code of this example.

Hi folks.... searching days, nights, weeks to get this done... i asume this change the background color of a html page if i edit it? Cause that's where i'm looking for, not just a different background color of the editor, but another background color of a html page if i did edit and save it.

I downloaded "styles011.css" and put it in the directory "advanced/css". But now what??? In what file do i have to put what kind of javascript??
I think i have to put the following jave somewhere, but where???

<script language="javascript" type="text/javascript">
   tinyMCE.init({
    theme : "advanced",
    mode: "exact",
    elements : "elm1",
    content_css : "css/styles011.css", //<-- this sets the background color
    plugins: "inlinepopups, save, advimage, advlink",
    valid_elements : "*[*]",
    theme_advanced_toolbar_location : "top",
    theme_advanced_statusbar_location : "bottom", //<-- remove this line
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,"
    + "justifyleft,justifycenter,justifyright,justifyfull,formatselect,"
    + "bullist,numlist,outdent,indent",
    theme_advanced_buttons2 : "link,unlink,anchor,image,separator,"
    +"undo,redo,cleanup,code,separator, save,separator,sub,sup,charmap",
    theme_advanced_buttons3 : "",
    theme_advanced_resizing : true,
    height:"200px",
    width:"650px"
  });
</script>

Any help is much appreciated!!!

Last edited by bastingse (2007-02-25 22:25:42)

16

Re: Change background color (solved)

Wrong path to CSS file I assume.
You have to start your path to the css file from the directory where your html file is that calls tinyMCE.

If this is your path: [YourHTMLFile]/mce/themes/advanced/css/styles011.css

You have to use the following init string:
content_css : "./mce/themes/advanced/css/styles011.css",

Last edited by Overload (2007-02-25 22:58:02)

17

Re: Change background color (solved)

Overload wrote:

Wrong path to CSS file I assume.
You have to start your path to the css file from the directory where your html file is that calls tinyMCE.

If this is your path: [YourHTMLFile]/mce/themes/advanced/css/styles011.css

You have to use the following init string:
content_css : "./mce/themes/advanced/css/styles011.css",

thanks for your reply!! I hope you can help me to get this fix.
I will change the path to the css file but where, in what file do i have to paste that javascript??

Thanks al lot already!

18

Re: Change background color (solved)

See http://wiki.moxiecode.com/index.php/Tin … stallation

Example HTML file:

<html> 
<head> 
<title>TinyMCE Test</title> 
<script language="javascript" type="text/javascript" src=""./mce/tiny_mce.js"></script> 
<script language="javascript" type="text/javascript"> 
tinyMCE.init({ 
mode : "textareas", 
content_css : "./mce/themes/advanced/css/styles011.css" 
}); 
</script> 
</head> 
<body> 
<form method="post"> 
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea> 
</form> 
</body> 
</html>

Where is the path to the tinyMCE files: [YourHTMLFile]/mce/
And the path to your new css file is:  [YourHTMLFile]/mce/themes/advanced/css/styles011.css

Last edited by Overload (2007-02-26 18:22:02)

19

Re: Change background color (solved)

ok, thanks again! Please don't get tired of me..... it doesn't work and i'm almost sure that i did something wrong:

Here's my set-up:

my struture on my website is the following:

http://www.falconfm.nl/strucutuur.jpg

* my html page is in the directory "html"
* the file "tiny_mce.js" is in de directory "scripts"
* the "styles011.css" file is in the directory "css"

* this is my css:
body {
    background-color:#ff0000;
    font: normal 1.3em Verdana,Arial,Helvetica,Sans-Serif;
}

my html page is this:

<html>
<head>
<title>test page</title>
<script language="javascript" type="text/javascript" src="../cms/scripts/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas", content_css : "../cms/scripts/themes/advanced/css/styles011.css"
});
</script>
</head>
<body>
<form method="post">
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
</form>
</body>
</html>

so actually it should work hu????

my page can be found here: http://www.falconfm.nl/site/html/test.html

Last edited by bastingse (2007-02-26 20:59:46)

20

Re: Change background color (solved)

Mmm, your path is ok.

I scanned your site and found this:
1. Some files of your TinyMCE package can not be found (e.g. blank.html).
2. You are using an old version.

To test if TinyMCE works on your site copy the following code to your html file you provided above:

<html> 
<head> 
<title>test page</title> 
<script language="javascript" type="text/javascript" src="http://wiki.moxiecode.com/examples/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> 
<script language="javascript" type="text/javascript"> 
tinyMCE.init({ 
mode : "textareas", content_css : "../cms/scripts/themes/advanced/css/styles011.css" 
}); 
</script> 
</head> 
<body> 
<form method="post"> 
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea> 
</form> 
</body> 
</html>

As you can see, I point the script source to the TinyMCEs examples folder. This should work, but please use it only for testing purposes.

I think you are using an incomplete or corrupted version of TinyMCE.
I would suggest that you update to the newest version of TinyMCE (2.1). Copy all files to the directory you are using yet (cms/scripts/).

Last edited by Overload (2007-02-26 22:36:45)

21

Re: Change background color (solved)

Overload wrote:

Mmm, your path is ok.

I scanned your site and found this:
1. Some files of your TinyMCE package can not be found (e.g. blank.html).
2. You are using an old version.

To test if TinyMCE works on your site copy the following code to your html file you provided above:

<html> 
<head> 
<title>test page</title> 
<script language="javascript" type="text/javascript" src="http://wiki.moxiecode.com/examples/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> 
<script language="javascript" type="text/javascript"> 
tinyMCE.init({ 
mode : "textareas", content_css : "../cms/scripts/themes/advanced/css/styles011.css" 
}); 
</script> 
</head> 
<body> 
<form method="post"> 
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea> 
</form> 
</body> 
</html>

As you can see, I point the script source to the TinyMCEs examples folder. This should work, but please use it only for testing purposes.

I think you are using an incomplete or corrupted version of TinyMCE.
I would suggest that you update to the newest version of TinyMCE (2.1). Copy all files to the directory you are using yet (cms/scripts/).

acces dinied.... i get on my status bar....
strange... this should work what you suggested.

ok, going to update my mce... let's see what's happend then.....
would it be a problem if you mail me in private???
I can send you my compleet script then, cause i work with a page where i can pick out my html pages to edit. Maybe there's something wrong.
But first i'm going to update my stuff here.
Thanks already for all your help!!!

22

Re: Change background color (solved)

seems to work fine now... take a look here: http://www.falconfm.nl/site/html/test.html , looks good with a fine backgroundcolor (later i wanne remove the editor bar)
But soon as i edit the page it turns in to white again... you can edit the page here: http://www.falconfm.nl/site/cms/ and choose the page "test". I think my problem is  at my own build editor (not build it myself...)

Last edited by bastingse (2007-02-26 23:38:32)

23

Re: Change background color (solved)

This cannot work. You have a very strange html output. You placed a textarea (id="elm1") inside the main TinyMCE editor. And in this textarea there is a second html, head and body element. And in this "second" html page you call the TinyMCE scripts a second time.

Remove this textarea (id="elm1") and all its contents (see your html source code).

THIS IS YOUR CODE

<html> 
<head> 
<script /> 
</head> 
<body> 
<textarea> 
<html><head><script /></head><body><html> 
</textarea> 
</body> 
</html>

You also have problems with the gzip initialization. Because you call the gzipped TinyMCE (tiny_mce_gzip.php) you should init it properly. First call the gzip init function then your normal init. See here: http://wiki.moxiecode.com/index.php/Tin … ressor/PHP

Maybe it's better in the developing process to call the normal TinyMCE (tiny_mce.js) instead.

Last edited by Overload (2007-02-27 01:51:27)

24

Re: Change background color (solved)

Overload wrote:

This cannot work. You have a very strange html output. You placed a textarea (id="elm1") inside the main TinyMCE editor. And in this textarea there is a second html, head and body element. And in this "second" html page you call the TinyMCE scripts a second time.

Remove this textarea (id="elm1") and all its contents (see your html source code).

THIS IS YOUR CODE

<html> 
<head> 
<script /> 
</head> 
<body> 
<textarea> 
<html><head><script /></head><body><html> 
</textarea> 
</body> 
</html>

You also have problems with the gzip initialization. Because you call the gzipped TinyMCE (tiny_mce_gzip.php) you should init it properly. First call the gzip init function then your normal init. See here: http://wiki.moxiecode.com/index.php/Tin … ressor/PHP

Maybe it's better in the developing process to call the normal TinyMCE (tiny_mce.js) instead.

Overload, you're the greatest, really much appriciated all your help, but i think this is getting to diifercult for me now. I think i have to quite :-(
I'm dissapointed in myself now... but i can't do this... to technical for me.....

Sorry folks to bother you all...... tomorrow i will delete my postings here.

25

Re: Change background color (solved)

That's a pity. Whith a little help you may have done it.

Overload