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

Unmaintained Styling the WYSIWYG / TinyMCE editor

Sometimes what you see isn't always what you get.

  1. Brogan

    Brogan XenForo Moderator Staff Member

    Brogan submitted a new resource:

    Styling the WYSIWYG / TinyMCE editor (version 1.0) - Sometimes what you see isn't always what you get.

    Read more about this resource...
     
    nguyenhuuhung, DRE, 0xym0r0n and 13 others like this.
  2. JVCode

    JVCode Well-Known Member

    Love it!
     
  3. Floris

    Floris Guest

    Yeah, I used this with value 3, to give a subtle nudge.
    For those who want to customize this please do note that there's a point where it's breaking the corners, but it's great fun to have the highlights be a circle.

    example with 12px
    Screen shot 2011-12-08 at 12.17.03 PM.png

    And that it has an effect on the other elements such as colour picker and fonts dropdowns.
    Screen shot 2011-12-08 at 12.19.45 PM.png
     
    bousaid and Fuhrmann like this.
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Here are a few more tweaks to change the menu background colour:
    Code:
    /* Change text editor menu background colour */
     
    .xenForoSkin table {
    background: @primaryLightest !important;
    }

    And the buttons:
    Code:
    /* Change text editor button colours */
     
    .xenForoSkin .mceButton {
    border-color: @primaryLightest !important;
    }
     
    .xenForoSkin .mceSplitButton a.mceAction {
    border-color: @primaryLightest !important;
    }
     
    .xenForoSkin .mceSplitButton a.mceOpen {
    border-color: @primaryLightest !important;
    }
     
    .xenForoSkin a.mceButtonEnabled:hover {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
     
    .xenForoSkin a.mceButtonActive, .xenForoSkin a.mceButtonSelected {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
     
    .xenForoSkin table.mceSplitButtonEnabled:hover a.mceOpen, .xenForoSkin .mceSplitButtonHover a.mceOpen, .xenForoSkin .mceSplitButtonSelected a.mceOpen {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
     
    .xenForoSkin table.mceSplitButtonEnabled:hover a.mceAction, .xenForoSkin .mceSplitButtonHover a.mceAction, .xenForoSkin .mceSplitButtonSelected a.mceAction {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
     
    .xenForoSkin .mceColorSplitMenu a.mceMoreColors {
    border-color: @primaryLightest !important;
    }
     
    .xenForoSkin .mceColorSplitMenu a.mceMoreColors:hover {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
     
    .xenForoSkin a.mceMoreColors:hover {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
     
    .xenForoSkin .mceMenu .mceMenuItemEnabled a:hover, .xenForoSkin .mceMenu .mceMenuItemActive {
    background-color: @primaryLighter !important;
    }

    Which results in this:
    editor-colours.png
     
    Steve F, Brett Peters, Sasa and 4 others like this.
  5. Fuhrmann

    Fuhrmann Well-Known Member

    Good tip! Thanks!
     
  6. Brett Peters

    Brett Peters Well-Known Member

    My old editor

    Screen Shot 2011-12-08 at 9.32.45 PM.png

    My new editor

    TinyMCE.png

    Thanks for the share Brogan, I now have it how I originally wanted it :D
     
  7. mrGTB

    mrGTB Well-Known Member

    LOL, your first picture uses rounded corners. :confused:
     
  8. Brett Peters

    Brett Peters Well-Known Member

    Yes I did use round corners prior but thanks to Brogan and his example I was able to tidy up a few things and get a much better result.
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    I've spent a bit more time on this today, trying to cover all the aspects of the editor.

    So here are all the various areas in one post.

    Code:
    /* WYSIWYG editor border radius */
     
    .xenForoSkin table.mceLayout {
    border-radius: 4px;
    }
     
    .xenForoSkin table, .xenForoSkin tbody, .xenForoSkin a, .xenForoSkin img, .xenForoSkin tr, .xenForoSkin div, .xenForoSkin td, .xenForoSkin iframe, .xenForoSkin span, .xenForoSkin *, .xenForoSkin .mceText {
    border-radius: 4px;
    }

    Code:
    /* WYSIWYG editor borders */
     
    .xenForoSkin table.mceLayout {
    border-color: @primaryLighter !important;
    }
     
    .xenForoSkin table.mceLayout tr.mceFirst td {
    border-color: @primaryLighter !important;
    }
     
    .xenForoSkin table.mceLayout tr.mceLast td {
    border-color: @primaryLighter !important;
    }
     
    .xenForoSkin .mceIframeContainer {
    border-color: @primaryLighter !important;
    }

    Code:
    /* WYSIWYG editor menu */
     
    .xenForoSkin table {
    background: @primaryLightest !important;
    }

    Code:
    /* WYSIWYG editor pop up */
     
    .editorInlinePopup .popupContent {
    border-color: @primaryLight !important;
    }

    Code:
    /* WYSIWYG editor font drop down */
     
    .xenForoSkin .mceMenu {
    border-color: @primaryLighter !important;
    }
     
    .xenForoSkin .mceMenuItemTitle a {
    background: none repeat scroll 0 0 @primaryLighterStill !important;
    border-color: @primaryLighter !important;
    }
     
     .xenForoSkin .mceListBox .mceOpen {
    border-color: @primaryLightest !important;
    }
     
    .xenForoSkin .mceListBox .mceText {
    border: 1px solid @primaryLighter !important;
    }
     
    .xenForoSkin table.mceListBoxEnabled:hover .mceOpen, .xenForoSkin .mceListBoxHover .mceOpen, .xenForoSkin .mceListBoxSelected .mceOpen {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
     
    .xenForoSkin table.mceListBoxEnabled:hover .mceText, .xenForoSkin .mceListBoxHover .mceText, .xenForoSkin .mceListBoxSelected .mceText {
    background-color: @inlineMod !important;
    border-color: @primaryLight !important;
    }

    Code:
    /* WYSIWYG editor colour palette drop down */
     
    .xenForoSkin div.mceColorSplitMenu table {
    border-color: @primaryLighter !important;
    }
     
    .xenForoSkin a.mceMoreColors:hover {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
     
    .xenForoSkin .mceMenu .mceMenuItemEnabled a:hover, .xenForoSkin .mceMenu .mceMenuItemActive {
    background-color: @primaryLighter !important;
    }

    Code:
    /* WYSIWYG editor colour palette pop up */
     
    #colorpicker .pickerTabs li a:link, #colorpicker .pickerTabs li a:visited  {
    color: @textCtrlBackground;
    }

    Code:
    /* WYSIWYG editor smiley window */
     
    .xenForoSkin .mceSmiliesMenu div {
    background: none repeat scroll 0 0 @textCtrlBackground !important;
    border-color: @primaryLighter !important;
    width: 398px !important;
    }

    Code:
    /* WYSIWYG editor split buttons */
     
    .xenForoSkin .mceSplitButton a.mceAction {
    border: 1px solid @primaryLightest !important;
    }
     
    .xenForoSkin .mceSplitButton a.mceOpen {
    border-color: @primaryLightest !important;
    }
     
    .xenForoSkin table.mceSplitButtonEnabled:hover a.mceOpen, .xenForoSkin .mceSplitButtonHover a.mceOpen, .xenForoSkin .mceSplitButtonSelected a.mceOpen {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
     
    .xenForoSkin table.mceSplitButtonEnabled:hover a.mceAction, .xenForoSkin .mceSplitButtonHover a.mceAction, .xenForoSkin .mceSplitButtonSelected a.mceAction {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
     
    .xenForoSkin .mceColorSplitMenu a.mceMoreColors {
    border-color: @primaryLightest !important;
    }
     
    .xenForoSkin .mceColorSplitMenu a.mceMoreColors:hover {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }

    Code:
    /* WYSIWYG editor buttons */
     
    .xenForoSkin .mceButton { 
    border-color: @primaryLightest !important;
    }
     
    .xenForoSkin a.mceButtonEnabled:hover {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
     
    .xenForoSkin a.mceButtonActive, .xenForoSkin a.mceButtonSelected {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }

    I think that's everything.
     
    Kim, 0xym0r0n, high1976 and 4 others like this.
  10. Brogan

    Brogan XenForo Moderator Staff Member

    Found a few more elements such as the drop down window borders, etc. so I've updated the post above.
     
    Kim, Brett Peters and Bob like this.
  11. DRE

    DRE Well-Known Member

    How do I set a color for INSIDE the quick reply and normal reply box?

    As you can see, it text doesn't come up at all when using a transparent background.

    Also, it would better if I could either darken with a transparent background.
     

    Attached Files:

  12. Brogan

    Brogan XenForo Moderator Staff Member

    Style Properties -> Message Layout -> Rich Text Editor Content -> Background: Color
     
    Kim and DRE like this.
  13. DRE

    DRE Well-Known Member

    Thank you very much sir!
     
  14. DroidHost

    DroidHost Well-Known Member

  15. ARSamo

    ARSamo Member

    @Brogan
    I have set font family of text area INSIDE the quick reply and normal reply box by setting the below:

    Style Properties -> Message Element-> Message Text -> Text: Font Family

    works fine in IE8 and FF but in chrome the font will be changed after pressing space

    How can i fix this, please?
     
  16. Luxus

    Luxus Well-Known Member

    A year ago or so I attempted to change the background colour of the text area when focused. Just like with the plain bbcode editor (where the background goes yellow when focused). I thought it was a pretty straight forward process, but it didn't work. I tried it again now and it still won't work.

    Code:
    .xenForoSkin iframe:focus, body:focus, body.mceForceColors:focus,
    {
    background-color: yellow !important;
    }
    You can easily change the colour when not focused, though.
     
  17. DRE

    DRE Well-Known Member

    Well this came in handy, thanks!
     
  18. ExpertPixels.com

    ExpertPixels.com Well-Known Member

    Awesome tip Brogan.. Thank you.. This is very helpful a lot of forum software and platforms make it near impossible to style the editors to help match the rest of the design.
     
  19. Axel B

    Axel B Well-Known Member

    @Brogan, I really like the possibilities described in this thread but it is unmaintained. Is it not working anymore or do I miss something?
    Thanks in advance for your reply!
     
  20. Brogan

    Brogan XenForo Moderator Staff Member

    This editor is no longer used with the current version of XenForo.

    It has been replaced with Redactor.
     

Share This Page