Styling the WYSIWYG / TinyMCE editor

Styling the WYSIWYG / TinyMCE editor

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.

A lot of people have commented on the appearance of the WYSIWYG / Tiny MCE editor.

Well here's a very simple edit which makes it blend in a bit better to the default style, matching the border radius settings of other elements.
Even the menu items get the radius.

Simply add this to EXTRA.css:
Code:
/* Apply rounded corners to text editor */

.xenForoSkin table.mceLayout {
border-radius: 4px;
}

.xenForoSkin table, .xenForoSkin tbody, .xenForoSkin a, .xenForoSkin img, .xenForoSkin tr,...
Read more about this resource...
 
F

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
 

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
 

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.
 

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.
 

Attachments

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?
 

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.
 

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.
 

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!
 

Brogan

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

It has been replaced with Redactor.
 
Top