1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Colouring editor background on focus

Discussion in 'Styling and Customization Questions' started by Luxus, Jun 30, 2012.

  1. Luxus

    Luxus Well-Known Member

    Hey guys,

    this is my edited editor:
    editor.png
    I want to make the background xenforo yellow while :focus is active, just like with the raw bbcode editor. But it didn't work as expected. The background remains white. This seems to be a complicated one.

    This is the code that makes backgrounds yellow:

    Code:
    background: url("styles/default/xenforo/gradients/form-element-focus-100.png") repeat-x #FFFFF0;
    I have found this resource: http://xenforo.com/community/resources/styling-the-wysiwyg-tinymce-editor.349/

    but it doesn't explain how to colour the text area background. Any ideas?
     
  2. Shelley

    Shelley Well-Known Member

    Wouldn't the following work?
    Code:
    body, body.mceForceColors {
    background-color: yellow;
    }
     
  3. Luxus

    Luxus Well-Known Member

    I tried this
    Code:
    .mceForceColors:focus {
    background: url("styles/default/xenforo/gradients/form-element-focus-100.png") repeat-x #FFFFF0;
    }
    as well as this
    Code:
    .mceContentBody:focus {
    background: url("styles/default/xenforo/gradients/form-element-focus-100.png") repeat-x #FFFFF0;
    }
    but focus doesn't seem to work. While putting the code in the editor_contents.css at least has an effect on the non-focus colouring, putting the code in the editor_ui.css has no effect at all.

    It's working with the raw bbcode editor (textarea.textCtrl:focus), but not with the Rich Text Editor. I start to think that it's related to javascript.
     
  4. Shelley

    Shelley Well-Known Member

    Yeah, I'm quite sure you'll have to edit a JS file to get the desired outcome. Perhaps jake will pop on shortly and see if there is a css workaround but i have a feeling there won't be.
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I haven't been able to make this work either.
     
  6. Shelley

    Shelley Well-Known Member

    I tried for half an hour to an hour today after I posted and no luck here either.
     
  7. Luxus

    Luxus Well-Known Member

    Here is the thing, I have got this to work with Joomla's TinyMCE editor, which is basically the original TinyMCE editor you can download from here: http://www.tinymce.com/download/download.php

    You have to :focus the body tag within the editor, just like as you would expect that. The same doesn't work with XenForo's TinyMCE.
     

Share This Page