Unmaintained BbCodes & Buttons Manager 3.3.5

Your name is "YourName", you want to create an addon with a bbcode. This addon name is "demo". This bbcode will have a callback, then will use a template to format the output.

1. Create some directories in the XenForo library directory: library/YourName/Demo/BbCode/Formatter
   • The root "library/YourName/Demo" will be your addon directory
   • The suffix ".../BbCode/Formatter" will be where you will put your php (You can put it everywhere you want, put it's just to keep a logic with the XenForo Directory Structure)
2. Inside the directory library/YourName/Demo/BbCode/Formatter, create a file "MyBbCodes.php"
   Inside this file, create your BbCode method callback, let's say "templateDoThis", with the callback signature. Example:
   
   PHP:

   <?php
   class YourName_Demo_BbCode_Formatter_MyBbCodes
   {
      public static function templateDoThis(&$content, array &$options, &$templateName, &$fallBack, array $rendererStates, $parentClass)
      {
        //This is your BbCode callback - $options can be used to check/modify BbCodes options (the ones user will have enter)
      }
   }

   There are many demos here.
   At the moment, just create the file, you will code the callback later
3. Go to XenForo Templates and create a new template for example called "yourname_bbcode_dothis".
4. Go to the Bb Codes Manager, create a Bb Code. In the "parser methods" tab, check "Template Method", enter the template name "yourname_bbcode_dothis" and for the callback use: YourName_Demo_BbCode_Formatter_MyBbCodes (left box), then templateDoThis (right box)
5. Start to code your php callback, then your template

If you look inside the callback signature, you will se the $options variable. This is an array of all parameters the users will have set in his Bb Code options. The parameters are exploded according to the option separator (see inside the Bb Code options).

Let's say your option separator is: |
The Bb Code is [myBb=Param1|Param2]content[/myBb]
The $options will then be an array with:

• $option[1]:"Param1"
• $option[2]:"Param2"

The $options variable is passed as reference, so you can modify it on the fly. Let's suppose you want to add a key, just do this: $option['myKey'] = 'bonjour'; then in your template, you can use {$option.myKey}.

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):


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:
View attachment 54562

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:
View attachment 54570

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):
View attachment 54571

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:
View attachment 54572

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:

If you want to set the same icon for a custom button using the XenForo default sprite:

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:
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.