1. 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 3.7.1

Advanced Bb Codes to make posts look like magazine articles

  1. cclaerhout
    Compatible XF 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"

    Images

    1. config_01.png
    2. config_02.png
    3. config_03.png
    4. config_04.png
    5. config_05.png
    6. config_06.png
    7. config_07.png
    8. config_08.png
    9. config_09.png
    10. config_10.png
    11. config_11.png
    12. adv01.png
    13. adv02.png
    14. adv03.png
    15. adv04.png
    16. adv05.png
    17. adv06.png
    18. adv07.png
    19. adv08.png
    20. adv09.png
    21. adv10.png
    22. adv12.png
    23. adv13.png
    24. adv14.png
    25. bimg1.png
    26. bimg2.png
    27. bimg3.png
    28. bimg4.png
    29. bimg5.png

Recent Reviews

  1. Tize
    Tize
    5/5,
    Version: 3.6.3
    Installed, thank you very much.
  2. imspot
    imspot
    5/5,
    Version: 3.5.1
    Great addon!
  3. msolano
    msolano
    5/5,
    Version: 3.4.3
    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!
  4. Gopala Subramanium
    Gopala Subramanium
    5/5,
    Version: 3.3.3 - Beta 3
    Just amazing...
  5. DaiAku
    DaiAku
    5/5,
    Version: 3.3
    This is great and recommended for those who want to empower their community.
  6. resonansER
    resonansER
    5/5,
    Version: 3.2.1
    Thank You SO MUCH! This is beautiful!
  7. Ignited
    Ignited
    5/5,
    Version: 3.2.1
    Beautiful addition, really surprised something like this is not directly implemented into the core of XF, thanks for this plugin :)