• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • 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

Brogan

XenForo moderator
Staff member
#1
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.
 

Brogan

XenForo moderator
Staff member
#6
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]
 

Peggy

Well-known member
#7
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.
 

RickM

Well-known member
#8
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>
 

anotheralias

Well-known member
#14
- 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
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
 
F

Floris

Guest
#18
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.
 

Brogan

XenForo moderator
Staff member
#19
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.
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... ;)