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

The rich text editor

Discussion in 'Styling and Customization Questions' started by Brax, Sep 6, 2012.

  1. Brax

    Brax Member

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

    Jake Bunce XenForo Moderator Staff Member

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

    Brax Member

    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?

  4. xIsabel38

    xIsabel38 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.
  5. Brax

    Brax Member

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

    RobinHood 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
    Brax likes this.
  7. RobinHood

    RobinHood Well-Known Member

    /* Removes other buttons */
    display: none;
    Removes other buttons :)
    Brax and Digital Doctor like this.
  8. Brax

    Brax Member

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

Share This Page