The rich text editor

I don't think that's it. If you take a peek at the image I am including, you'll see I currently have a white border around the whole textarea field. I want to change that. I would also like to change the background color where the icons are, not where you enter your text. Lastly, I'm wondering if there is a way to shut off some of those icons. For example, what If I don't want my forum-goers to upload multi-media or center their text?



Well-known member
First and Foremost
Disclaimer! If you mess up something... it wasn't my fault. I told you this before you went ahead.
I am not experienced with coding, programming, etc...
In fact, I've been learning by reading replies to my questions.

Ok so I think I found what you are looking for.
Search for the editor_ui.css

/* External */
.xenForoSkin .mceExternalToolbar {position:absolute; border:1px solid #CCC; border-bottom:0; display:none;}
/* Layout */
.xenForoSkin table.mceLayout {border:0; border-left:1px solid #CCC; border-right:1px solid #CCC}
.xenForoSkin table.mceLayout tr.mceFirst td {border-top:1px solid #CCC}
.xenForoSkin table.mceLayout tr.mceLast td {border-bottom:1px solid #CCC}
.xenForoSkin table.mceToolbar, .xenForoSkin tr.mceFirst .mceToolbar tr td, .xenForoSkin tr.mceLast .mceToolbar tr td {border:0; margin:0; padding:0;}
.xenForoSkin td.mceToolbar {padding-top:1px; vertical-align:top}
.xenForoSkin .mceIframeContainer {border-top:1px solid #CCC; border-bottom:1px solid #CCC}
I believe this controls the grey border around the Editor and is what you need to change. Of course, I could be totally wrong. But the nice thing about xenForo is if you make changes, you can always go back to the default.

Change all instances of #CCC to whatever color you want.
There may be more that I missed so look around.
Perfect! Thank you!!

Now, might you (or anyone!) know how to shut off some of the buttons? I don't want to allow media uploads, images or code blocks.


Well-known member
Pop this in Extra.css to style :)

/* Styles editor outer border */
#ctrl_message_html_tbl {
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
.mceIframeContainer.mceFirst.mceLast {
    border-top: 1px solid lightgray !important;
    border-bottom: 1px solid lightgray !important;
/* Fixes 1px border at top */
.mceToolbar.mceLeft.mceFirst.mceLast {
    padding-top: 0px;
.xenForoSkin table.mceLayout tr.mceFirst td {
border-top: none !important;
/* Styles main toolbar area background */
#ctrl_message_html_toolbargroup {
    background: lightgray;
/* Styles background of 2 rows of icons */
#ctrl_message_html_toolbar2 {
    background: lightgray;
/* Styles border around buttons */
.xenForoSkin .mceButton {
    border: 1px solid transparent !important;
/* Removes center button */
#ctrl_message_html_justifycenter {
    display: none;
Use the right click -> Inspect element feature of chrome to find the ID of the buttons to remove more