Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Content Editor Discussions /

Forum for content editors and CMS users.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

White Text


Go to End


8 Posts   3461 Views

Avatar
Varberg

Community Member, 15 Posts

23 March 2009 at 9:45pm

I'm building a site that has a predominantly dark (almost black) background and would like the text to be white. I've had no problem getting this on the web pages but in the TinyMCE editor the background is white and the text does not show unless highlighted.

Is there a way of altering the text colour for the editor so it is black (but still white on the site) or altering the background colour in the editor to a colour that will show the white text?

I've tried looking on the net but can't find anything on this.

Avatar
Carbon Crayon

Community Member, 598 Posts

23 March 2009 at 11:12pm

Hi Varberg

Try adding this to your editor.css file:

.typography p {
color: #000 !important;
}

Avatar
Varberg

Community Member, 15 Posts

23 March 2009 at 11:28pm

Edited: 24/03/2009 7:06am

Hi aram,

Thanks for your reply.

I added it to editor.css but there was no change in the editor background colour.

Edit: Just realised it was to change the font colour, and it worked.

Thanks again

Avatar
stx333

Community Member, 14 Posts

25 April 2009 at 10:26am

Hey Aram, I tried what you suggested - no effect however.

I put the lines in editor.css both in my theme folder and the [..]/cms/css folder as well.

Should it work for SS 2.3.1?

Please help :)

Thanks,
Stas

Avatar
mschiefmaker

Community Member, 187 Posts

12 May 2009 at 7:20am

Try moving the font definition for the white text to your layout.ccs instead of typography.css.

Probably not exactly inline with design but it works. The CMS gets it font colours from the typography file

Cheers

MM

Avatar
MartinPhone

Community Member, 57 Posts

21 May 2009 at 5:31am

Just for anyone who's had a similar situation of changing things but not seeing any difference in the CMS - do a ?flush=1 to make sure the new CSS is being read. The place to be changing things I'd say is the editor CSS rather than anywhere else...

Avatar
geekstuff

Community Member, 1 Post

19 June 2009 at 11:36am

Edited: 19/06/2009 11:52am

This problem has been bugging me for a while and none of the suggested solutions worked for me ... so I did a bit of digging and came up with a solution that does work for me.
I am using SilverStripe version 2.2.3 ... your version might be different so YMMV.

In the file

/jsparty/tiny_mce2/tiny_mce_src.js
at or around line# 3941 there is a line that looks like this ...

			html = tinyMCE.getParam('doctype') + '<html><head xmlns="http://www.w3.org/1999/xhtml"><base href="' + tinyMCE.settings.base_href + '" /><title>blank_page</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body class="mceContentBody '  + extraClass + '" style="background-color:#FFFFFF";></body></html>';

This line has a hard-coded style attribute that sets the background to white.
According to my understanding of css, the style tag will override any external stylesheets ... not what I want.

So, when I removed the hard-coded style attribute from the line ... voila ... the background-color in my theme's editor.css file started working and I could use white text in the editor ... yay.

So in summary:

- remove the style= attribute so your new line looks like this ...

			html = tinyMCE.getParam('doctype') + '<html><head xmlns="http://www.w3.org/1999/xhtml"><base href="' + tinyMCE.settings.base_href + '" /><title>blank_page</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body class="mceContentBody '  + extraClass + '";></body></html>';

And in [yourtheme]/css/editor.css add something like this ...

body.mceContentBody {
	min-height: 200px;
	font-size: 62.5%;
	color: white;
	background-color: black;
}

Save the changes and refresh your page (worked for me *without* using flush=1)

While having to hack the /jsparty files doesn't feel like the right solution in this case it worked for me.

cheers .. dave

Avatar
Nivanka

Community Member, 400 Posts

19 June 2009 at 2:46pm

I have had this problem too, I didnt want to meddle with the core codes as when upgrading it can cause problems again. Anyway a good hack :)