How to configure buttons with XenForo Redactor Editor ?
Edit:
with the version 2.2.0 of this addon, there is now a feature to avoid the below steps. Of course the below steps are still working and might give your more possibilities to customize your buttons.
Presentation
If you don't want to use the
TinyQuattro editor and still want to use the XenForo Redactor Editor, you will have to check the html code and get the button class (see the example in the next section below). It should be like this: .redactor_btn_
bbm_yourBbCodeTag. You need to create your own sprite (a sprite is an image with several icons) and then use css to set the position of your icon in the sprite. You can also use the
XenForo default sprite and play with this code (move background position):
Code:
.redactor_toolbar li a.redactor_btn_bbm_yourBbCodeTag,
.redactor_toolbar li a.redactor_btn_bbm_yourBbCodeTag:hover {
background-position: 0 0;
}
Demo with the XenForo default sprite and the default XenForo smiley icon
Click here to display the
XenForo default sprite. We're going to change the smiley icon with another one, let's say the one above inside the sprite:
To get the smiley icon class, just use any developer tool provided with your browser (for example with Firefox: Firebug). So with Firebug: right click on the smiley icon, then select "Inspect with Firebug". You should see this then:
As you can see, the css class for the smiley icon is:
redactor_btn_smilies. It will be the same thing for your custom buttons with the BBM, except the class format will be: redactor_btn_bbm_yourBbCodeTag (a prefix "bbm" is used before your bbcode tag).
The previous screenshot has also an important information about css (see in green):
If you want to use another icon of the XenForo default sprite, you will only have to modify the background position. You can do it in live with Firebug:
So the new background position will be: 3px -2365px. You just need to add this information into your EXTRA.css template. Since you're overriding the XenForo default configuration of the smiley icon, you will have to add
!important to the css:
Code:
.redactor_toolbar li a.redactor_btn_smilies {
background-position: 3px -2365px !important;
}
If you want to set the same icon for a custom button using the XenForo default sprite:
Code:
.redactor_toolbar li a.redactor_btn_bbm_yourBbCodeTag,
.redactor_toolbar li a.redactor_btn_bbm_yourBbCodeTag:hover {
background-position: 3px -2365px;
}
P.S: the hover extra configuration seems to be needed according to Mike West (source). I don't use Redactor, so I can't confirm but do as Mike West recommends.
You can also use your own sprite, which means you will have to create your own image with several icons in it. Once you created your sprite, the logic is the same as above. You just need to add what sprite you want to use:
Code:
.redactor_toolbar li a.redactor_btn_bbm_yourBbCodeTag,
.redactor_toolbar li a.redactor_btn_bbm_yourBbCodeTag:hover {
background-image: url("styles/default/xenforo/editor/mySprite.png");
background-position: 0 0;
}
P.S: You can of course change your sprite path. You will have to set your background position too.
The below information are very detailed. Once you understand how to use css, you will spend no more than 20 seconds to configure one custom button.
Sorry about that.