This is a guide, tutorial, template modification or however you want to call it that styles Redactor to look like XenForo's version of TinyMCE 3.
1.) Downloading TinyMCE spritesheet
- Download the modified spritesheet and move it to styles/yourstyle/xenforo/editor/mce3icons.png. In this spritesheet I have added the icons XenForo removed from their spritesheet. I did not remove all unused editor icons because there is just no point.
2.) Changing the background and border color
- Go to Appearance → Style Properties → Rich Text Editor → Editor Toolbar
- Remove the image path, repeat and position values and select this background color: #F0F0EE
- Change the border bottom color to #CCCCCC
- Change the padding-left value to 0
- Save
- Go to Appearance → Style Properties → Rich Text Editor → Editor Container
- Change the border color to #CCCCCC
- Save
- Go to Appearance → Style Properties → Rich Text Editor → Editor Toolbar Group
- Remove the image path, repeat and position values and clear the value of the background color (making it transparent)
- Clear all values of the border
- Remove the box-shadow value from the additonal CSS box
- Save
- Go to Appearance → Style Properties → Rich Text Editor → Editor Toolbar Button (Hover)
- Change the background color to #b2bbd0
- Change the border color to #0a246a
- Clear the radius value
- Save
- Go to Appearance → Style Properties → Rich Text Editor → Editor Toolbar Button (Active)
- Change the background color to #b2bbd0
- Change the border color to #0a246a and clear the border values Style, Width and Radius
- Save
3.) Removing the opacity effects
- Go to Appearance → Style Properties → Rich Text Editor → Settings
- Uncheck the "Allow the rich text editor to be faded out" box
- Save
4.) Replacing Redactor buttons with TinyMCE buttons
- Go to Appearance → Style Properties → Rich Text Editor → Editor Toolbar Button
- Replace the image path of the background with this:
Code:
@imagePath/xenforo/editor/mce3icons.png- Save.
Note: The default redactor spritesheet will never be loaded. Instead, always the modified TinyMCE spritesheet will be loaded.
- Go to Templates and open EXTRA.css
- Copy&pasta the following code:
Code:
.redactor_box .redactor_toolbar li a.redactor_btn_removeformat
{
background-position: -580px 0;
margin-right: 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_bold
{
background-position: 0 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_italic
{
background-position: -60px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_underline
{
background-position: -140px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_deleted
{
background-position: -120px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_fontcolor
{
background-position: -961px -19px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_fontsize
{
background-position: -87px -39px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_fontfamily
{
background-position: -106px -39px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_createlink
{
background-position: -500px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_unlink
{
background-position: -640px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_alignment
{
background-position: -460px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_unorderedlist
{
background-position: -20px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_orderedlist
{
background-position: -80px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_outdent
{
background-position: -540px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_indent
{
background-position: -400px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_smilies
{
background-position: -22px -40px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_image
{
background-position: -380px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_media
{
background-position: -320px -20px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_code
{
background-position: -65px -40px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_quote
{
background-position: -220px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_draft
{
background-position: -480px -20px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_undo
{
background-position: -159px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_redo
{
background-position: -100px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_switchmode
{
background-position: -42px -39px;
}
.redactor_box .redactor_toolbar li.redactor_btn_group
{
margin-top: 0px;
margin-bottom: 0px;
}
.redactor_box .redactor_toolbar li.redactor_btn_group:nth-child(1)
{
margin-right: 0px;
}
.redactor_box .redactor_toolbar li.redactor_btn_group:nth-child(2)
{
margin-left: 0px;
margin-right: 0px;
}
.redactor_smilies .secondaryContent
{
background: #F0F0EE;
}- Save
Done.
