The rich text editor

[Brax]

Is there a way to change the border color, the background color, and the available options of the RTE?

 

[Jake Bunce]

Admin CP -> Appearance -> Style Properties -> Message Layout -> Rich Text Editor Content

 

[Brax]

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?

 

[xIsabel38]

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.

 

[Brax]

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.

 

[RobinHood]

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_toolbar1,
#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

 

[RobinHood]

/* Removes other buttons */
#ctrl_message_html_xenforo_code,
#ctrl_message_html_image,
#ctrl_message_html_xenforo_media{
display: none;
}

Removes other buttons

 

[Brax]

Awesome!! It's all in the extra.css where I keep a watchful eye on it too. Thanks!!