• 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

Luxus

Well-known member
#1
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?
 

Luxus

Well-known member
#3
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.
 

Shelley

Well-known member
#4
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.
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.