Custom BBcodes for phpBB3

Discuss anything here, but obey the rules!

Moderators: Tech Team, Support Staff

User avatar
topdown
Joined: March 18th, 2007, 8:20 pm

October 4th, 2007, 1:26 am

THIS FIRST SECTION IS DIRECTLY FROM THE MANUAL FOR phpBB3.

Adding a BBCode is very easy. If done right, allowing users to use your new BBCode may be safer than allowing them to use HTML code. To add a BBCode, click Add a new BBCode to begin. There are four main things to consider when adding a BBCode: how you want your users to use the BBCode, what HTML code the BBcode will actually use (the users will not see this), what short info message you want for the BBCode, and whether or not you want a button for the new BBCode to be displayed on the posting screen. Once you are done configuring all of the custom BBCode settings, click Submit to add your new BBCode.
ImageCreating a new BBCode. In this example, we are creating a new [font] BBCode that will allow users to specify the font face of the specified text.

In the BBCode Usage form, you can define how you want your users to use the BBCode. Let's say you want to create a new font BBCode that will let your users pick a font to use for their text. An example of what to put under BBCode Usage would be

Code: Select all

[font={FONTNAME}]{TEXT}[/font]
This would make a new [font] BBCode, and will allow the user to pick what font face they want for the text. The user's text is represented by TEXT,while FONTNAME represents whatever font name the user types in.

In the HTML Replacementform, you can define what HTML code your new BBCode will use to actually format the text. In the case of making a new [font] BBCode, try

Code: Select all

<span style="font-family: {FONTNAME}">{TEXT}</span>
This HTML code will be used to actually format the user's text.

The third option to consider when adding a custom BBCode is what sort of help message you want to display to your users if they choose to use the new BBCode. Ideally, the helpline message is a short note or tip for the user using the BBCode. This message will be displayed below the BBCode row on the posting screens.
Note:

If the next option described, Display on posting, isn't enabled, the helpline message will not be displayed.
Lastly, when adding a new BBCode, you can decide whether or not you want an actual BBCode button for your new BBCode to be displayed on the posting screens. If you want this, then check the Display on posting checkbox.

<hr>

Now on to the codes.

Note: Lots of these came from other sites, I only wrote a couple.

Horizontal Rule Makes a line accross the page

BBCode usage box

Code: Select all

[hr][/hr]
HTML replacement box

Code: Select all

<hr></hr>
Some say the closing for this needs to be there for the BBC to work.

Help line box

Code: Select all

Makes a line across the page
Display on posting page Note: this is where you decide to display a button or not. Ticked=yes

SUBMIT

<hr>

Spoiler to show and hide a large post inside a quote style box

BBCode usage box

Code: Select all

[spoiler]{TEXT}[/spoiler]
HTML replacement box

Code: Select all

<div style="margin:20px; margin-top:5px"><div class="quotetitle"><b>Spoiler:</b> <input type="button" value="Show" style="width:45px;font-size:10px;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 = 'Show'; }" /></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>
You want to be sure that there are no spaces in the HTML replacement text.

Help line box

Code: Select all

Show and Hide a large post
Display on posting page Note: this is where you decide to display a button or not. Ticked=yes

SUBMIT

<hr>


Center a object or text

BBCode usage box

Code: Select all

[center]{TEXT}[/center]
HTML replacement box

Code: Select all

<div align="center">{TEXT}</div>
Help line box

Code: Select all

Center Object or Text
Display on posting page Note: this is where you decide to display a button or not. Ticked=yes

SUBMIT

<hr>

Align object right

BBCode usage box

Code: Select all

[right]{TEXT}[/right]
HTML replacement box

Code: Select all

<div align="right">{TEXT}</div>
Help line box

Code: Select all

Align object right
Display on posting page Note: this is where you decide to display a button or not. Ticked=yes

SUBMIT

<hr>

Align object left

BBCode usage box

Code: Select all

[left]{TEXT}[/left]
HTML replacement box

Code: Select all

<div align="left">{TEXT}</div>
Help line box

Code: Select all

Align object left
Display on posting page Note: this is where you decide to display a button or not. Ticked=yes

SUBMIT

<hr>

Back Ground Color

BBCode usage box

Code: Select all

[bgcolor={COLOR}]{TEXT}[/bgcolor]
HTML replacement box

Code: Select all

<span style="background:{COLOR}">{TEXT}</span>
Help line box

Code: Select all

Back Ground Color
Display on posting page Note: this is where you decide to display a button or not. Ticked=yes

SUBMIT

<hr>

Marquee with mouseover and colored text. Smiles also work. This one is mine lol.

BBCode usage box

Code: Select all

[marquee={COLOR}]{TEXT}[/marquee]
HTML replacement box

Code: Select all

<marquee style="color:{COLOR}"  onmouseout="this.start()" onmouseover="this.stop()" loop="-1" scrollamount="4" width="100%">{TEXT}</marquee>
Help line box

Code: Select all

[marquee=color here]TEXT HERE[/marquee]
Display on posting page Note: this is where you decide to display a button or not. Ticked=yes

SUBMIT

<hr>

Subscript Text

BBCode usage box

Code: Select all

[sub]{TEXT}[/sub]
HTML replacement box

Code: Select all

<sub>{TEXT}</sub>
Help line box

Code: Select all

Subscript Text
Display on posting page Note: this is where you decide to display a button or not. Ticked=yes

SUBMIT

<hr>

Superscript text.

BBCode usage box

Code: Select all

[sup]{TEXT}[/sup]
HTML replacement box

Code: Select all

<sup>{TEXT}</sup>
Help line box

Code: Select all

Supperscript text.
Display on posting page Note: this is where you decide to display a button or not. Ticked=yes

SUBMIT

<hr>

Bordered text.

BBCode usage box

Code: Select all

[border]{TEXT}[/border]
HTML replacement box

Code: Select all

<fieldset>{TEXT}</fieldset>
Help line box

Code: Select all

Border around text.
Display on posting page Note: this is where you decide to display a button or not. Ticked=yes

SUBMIT

<hr>

NOTES ONLY SEEN WHEN EDITING A POST

BBCode usage box

Code: Select all

[note]{TEXT}[/note]
HTML replacement box

Code: Select all

<!-- {TEXT} -->
Help line box

Code: Select all

NOTES ONLY SEEN WHEN EDITING A POST.
Display on posting page Note: this is where you decide to display a button or not. Ticked=yes

SUBMIT

<hr>

Google search text or a word

BBCode usage box

Code: Select all

[google]{TEXT}[/google]
HTML replacement box

Code: Select all

 <a href="http://www.google.com/search?q={TEXT}" target="_blank">{TEXT}</a>
Help line box

Code: Select all

Google search text or a word
Display on posting page Note: this is where you decide to display a button or not. Ticked=yes

SUBMIT

<hr>

MORE TO COME

:lol:
Last edited by topdown on December 7th, 2007, 5:24 am, edited 3 times in total.
Reply

User avatar
HydroJohn
Joined: August 7th, 2007, 1:25 pm

October 6th, 2007, 11:29 am

Thanks TopDown :D
Will Use This When PhpBB3 Comes Out :!:
Hopefully Soon :)
The Number 1 Place On The Web To Advertise Your Forum, Blog or Site:

http://myforumadvertiser.freeforums.org
Reply

MostWanted
Joined: June 14th, 2007, 2:01 pm

October 6th, 2007, 12:15 pm

Woah! Thanks for the info!
Reply

User avatar
Victor
Joined: June 16th, 2007, 9:33 pm

October 7th, 2007, 2:12 am

thanks this will help ppl alot
Reply

User avatar
topdown
Joined: March 18th, 2007, 8:20 pm

October 10th, 2007, 1:12 am

Thanks Guys. Glad to help.8)

If anyone needs additional help with this or needs some specific tags, feel free to post it in this thread.
Reply

Brian Russell
Joined: October 20th, 2007, 12:19 am

October 20th, 2007, 8:37 am

Is there a code to put a button for color tags? The coding in long form doesn't work the greatest
Reply

User avatar
topdown
Joined: March 18th, 2007, 8:20 pm

October 20th, 2007, 8:15 pm

Brian Russell wrote:Is there a code to put a button for color tags? The coding in long form doesn't work the greatest
Do you mean for text,
Whats wrong with the color picker in phpBB3?

A button can be made, but you would still need to fill in the color.
Reply

dj-budda
Joined: October 8th, 2007, 3:36 am

October 21st, 2007, 11:17 pm

Woha I actually understood that
<a href="http://www.habbobabble.net" target="_blank"><img src="http://i20.tinypic.com/24pxfo7.jpg" border="0"></a>
Reply


lapmonkey9
Joined: September 13th, 2007, 8:00 pm

October 24th, 2007, 9:21 pm

Does anyone know how to do the <embed> code :(
JOIN MY FREE FORUM
www.chatawaytoday.co.uk

<a href=http://chatawaytoday.com target="_blank"><img src="http://i165.photobucket.com/albums/u44/ ... BB.gif.jpg" border="0" alt="OFFICIAL CHAT AWAY WEBSITE"></a>
AFFILIATE US

Code: Select all

<a href=http://chatawaytoday.com target="_blank"><img src="http://i165.photobucket.com/albums/u44/lapmonkey9/logo_phpBB.gif.jpg" border="0" alt="OFFICIAL CHAT AWAY WEBSITE"></a>
Reply

User avatar
topdown
Joined: March 18th, 2007, 8:20 pm

October 25th, 2007, 2:23 am

lapmonkey9 wrote:Does anyone know how to do the <embed> code :(
I need to know what it actually is your going to embed.

You can make a simple one, but it will be a pain, because of all the variables that will need to be filled in.

So, what are you trying to embed?


Note: this is only for phpBB3, not 2
Reply

User avatar
topdown
Joined: March 18th, 2007, 8:20 pm

October 25th, 2007, 2:23 am

forums error :oops:
Last edited by topdown on October 25th, 2007, 2:27 am, edited 1 time in total.
Reply


Karaflas 100
Joined: October 20th, 2007, 8:13 am

November 10th, 2007, 1:49 pm

nice
Reply

User avatar
Blockis2
Joined: October 4th, 2007, 1:23 am

January 3rd, 2008, 9:52 pm

For Embedding Simple Stuff Like Sites, just use the

Code: Select all

[web]link here[/web]
code.
Image
phpBB | PHP | HTML | Block Island | FreeForums.Org Award Winner (2) | Superheroes Are Among Us...
Reply

Nexus
Joined: September 20th, 2007, 9:07 pm

January 3rd, 2008, 9:58 pm

Thanks, this will prove to be extremely helpful with the release of phpbb3. :)

-Rich
ReKaul.com Newest Project: Satire on Recalls!

Image
Image
Image
GraphicWebz.com Scheduled Release: Spring 2008
Image
FREE SHOUTBOX!
[It's not about how many members you have...
...It's about how many come back.] - R. S.
Reply

User avatar
topdown
Joined: March 18th, 2007, 8:20 pm

January 3rd, 2008, 10:01 pm

Blockis2 wrote:For Embedding Simple Stuff Like Sites, just use the

Code: Select all

[web]link here[/web]
code.
I am unsure as to what you are referring to.


This topic is for phpBB3, and there is no [web] tag in phpBB3.

The [web] tag is nothing more than a frame or iframe and the developers are suggesting not to use it as it could be a potential security risk.

The best thing would be to make the iframe replacement and keep it private to partially remove the security risk.
Reply

User avatar
Blockis2
Joined: October 4th, 2007, 1:23 am

January 3rd, 2008, 10:18 pm

Oh. Sorry. Heh,
Image
phpBB | PHP | HTML | Block Island | FreeForums.Org Award Winner (2) | Superheroes Are Among Us...
Reply

Luci ShAnI
3
Joined: May 5th, 2008, 9:22 am

May 5th, 2008, 10:11 am

how to hide nd code our links ???
Reply

User avatar
Jeroen
Joined: December 8th, 2007, 11:34 am

May 5th, 2008, 10:57 am

Can we also make a thing, like only moderators can use that button to write a warning in a special box in a post.
Do you understand me?

For example when a topic is locked by a moderator: (in Dutch):

Image

Translation:
This topic is locked by a moderator
Reason: here you can put the reason
This is an automatic lockpost

Don't know exactly how to translate :P
sz.freeforums.org
Sorry for my bad English!
Reply

User avatar
topdown
Joined: March 18th, 2007, 8:20 pm

May 5th, 2008, 2:19 pm

No. it is not possible to have permissions on it at this time without a mod for it.

You can how ever make it and keep it hidden and tell the moderators about it so they can use it.
Reply

User avatar
Jeroen
Joined: December 8th, 2007, 11:34 am

May 5th, 2008, 2:48 pm

Oke, I don't need permissions for it, I can keep it hidden 8)
Could you please help me making this?

Just like that example i've givven.
Like you can put a reasen in it :D

I would really appreciate that :) (Or via PB)
sz.freeforums.org
Sorry for my bad English!
Reply

Luci ShAnI
3
Joined: May 5th, 2008, 9:22 am

May 5th, 2008, 4:17 pm

Luci ShAnI wrote:how to hide nd code our links ???
no answer ??..
Reply

User avatar
mr. Bond
Joined: December 29th, 2007, 12:59 am

May 5th, 2008, 8:44 pm

What does
how to hide nd code our links ???
Mean? I don't understand what you are asking, could you explain further please?
<a href="http://thejamesbond.org" class="postlink">www.TheJamesBond.org</a>
<a href="http://the-webmasters-resource.info" class="postlink">The Webmasters Resource</a> - learn to code, get website help and much more!
Reply

User avatar
topdown
Joined: March 18th, 2007, 8:20 pm

May 5th, 2008, 11:16 pm

Jeroen wrote:Oke, I don't need permissions for it, I can keep it hidden 8)
Could you please help me making this?

Just like that example i've givven.
Like you can put a reasen in it :D

I would really appreciate that :) (Or via PB)
What style is it going to be for
prosilver based or subsilver 2 based?

Also note that : This only works on phpBB3
FreeForums currant version is phpBB2 with the exception of the Beta phpBB3 they are testing.
Reply