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

[Tutorial] Get TinyRedactor 1.0

No permission to download
tinyredactor.png

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
- Change Width and Height to 22px
- 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.
Author
Luxus
Downloads
33
First release
Last update
Rating
5.00 star(s) 3 ratings

More resources from Luxus

Latest reviews

Nice idea.
Pretty cool
Nice addition Luxus. This should definitely appease those who prefer the TinyMCE look.