• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
BbCodes & Buttons Manager - Advanced Bb Codes Pack

Unmaintained BbCodes & Buttons Manager - Advanced Bb Codes Pack 3.7.2

No permission to download
Compatible XF 1.x versions
1.2, 1.3, 1.4
Additional requirements
BbCodes & Buttons Manager
License
Creative Commons BY 3.0
Visible branding
No
BbCodes & Buttons Manager - Advanced Bb Codes Pack
by Cédric CLAERHOUT

This addon is now using a Creative Commons BY 3.0 license
This thread was previously here


Presentation

Created in 2007 for vBulletin, this application adds advanced Bb Codes. Those Bb Codes help members to design the layout of their messages to make them look like an article from a magazine. This third version for Xenforo has been fully rewritten. It has exactly the same functions than the previous vBulletin version... and much more.

Bb Codes list:

BIMG BB Code:
bimg.png

DEMO
  • Resize a big picture
  • Display the original size of the picture with the XenForo JS Slideshow
  • Caption above or below/inside or outside the picture
  • Compare pictures thanks to the script Twenty twenty
    To enable this mode, insert two image urls (or attachment ids) in the content of the Bb Code separated with |
  • [Safety Default&Max Width System included]
#option commands:

Img block
  1. Numbers (with or without (px): The width of image (can't go over the limit set up in options) in pixels
  2. Numbers with %: The width of image in percentage
  3. fleft: float left ; the image will be float on the left inside a block
  4. fright: float right ; the image will be float on the right inside a block
  5. bleft: align the block to the left
  6. bcenter: align the block to the center
  7. bright: align the block to the right
Caption
  1. Normal Text: The image caption
  2. top|bottom: The position of image caption (above or below image); the default behaviour is bottom
  3. inside: The position of image caption (inside or outside image)
  4. left|center|right: The alignement of image caption; the default behaviour is left
Extra options
  1. no-lightbox - disable the lightbox
  2. url in options: link your image to an url (will disable the lightbox)
  3. diff-v or diff-vertical - to use with the image comparaison tool to display a vertical comparaison
  4. diff-pos:xx - xx being a number between 0 and 1. To use with the image comparaison tool to set the cursor position (0.1 will make the cursor on the left, 0.9 on the right)
#replace the following bbcodes on previous vBulletin version:
igauche, igauchex, idroite, idroitex, bimgx
ARTICLE BB Code:
article.png

DEMO
  • Display an article inside a message.
  • Custom CSS system according to the browser (IE or not)
#option command:
  1. Normal text: article source (will be displayed below the article box)
ENCADRE BB Code:
encadre.png

DEMO
  • This BB Code insert a text box to the right of a message.
  • Default width is 20% of window
  • Custom CSS system according to the browser (IE or not)
  • [SDMWS included]
#option commands:
  1. Normal Text: The text box title
  2. Numbers (with or without %): The width of text box (can't go over the limit set up in options) in percentage
  3. Numbers with px: The width of text box (can't go over the limit set up in options) in pixels
  4. skin2: To use another skin for the encadre bbcode
  5. fleft: float left
  6. fright or nothing: default float right option
#replace the following bbcodes on previous vBulletin version:
encadrex​

FIELDSET BB Code:
fieldset.png

DEMO
  • This BB Code inserts a [ fieldset ] with a custom title​
  • Custom CSS system according to the browser (IE or not)
  • [SDMWS included]
#option commands:
  1. Normal Text: The fieldset title
  2. Numbers (with or without %): The width of fieldset (can't go over the limit set up in options) in percentage
  3. Numbers with px: The width of fieldset (can't go over the limit set up in options) in pixels
  4. bleft: align the block to the left
  5. bcenter: align the block to the center
  6. bright: align the block to the right
Google DOCS Viewer:
gview.png

DEMO
  1. This BB Code allows to display documents using the "Google Docs - Viewer" (supports many different file types: pdf,ppt,doc,xls...).
  2. Width and height are specified inside options
#option command:
Normal Text: The title of document

SPOILERBB BB Code:
spoilerbb.png

DEMO
  • Compatible when Javascript is disabled (alternative layout)
  • This [ spoilerbb ] code hides the part of a text. Because the spoiler bbcode created by King Kovifor is really good, the Advanced BBcodes Toolbar original spoiler tag name has been modified from [ spoiler ] to [ spoilerbb ]
#option command:
Normal Text: The title of spoiler

JUSTIFY Text BB Code:
Display full justified text

If you use TinyMCE Quattro, this Bb Code is not needed anymore

LATEX BB Code:
latex.png

DEMO

Display mathematical content with mimetex

#option commands:
  1. Normal Text: The Latex box title (default:none)
  2. Numbers (with or without px): The width of text box (can't go over the limit set up in options) in pixels
  3. Numbers with %: The width of text box (can't go over the limit set up in options) in percentage
  4. fleft: block will float left
  5. fright: block will float right
  6. bleft: align the block to the left
  7. bcenter: align the block to the center
  8. bright: align the block to the right
ACCORDION BB Code:
accordion.png

DEMO

Display an accordion box
Compatible when JavaScript is disabled - basic fallback

#Master tag commands (tag: accordion)
  1. Numbers (with or without px): The width of text box (can't go over the limit set up in options) in pixels
  2. Numbers with %: The width of text box (can't go over the limit set up in options) in percentage
  3. Num1(px/%)xNum2: Set the width of the accordion box and the default height for all slides
  4. fleft: block will float left
  5. fright: block will float right
  6. bleft: align the block to the left
  7. bcenter: align the block to the center
  8. bright: align the block to the right
#Slave tag commands (special bbcode: {slide})
  1. Numbers: the height of the slide (in px)
  2. text: Slide title
  3. left or blank: title of the slide will be align to the left
  4. center: title of the slide will be align to the center
  5. right: title of the slide will be align to the right
  6. open: the slide will be opened by default
TABS BB Code:
tabs.png

DEMO
Display some slides in tabs
Compatible when JavaScript is disabled - basic fallback
  • Master tag commands (tag: tabs)
    • Numbers (with or without px): The width of text box (can't go over the limit set up in options) in pixels
    • Numbers with %: The width of text box (can't go over the limit set up in options) in percentage
    • Num1(px/%)xNum2: Set the width of the accordion box and the default height for all slides
    • fleft: block will float left
    • fright: block will float right
    • bleft: align the block to the left
    • bcenter: align the block to the center
    • bright: align the block to the right
  • Slave tag commands (special bbcode: {slide})
    • text: Slide title
    • left: title of the slide will be align to the left
    • center or blank: title of the slide will be align to the center
    • right: title of the slide will be align to the right
    • open: the slide will be opened by default
  • Special function command (special bbcode: {tab})
    {tab=id}Text{tab}: creates a link to a tab of the current Bb Code - id is numeric: 1 (first tab), 2 (second tab), etc.
SLIDER BB Code: display a slider
slider.png

DEMO

Display some slides inside a slider
Compatible when JavaScript is disabled - basic fallback
  • Master tag commands (tag: tabs)
    • Numbers (with or without px): The width of text box (can't go over the limit set up in options) in pixels
    • Numbers with %: The width of text box (can't go over the limit set up in options) in percentage
    • Num1(px/%)xNum2: Set the width of the accordion box and the default height for all slides
    • Numbers with ms (3000ms): to set an interval between slides
    • fleft: block will float left
    • fright: block will float right
    • bleft: align the block to the left
    • bcenter: align the block to the center
    • bright: align the block to the right
    • cmd: to display slider commands (play & pause)
    • autoplay: to start the slider when the page is loaded (this command can be disabled)
    • noclick: to prevent the slider to change of slide when you click on it
    • num: to enable numeric tabs (below the slider) instead of bullet tabs
    • inside: to enable the 'inside' layout which will place all slider commands (previous/next slide, tabs, play/pause) inside slides
  • Slave tag commands (special bbcode: {slide})
    • text: Slide title
    • left or blank: title of the slide will be align to the left
    • center: title of the slide will be align to the center
    • right: title of the slide will be align to the right
    • open: the slide will be opened by default
    • Number (attachement id): will fetch the attachement by its id (must be an image) and will display it with a new large layout; with this layout others command exist:
      • full. It will stretch the image to the container but without respected the ratio
      • top: to display the title with an absolute layout on the top
      • bottom: to display the title with an absolute layout on the bottom
How to use Text/Image Boxes BBcodes
If you want to display a text box or an image on the right of a text (float right), you have to insert first the Text Box or Image, then the Main Text.

Example:
Code:
[encadre]Text box on the right[/encadre]Main Content

[bimg=fleft]image_url[/bimg]Main Content

[bimg=fright]image_url[/bimg]Main Content
Required addons
  1. Check if you've installed the "BbCodes & Buttons Manager" (Minimum version: 1.1.6)
  2. If you're planning to use these Advanced BbCodes UI (user interface), you will have to install the TinyQuattro editor. I will not develop some UI for the XenForo Redactor Editor.

Installation
  1. Use the Add-On Installer OR upload the CONTENT of the "upload" folder in your forum directory & import the addon xml file
  2. Import the Bb Codes bulk xml file (inside the "extras" directory) according to which version of XenForo & of the editor you are using. See here:
    adv11.png
Configuration
  1. Configure addon (usergroups) in ADMIN->OPTIONS->[Bb Codes & Buttons Manager] Advanced Bb Codes
  2. If you want to change the appearance of some Bb Codes, go to ADMIN->Appearance->Style Properties->[Bb Codes & Buttons Manager] Advanced Bb Codes
License
Creative Commons BY 3.0 license
Basic support given: "a problem? => you fix it"
Author
cclaerhout
Downloads
881
First release
Last update
Rating
5.00 star(s) 7 ratings

More resources from cclaerhout

Latest updates

  1. Version 3.7.2 released

    Version 3.7.2 released Style properties updated (thanks to Xon)
  2. Version 3.7.1 released

    Version 3.7.1 released Sanitize some string in option of admin side to avoid XSS breach (Thanks...
  3. Version 3.7.0 released

    Version 3.7.0 released The version on Github had several modification during the last months...

Latest reviews

Installed, thank you very much.
Great addon!
A MUST!!!! Whyyy.... why isn't this in the core of Xenforo? Just tested and my text looks so pro. It's perfect for sites that have articles and news. Terrific!
Just amazing...
This is great and recommended for those who want to empower their community.
Thank You SO MUCH! This is beautiful!
Beautiful addition, really surprised something like this is not directly implemented into the core of XF, thanks for this plugin :)