• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Styling the WYSIWYG / TinyMCE editor

Styling the WYSIWYG / TinyMCE editor

Brogan

XenForo moderator
Staff member
#1
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
#3
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
#4
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
#9
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
#11
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

#15
@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
#16
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.
 
#18
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
#19
@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!