Changing Tiny MCE background
Permalink 1 user found helpful
What do you do when your theme is White text on black background.
Tiny has a white background so the white texts doesn't show.
Is there a way so the background edit in Tiny is a different color so one can see the white text.
I have looked though these forums and have not found an answer.
I may have found one at tiny mce , but either I don't understand or it just did not work.
Seem it should be easy. I sure hope so.
Thanks
Twoponies
Tiny has a white background so the white texts doesn't show.
Is there a way so the background edit in Tiny is a different color so one can see the white text.
I have looked though these forums and have not found an answer.
I may have found one at tiny mce , but either I don't understand or it just did not work.
Seem it should be easy. I sure hope so.
Thanks
Twoponies
Thanks
I had already done that and can't get it to work. That was why I posted.
Ill play around some more.
Thanks again.
Twoponies
I had already done that and can't get it to work. That was why I posted.
Ill play around some more.
Thanks again.
Twoponies
I've found that Tiny MCE references your html/body tag background color as its color or uses your default browser values.
For example, I can set my background color to #FFF and the text color to #000 in my css file (or don't specify any settings at all) for the body tag. Then, I create an overall wrapper DIV, if I don't already have one, and put that around my entire HTML. Set that div id (let's call it #overallWrapper) to the actual background and text color you want.
In summary, I'm not setting my true overall background color in the html or body, I'm setting it in the overallWrapper div container. Tiny will ignore those settings.
sample html
sample css
EDIT: ignore the php tags and pay attention to the stuff inside them...
For example, I can set my background color to #FFF and the text color to #000 in my css file (or don't specify any settings at all) for the body tag. Then, I create an overall wrapper DIV, if I don't already have one, and put that around my entire HTML. Set that div id (let's call it #overallWrapper) to the actual background and text color you want.
In summary, I'm not setting my true overall background color in the html or body, I'm setting it in the overallWrapper div container. Tiny will ignore those settings.
sample html
<html> <body> <div id="overallWrapper"> <div id="actualContent"> </div> </div> </body> </html>
sample css
body { background-color:#FFF; color:#000;} #overallWrapper { background-color:#F60; color:#FFF;}
EDIT: ignore the php tags and pay attention to the stuff inside them...
Thanks
I will give it a try tomorrow(monday
) or the Next)
wopila
Twoponies
I will give it a try tomorrow(monday
) or the Next)
wopila
Twoponies
You can open your typography.css and add the following:
/* TinyMCE specific rules */
body.mceContentBody {
background: #000;
color: #fff;
}
.mceContentBody a {
text-decoration: none !important; /* FF requires a important here */
color: #f7b527 !important; /* FF requires a important here */
}
Now your tinymce editor has a black background, white font color and links are yellow. At the same time you can have other rules for the body and link for your webpage by adding normal css styles:
body {
color: #000;
}
Now my body has a black font color even if it's white in the tinymce editor. Just change that to your needs.
If this doesn't seem to work then it's the cache's fault.
If you develop with firefox then just download the webdeveloper toolbar and tick "Disable->Disable Cache". Makes your life a lot easier
/* TinyMCE specific rules */
body.mceContentBody {
background: #000;
color: #fff;
}
.mceContentBody a {
text-decoration: none !important; /* FF requires a important here */
color: #f7b527 !important; /* FF requires a important here */
}
Now your tinymce editor has a black background, white font color and links are yellow. At the same time you can have other rules for the body and link for your webpage by adding normal css styles:
body {
color: #000;
}
Now my body has a black font color even if it's white in the tinymce editor. Just change that to your needs.
If this doesn't seem to work then it's the cache's fault.
If you develop with firefox then just download the webdeveloper toolbar and tick "Disable->Disable Cache". Makes your life a lot easier
JasonStone solved my problem with his solution above. Kudos man
That is some great info to know. Thank you.
Just pointed me in the right direction for getting rid of the background image that appears in Tinymce when the body has a background image attached to it. Thanks, that was a bear to read any text I was editing.
http://www.concrete5.org/community/forums/usage/white_font_color_th...