BBCode suggestion thread

D7D7 Regular
edited July 2010 in Help and Suggestions
Like we all know BB code is a set of tags based on the HTML language that you may already be familiar with. They allow you to add formatting to your messages in the same way as HTML does, but have a simpler syntax and will never break the layout of the pages you are viewing.

There's a lot of BBCode to implements and I think most of them is useful. By implementing a good bbcode, forum thread and post will have a better layout and a better change to attract new members.

Here is a list of BBCode tag that I think will be useful:

1. Anchor Tag

Title: Named anchor link

Tag: anchor

Replacement:
<a name="{param}"></a>

Example: [anchor]You are here[/anchor]You are here

Description: The [goanchor] tag is used in conjunction with the <a href="#name">Jump to the anchor</a> tag. One is not functional without the other.

Use {option}: no

Create another bbcode using these settings and parameters:

Title: Anchor link

Tag: goanchor

Replacement:
<a href="#{option}">{param}</a>

Example: [goanchor=You are here]This takes you to a new location within a post[/goanchor]

Description: The tag allows you to jump to another location within a post, usually used for long posts with headings and/or sections of interest. This tag must be used in conjunction with the [anchor] tag. One is not functional without the other.

Use {option}: Yes

Reason: Anchor tag can make a very long post to be easily navigable the perfect example is this thread. By putting either an index or back to top anchor viewers can easily read post without have to searching their desired contents.



How it will look like:
anchorr.jpg

2. Spoiler Tag

Title: Spoiler

Tag: Spoiler

Replacement:
<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px"><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="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
{param}
</div>
</div>
</div>

Description: Use this to hide important information which might spoil a movie, program, etc for other users.

Use {option}: No

Reason: I think everyone that ever use this BBCode agree that this one is a must implement. It has many use in general and a need in moving pictures sub-forum.

How it will look like:
spoilerb.jpg


3. Spoiler Tag with Name

Title: Spoiler

Tag: Spoiler

Replacement:
<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px"><b>Spoiler</b> for <i>{option}</i>: <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="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">
<div style="display: none;">
{param}
</div>
</div>
</div>

Description: Use this to hide important information which might spoil a movie, program, etc for other users.

Use {option}: Yes

Reason: Same as above but instead of showing 'Spoiler :' it shows 'Spoiler for Name :'. Not does it matter but listed for the sake of completeness

How it will look like :
spoiler1u.jpg

4. Image Left Align

Title: Image Left Align

Tag: imgleft

Replacement:
<IMG SRC="{param}" align=left hspace=10>

Description: Currently when image tag is use the text is then aligned at the bottom right of the image. This BBCode allow text to wrap the image from the left

Use {option}: No

Reason: If you are making a guide with images sometime you want it to be neatly place with the text. This one allowed you to do so. Not really important but there will be no harm done by implementing this. Click this link to see an example of a wrapped text image.



5. Image Right Align

Title: Image Right Align

Tag: imgright

Replacement:
<IMG SRC="{param}" align=right hspace=10>

Description: Currently when image tag is use the text is then aligned at the bottom right of the image. This BBCode allow text to wrap the image from the right

Use {option}: No

Reason: Same as above but this one is right aligned. Click this link to see an example of a wrapped text image.

How both will look like :
imagealign.jpg


6. Highlight

Title: Highlight

Tag: Highlight

Replacement:
<span style="background-color: rgb(255, 255, 0);">{param}</span>

Description: Gives text a highlighted stabilo effect

Use {option}: No

Reason: A better highlight tag than the current because the current can be easily recreated by [highlight]using bold and font color. [/highlight]

How it will look like :
stabilov.jpg


7. Box

Title: Box

Tag: Box

Replacement:
<div style="margin: 5px 20px 20px;"><table border="0" cellpadding="6" cellspacing="0" width="100%"><tbody><tr><td class="alt2" style="border: 1px inset; width: 640px;">{param}</td></tr></tbody></table></div>

Description: Put text into a quote-style box

Use {option}: No

Reason: Can be useful to be used when people want to put a famous quote, a definition, or something important to be easily noticeable.

How it will look like :
boxqt.jpg


8. Table

Title: Table

Tag: Table

Replacement:
<table>{param}</table>

Use {option}: No

Create another bbcode using these settings and parameters:

Title: Table Row

Tag: tr

Replacement:
<tr>{param}</tr>

Use {option}: No

Create another bbcode using these settings and parameters:

Title: Table Column

Tag: td

Replacement:
<td>{param}</td>

Use {option}: No

Reason: Table has many use. From listing a recipe, tools, or ingredients to numerical data statistic. Although it's awesome but it has a big flaw which can cause the page viewed broken. It needs a plugin to prevent it to be a broken page though I'm not sure but you can check this page



10. Subscript

Title: Subscript

Tag: sub

Replacement:
<sub>{param}</sub>

Use {option}: No

Description: To subscript text

Reason: Why not?




11. Subscript

Title: Superscript

Tag: sup

Replacement:
<sup>{param}</sup>

Use {option}: No

Description: To superscript text

Reason: Why not?

How both will look like:
scriptc.jpg


12. Line

Title: Line

Tag: line

Replacement:
<hr size="2" width="{param}%">

Use {option}: No

Description: To create a horizontal line

Reason: Useful when you are making a multiple content articles within one post. Can be used to divide each content



13. Abbreviation

Title: Abbreviation

Tag: abbr

Replacement:
<span title="{option}" style="border-bottom: 1px dotted; cursor: help;">{param}</span>

Use {option}: Yes

Description: To give a a message when you mouse hover it

Reason: Useful when you are making an article with a lot of abbreviation.


How it will look like :
abbrs.jpg


14. Striketrough

Title: Strike

Tag: s

Replacement:
<Strike>{param}</strike>

Use {option}: No

Description: To create a strike-trough text

Reason: Useful when you are making a list of goal to show which one is done.



14. Image Mouse Over

Title: Image Mouse Over

Tag: imgover

Replacement:
<img src="{param}" onmouseover="this.src='{option}" onmouseout="this.src={param}" >

Use {option}: Yes

Description: To create an image that when you mouse over it, it will show another image

Reason: For the lulz



15. Legend Field Set

Title: Legend Field Set

Tag: legend

Replacement:
<fieldset><legend>{option}</legend>{param}</fieldset>

Use {option}: Yes

Description: To create a legend

Reason: Why not?

How it will look like :
legendgh.jpg






Will be updated if I see another interesting BBcode
If you are interested on making a BBCode it's very simple to make one

Here's a simple tutorial
Let's say we are going to make
<MARQUEE>Hi There! </MARQUEE>
into a BBCode.
All you have to do is find the variable in this case it's 'Hi there!' with {param}
Give your BBCode tag a name and you are done

Title: Any title will do

Tag: marquee (This one act as a BBCode tag name which will be [Marquee])

Replacement:
[code]<MARQUEE>{param}</MARQUEE>

Description: Any description will do

Use {option}: No (It's only be used if there's a second variable within your tags)

Example if you wish to use option in marquee
<MARQUEE WIDTH="20%">Hi There!</MARQUEE>
In default marquee has set it width to be always 100%. We can then set this as a second variable (The first variable is 'Hi There' which is replaced by {param}) by replacing '20' into an {option}

Therefore it will be
<MARQUEE WIDTH="{option}%">{param}</MARQUEE>

Basically any html functions can be turned into a bbcode. It's nice to have a semi functional html in user generated content without the possibility of harming the main site.

Comments

  • TLVTLV Regular
    edited July 2010
    I don't see why not. But spoiler and highlight(er) would be the most used.
  • DfgDfg Admin
    edited July 2010
    I support this!
  • da teachada teacha Regular
    edited July 2010
    Oh kurwa, look at all this bloat.

    Anchor tags are a good idea for epic posts.

    Spoiler tags should be implemented for entertainment forums where they serve a purpose.

    The rest will not serve any particular useful purpose, at all.

    Whilst we're at it, remove the alignment, indent, file attachment, font, colour, size tags.

    Someone show me a post where these tags have improved the content?
  • D7D7 Regular
    edited July 2010
    da teacha wrote: »
    Oh kurwa, look at all this bloat.

    Anchor tags are a good idea for epic posts.

    Spoiler tags should be implemented for entertainment forums where they serve a purpose.

    The rest will not serve any particular useful purpose, at all.

    Whilst we're at it, remove the alignment, indent, file attachment, font, colour, size tags.

    Someone show me a post where these tags have improved the content?

    Yes, it doesn't improve any content but it is there for the sakes of beauty and readability. People tends to read something that has a neat format. Of course we can always put a great article with nice formatting by using text and a lot of spacing still it doesn't kill for having some nice BBCode to make it to look even better. I think the better question is why not?
  • edited July 2010
    L

    10. Subscript

    Title: Subscript

    Tag: sub

    Replacement:
    <sub>{param}</sub>
    

    Use {option}: No

    Description: To subscript text

    Reason: Why not?

    Bunghole and stupid noob would probably take a liking to this.
  • DfgDfg Admin
    edited July 2010
    da teacha wrote: »
    Oh kurwa, look at all this bloat.

    Anchor tags are a good idea for epic posts.

    Spoiler tags should be implemented for entertainment forums where they serve a purpose.

    The rest will not serve any particular useful purpose, at all.

    Whilst we're at it, remove the alignment, indent, file attachment, font, colour, size tags.

    Someone show me a post where these tags have improved the content?
    Not a good idea. I use those codes frequently.
  • muffinsmuffins Regular
    edited July 2010
    spoiler and bold are bout the only ones I ever use, just to much shit for me to remember with the other stuff
  • D7D7 Regular
    edited July 2010
    Bunghole and stupid noob would probably take a liking to this.

    Well, it might be useful in math and science related thread though.
    muffins wrote: »
    spoiler and bold are bout the only ones I ever use, just to much shit for me to remember with the other stuff

    :confused: Why would you want to remember it? We can easily create a shortcut in the reply form. All we need to is making/finding the proper icon and voila you'll see them right besides vimeo shortcut

    I forgot to mention that I added several tag in the list
  • BigBroBigBro Regular
    edited July 2010
    I was going to suggest a few codes, but OP did already.
    I support OP's post.
  • D7D7 Regular
    edited July 2010
    Added several images for example
Sign In or Register to comment.