Jump to:

520 Posts in 248 Topics by 263 members

Content Editor Discussions

SilverStripe Forums » Content Editor Discussions » White Text

Forum for content editors and CMS users.

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

Page: 1
Go to End
Author Topic: 2281 Views
  • Varberg
    Avatar
    Community Member
    15 Posts

    White Text Link to this post

    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.

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: White Text Link to this post

    Hi Varberg

    Try adding this to your editor.css file:

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

  • Varberg
    Avatar
    Community Member
    15 Posts

    Re: White Text Link to this post

    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

  • stx333
    Avatar
    Community Member
    14 Posts

    Re: White Text Link to this post

    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

  • mschiefmaker
    Avatar
    Community Member
    187 Posts

    Re: White Text Link to this post

    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

  • MartinPhone
    Avatar
    Community Member
    57 Posts

    Re: White Text Link to this post

    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...

  • geekstuff
    Avatar
    Community Member
    1 Post

    Re: White Text Link to this post

    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

  • Nivanka
    Avatar
    Community Member
    395 Posts

    Re: White Text Link to this post

    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

    2281 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.