SnippetMaster Support Forums
Return to main website
 
April 20, 2018, 04:54:38 AM
* Show unread posts since last visit.
* Show new replies to your posts.
Welcome, Guest. Please login or register.
Did you miss your activation email?
April 20, 2018, 04:54:38 AM

Login with username, password and session length
Search:  
Advanced search
* Home Help Search Login Register
SnippetMaster Support Forums  |  General  |  How To's & FAQs  |  Topic: How to change the editor background color « previous next »
Pages: [1] Print
Author Topic: How to change the editor background color  (Read 19264 times)
syberknight

Posts: 4


[-] How to change the editor background color
« on: February 05, 2007, 11:25:08 PM »

If you are like me, and haunted by having a dark page background with dark text on a light colored area (like a table cell or div), and SnippetMaster's editor only shows the dark text on the dark background if you've got your snippet area inside the light colored area...

...then here's the fix!

Simply add this line to the end of your main CSS file:

.mceContentBody { background-image: none; background-color: White; color: Black; } /*SnippetMaster editor bg color*/

Viola!

* BEFORE.png (28.89 KB, 99x150 - viewed 674 times.)
* AFTER.png (30.35 KB, 99x150 - viewed 678 times.)
« Last Edit: June 06, 2007, 01:43:03 PM by admin » Report to moderator   Logged
syberknight

Posts: 4


[-] Re: FIXED: Dark Edit Background
« Reply #1 on: June 06, 2007, 01:38:41 PM »

Hopefully somebody will find this helpful...

I expanded my work-a-round via instructions from http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/content_css

So from now on, I just include these 3 classes to my global site css file (with appropriate values of course):

Quote
.mceContentBody { background-image: none; background-color: #002a53; color: #ccc; } /*TinyMCE*/
.mceContentBody a:link, .mceContentBody a:visited   { color: #fff !important;    text-decoration: underline; } /* FF requires a important here */
.mceContentBody a:hover, .mceContentBody a:active   { color: #99d9e8 !important; text-decoration: none; } /* FF requires a important here */

It works great.
Smile
Report to moderator   Logged
admin
Forum Administrator
*
Posts: 3169

SnippetMaster Author


WWW
[-] Re: FIXED: Dark Edit Background
« Reply #2 on: June 06, 2007, 01:42:34 PM »

Thanks!  I made this post a sticky so folks can easily find it.  Smile
Report to moderator   Logged
admin
Forum Administrator
*
Posts: 3169

SnippetMaster Author


WWW
[-] Re: How to change the editor background color
« Reply #3 on: June 27, 2007, 10:15:46 PM »

Try either one of these solutions:

1. Create a *new* CSS file called "background.css" and then put the css lines in the previous post into it.   Then add the css file to your webpage being edited.  Snippetmaster will "read" the CSS file automatically, and the styles will be applied to the editor.

2. You can manually edit the /snippetmaster/includes/tiny_mce/themes/advanced/css/editor_ui.css file and add the styles to it.

I think #1 is easier, and makes the most sense as it's basically just making another CSS file...

(Or if you prefer, you can add those styles to your own existing css file for the page that is already there.)

« Last Edit: August 21, 2007, 10:43:20 AM by admin » Report to moderator   Logged
bobroosth

Posts: 1


[-] Re: How to change the editor background color
« Reply #4 on: June 28, 2007, 08:03:00 PM »

That works, but strangely. The original background color for the page is a medium dark blue. The text is a bit darker blue, but in a white table cell. When I set the mce background to white, the text turns white....

I take it the editor is trying to choose a contrasting color for the text.
Report to moderator   Logged
Jenkinhill

Posts: 420



[-] Re: How to change the editor background color
« Reply #5 on: June 29, 2007, 04:59:15 AM »

I take it the editor is trying to choose a contrasting color for the text.

No, it can't do that! More likely is that you have specifiied color:#ffffff  for .mceContentBody 

In syberknight's second example above link text is white - you need to change the values to suit your own page/CSS
Report to moderator   Logged

Kelvyn
roguetiger

Posts: 4


[-] Re: How to change the editor background color
« Reply #6 on: May 25, 2008, 07:58:53 PM »

Yup - I'm having the same problem. I've edited the css in the "snippets" folder, edited my site's css folder and added a new css file to the site. None of the changes have affected my Snippets Admin section.

Any further ideas?
Report to moderator   Logged
roguetiger

Posts: 4


[-] Re: How to change the editor background color
« Reply #7 on: May 25, 2008, 08:27:57 PM »

Update/Correction:

             It works in IE7, and just takes a little time to update in Firefox. Wooooo!

« Last Edit: May 25, 2008, 09:11:43 PM by roguetiger » Report to moderator   Logged
jean

Posts: 6


[-] Re: How to change the editor background color
« Reply #8 on: January 11, 2009, 05:47:05 PM »

I have a similar problem.
I have a dark background image in the left border of the web page. 
The actual page has a lighter background with darker text.
When editing a snippet that is not the whole page, the editor opened with this image in the background with the content on top of the image instead of inside the margin of the page.
All I need to do is to eliminate the background image from the editor area.
Initially, I thought I had solved the problem by simply adding

.mceContentBody { background-image: none; }

to my own css file.

However, this only solved the problem for the first snippet on the page.  Second and subsequent still snippets had the image in the background.

Thanks to the above suggestion, when I edited the /snippetmaster/includes/tiny_mce/themes/advanced/css/editor_ui.css file and added:
.mceContentBody { background-image: none; }
to this file, the problem was solved.

I note that at the top of the file:
/snippetmaster/includes/tiny_mce/themes/advanced/css/editor_content.css it says:

/* This file contains the CSS data for the editable area(iframe) of TinyMCE */
/* You can extend this CSS by adding your own CSS file with the the content_css option*/

So perhaps there is another solution that does not involve modifying the actual product files.  If there is, I would prefer it.  I don't know what the 'content_css' option refers to.

When I look at the souce code of a file that is being edited, I notice a line:

content_css : "http://mydomain.com/. . . /mycssfilename.css,http://mydomain.com/  . . ./snippetmaster/includes/cssshowstyles.inc.php?style=0"

Clearly this is written into the file by snippetmaster.  So perhaps this can be set in a configuration file somewhere?  I would prefer this to editing the tiny_mce css file itself.

Modified to add
You have to clear the cache before this change will work.  The fix works in firefox as well as ie, as would be expected, providing you clear the cache first.
« Last Edit: January 11, 2009, 05:51:27 PM by jean » Report to moderator   Logged
admin
Forum Administrator
*
Posts: 3169

SnippetMaster Author


WWW
[-] Re: How to change the editor background color
« Reply #9 on: January 12, 2009, 10:42:32 AM »

This is very interesting that it did not display the bg image on the first editor instance, but it did for the remaining ones.  I will try to fix that for the next release.

The problem here is that the CSS style used by the editor is taken from your page..  so if we don't "feed" the css file to the editor, then none of the styles of your page will work in the editor.  (ie: It's not possible to stop just the body image style only.)

One possible solution might be to use an @import css style command to import a CSS style into your page, and then only have it contain the body image css.  At the moment, the editor will not read in an imported stylesheet, so this will be ignored.. and then the editor won't know about the body bg.

I hope that makes sense?
Report to moderator   Logged
jean

Posts: 6


[-] Re: How to change the editor background color
« Reply #10 on: January 12, 2009, 12:36:48 PM »

Thank you, your suggestion worked.

I removed the page background image from my main style sheet and then created an additional style sheet containing only the page background image.
Then, in my page, I added the background image using an import rule:
<style type="text/css">
@import url(css/bg_image.css);
</style>
Now the real page has the background image but snippmaster's page does not. 

I am using the free version.  In the pro version, there is a preview capability.  I would imagine that the background image would also not appear in the preview.  This work-around would likely be OK until a new version makes including  .mceContentBody { background-image: none; } in my css work for multiple snippets.

I am just evaluating snippetmaster for a client.  I have a few other questions that I will pose separately.
Report to moderator   Logged
ScottZ

Posts: 5


[-] Re: How to change the editor background color
« Reply #11 on: March 04, 2009, 05:36:58 PM »

I can't get this fix to work for FireFox 2.0.0.20.

I'm using SnippetMaster Pro 2.2.3.

I tried placing .mceContentBody { background-image: none; } in every style sheet on my site ... however ... the pesky little background image is still filling the tinymce text editor input field.

I also tried  .mceContentBody { background-image: none !important; } ... still nothing.

I noticed in the text editor .mceContentBody shows up in the style drop-down menu for IE but not FireFox ... odd.

Any ideas?

 
Report to moderator   Logged
ScottZ

Posts: 5


[-] Re: How to change the editor background color
« Reply #12 on: March 04, 2009, 06:10:35 PM »

shortly after i posted the above cry for help... it occured to me that if .mcecontentbody was displaying in IE and not FF perhaps wasn't displaying the updates...  two hours i tried to fix this and all i needed to do was clear my cache in FF .... aaaagggghhhh ... and i used to love FF.
Report to moderator   Logged
Jenkinhill

Posts: 420



[-] Re: How to change the editor background color
« Reply #13 on: March 05, 2009, 02:59:21 PM »

. and i used to love FF.

You still can. FF is very good at caching css, but I have a simple way of clearing the css cache. See http://www.snippetmaster.com/forums/index.php/topic,1667.msg6886.html#msg6886
Report to moderator   Logged

Kelvyn
ScottZ

Posts: 5


[-] Re: How to change the editor background color
« Reply #14 on: March 06, 2009, 05:52:14 AM »

Thanks for the tip Jenkinhill... FF is such a great tool... I'm surprised it would cache css files... with so many web developers using it as their primary browser for creating / testing web sites... caching css files seems rather annoying. I'm also surprised it took me this long to notice this... then again I suppose all of my design and testing is done locally then uploaded ... rarely do I modify files in a live environment... any I'm getting off-topic... But again, thanks for the tip.
Report to moderator   Logged
Pages: [1] Print 
SnippetMaster Support Forums  |  General  |  How To's & FAQs  |  Topic: How to change the editor background color « previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!