1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

BB Code

Discussion in 'Other Resources [Archive]' started by Brogan, Sep 18, 2010.

  1. Brogan

    Brogan XenForo Moderator Staff Member

    This thread can be used to demonstrate or request BB Code for use on forums.

    We're still not sure how easy it is to add BB Code in XenForo, or if it will be possible to do so via the ACP, but in the meantime, we can at least provide some of the more common code that is usually requested.

    One thing that comes up all the time is how to wrap text around an image.
    The way I achieve this is by using float left and float right.

    The image is placed between the float tags and then the text comes immediately after, without a line break.

    BB Code
    Code:
    [float_right]{TEXT}[/float_right]
    HTML
    HTML:
    <div style="float: right; margin-left: 6px">{TEXT}</div>
    Usage
    [float_right]your_image.png[/float_right]Chicanes, love them or hate them, you can't ignore them. Currently chicanes litter our favourite tracks, creating slowness and safety all round. Chicanes originated in the thirties when terrified race organisers desperately tried to slow cars down, which were going dangerously close to the predicted top speed of the corners...

    I can't demonstrate how it works here so here's a screenshot instead.

    float_right.PNG

    The float left BB Code would be as follows:

    BB Code
    Code:
    [float_left]{TEXT}[/float_left]
    HTML
    HTML:
    <div style="float: left; margin-right: 6px">{TEXT}</div>

    Another useful one is a scrolling box with a user definable height which can be used for large amounts of text to avoid making the post too long.

    BB Code
    Code:
    [box={NUMBER}]{TEXT}[/box]
    HTML
    HTML:
    <div style="width: auto; height: {NUMBER}px; background:#FFFFFF; overflow:auto; border:1px solid #999999; padding:4px">{TEXT}</div>
    Usage
    [box=200]Text or images can be placed inside this scrolling window.
    Useful for large amounts of text, for example:

    Lorem ipsum dolor sit amet...[/box]

    Again, I can't show it in use here so here's another screenshot.

    box.PNG

    Feel free to add any BB Code you use or make requests for any others.
     
  2. CyberAP

    CyberAP Well-Known Member

    [float side="left"]TEXT/IMAGE[/float]
     
  3. James

    James Well-Known Member

    Was just about to say this. I'd assume custom BBCode allows parameters so all we'd have to do is:
    [float="left/right"]content[/float]
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    I use separate codes so I can set a right or left margin between the text and image as required.
     
  5. dutchbb

    dutchbb Well-Known Member

    A spoiler tag. Text will be hidden and a link "show" or "hide" is showed. Useful for movie reviews and such.

    Code:
    [spoiler]Text you want to hide.[/spoiler]
     
    anotheralias, Phases and CyberAP like this.
  6. Brogan

    Brogan XenForo Moderator Staff Member

    I use this as a spoiler on my site.

    BB Code
    Code:
    [button={TEXT1}]{TEXT2}[/button]
    HTML
    HTML:
    <div class="spoiler"><div class="quotetitle"><input type="button" value="{TEXT1}" style="font-size:11px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = '{TEXT1}'; }" /></div><div class="quotecontent"><div style="display: none;">{TEXT2}</div></div></div>
    Usage
    [button=What is the Ultimate Answer to the Ultimate Question of Life, The Universe, and Everything]42[/button]
     
  7. Peggy

    Peggy Well-Known Member

    Thanks for posting this thread, Brogan. I'm sure that once the software is released, there will be a few requests here due, in good part, to the page feature, among others.
     
  8. RickM

    RickM Well-Known Member

    One I always add to ANY vBulletin forum I run :D

    Strike Through

    Code:
    [strike]text with a line through it[/strike]
    From the looks of it, XF uses :

    Code:
    [s]text with a line through it[/s]
    HTML:

    Code:
    <strike>text here</strike>
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    Do you think there's a need to add strike if s already exists?
     
    CyberAP likes this.
  10. RickM

    RickM Well-Known Member

    Depends I guess... I know I personally always enter [strike]...couldn't hurt to add it really :)
     
  11. Mikey

    Mikey Well-Known Member

    make [strike] an alias for [s] :d
     
  12. James

    James Well-Known Member

    Suggestion to be able to have multiple BBCodes assigned to 1 HTML replacement anyone? :p
     
    Nick and Enigma like this.
  13. Karelke

    Karelke Active Member

    Spoiler tag:

    Code:
    [spoiler]Hide this.[/spoiler]
     
  14. anotheralias

    anotheralias Well-Known Member

    - The spoiler tag where it shows a black bar and you can see the text by hovering your cursor over it - in addition to the previously mentioned show/hide, which by the way is also useful for lots of text or a really large image.

    - Embed Flash - and yes I know there are security risks, but I'd only be embedding the Flash that exists on my own domain. (It would be nice to have one with parameters - right now I have to create a new one every time something is an odd size.)
     
  15. LFC_SL

    LFC_SL New Member

    I only want to add that on the forum I come from there is a persistent issue with spoiler covered text showing up on email subscriptions! Obviously far from ideal. So if and when XF implement spoiler tags, just test with emails to ensure proper functionality :p
     
  16. Floris

    Floris Guest

    Do those float bbcode ones require a clear:both ?
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

    Possibly.
    What are the implications of not having it?
     
  18. Floris

    Floris Guest

    If you don't clear your floats, you can get unexpected behaviors, such as an inherited float causing the avatar to jump and nest within the next block, etc.
     
  19. Brogan

    Brogan XenForo Moderator Staff Member

    Thanks Floris.
    Coding isn't my strong point so it's possible that most of my custom BB Code is not that great :D

    It works though so it can't be that bad... ;)
     
  20. Floris

    Floris Guest

    Once you get your xenforo copy I recommend to test the code :D
     

Share This Page