List of MyBB BBCode

[Ayzek]

A list of default MyBB code is available here. All of that is active here. Most is the same as what we're used to. While myBB inherently lacked tables and spoilers, Adminstration has already fixed this oversight. The majority of code is largely the same; you can review it all in that link above.

However, for ease of access, I'll post the most prominent differing codes here:

Alignment

---

In Zetaboards, we had [left][center][right] to align things. MyBB instead has:

Code:

Code:

[align=right]Right[/align]
[align=center]Center[/align]
[align=left]Left[/align]
[align=justify]Justify[/align]

which Produces:
Right
Center
Left
Justify

Images

---

My BB uses:
Code:

Code:

[img]http://board.eternityrpc.com/images/badges/administrator.png[/img]
[img=75x30]http://board.eternityrpc.com/images/badges/administrator.png[/img]

Produces:



Heading

---

The [h] tag is meant to give you a quick and standarized way of adding headings to your stuff, using the pre-defined html heading tags.

Code:

[h=1]Heading 1[/h]
[h=2]Heading 2[/h]
[h=3]Heading 3[/h]
[h=4]Heading 4[/h]
[h=5]Heading 5[/h]
[h=6]Heading 6[/h]

Projects:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Point
The [point] BBtag is meant to replace the tag for those of us for who words (and pre-defined headings) just aren't good enough. It takes your numerical input, adds a "pt", and plugs it into a span's style. It only goes up to 69, to avoid abuse.

Code:

[point=1]1[/point]
[point=5]5[/point]
[point=10]10[/point]
[point=20]20[/point]
[point=40]40[/point]
[point=69]69[/point]
[point=70]70[/point]
[point=200]200[/point]

Projects:
1
5
10
20
40
69
[point=70]70[/point]
[point=200]200[/point]

Size

---

The size here uses keywords, as opposed to numbers. Until you get a good hang on this, it may be better to use the provided buttons. But, regardless:

Code:

[size=xx-small]xx-small[/size]
[size=x-small]x-small[/size]
[size=small]small[/size]
[size=medium]medium[/size]
[size=large]large[/size]
[size=x-large]x-large[/size]
[size=xx-large]xx-large[/size]

Produces:
xx-small
x-small
small
medium
large
x-large
xx-large

Spoiler

---

The spoiler tag here is exactly like the tag in Zetaboard.

Code:

[spoiler=Title]Content[/spoiler]

Produces:

Show ContentTitle:

Content

Tables

---

For some godforsaken reason, myBB does not have a default table BBCode. It's unfathomable. The Internet made it better though. You should have a "TableGenerator" under the Smilies box. That'll help you create tables. You'll need to copy+paste it into the textbox though.

For those who prefer to write the code themselves, however: our BBcode works just like the HTML table tags, though with fewer options. See below. This system is arguably more powerful than Zetaboard's, as it allows setting the column span.

Code:

[table=Super Title]
[tr][th]Title 1[/th][th]Title 2[/th][th]Title 3[/th][/tr]
[tr][td]Cell 1[/td][td]Cell 2[/td][td]Cell 3[/td][/tr]
[tr][td]Cell 4[/td][td][/td][td]Cell 5[/td][/tr]
[tr][td=3]Cell 6[/td][/tr]
[/table]

Produces:

Super Title
Title 1	Title 2	Title 3
Cell 1	Cell 2	Cell 3
Cell 4		Cell 5
Cell 6

Tabs

---

Code:

[tabs]
[tab=Title 1]Content 1[/tab]
[tab=Title 2]Content 2[/tab]
[tab=Title 3]Content 3[/tab]
[/tabs]

Produces:

Title 1

Content 1

Title 2

Content 2

Title 3

Content 3

Tooltips

---

The tooltip I installed is the exact same as the tooltip we had on Zetaboards.

Code:

[Tooltip=Title]Lorem ipsum dolor sit amet, diceret pertinax abhorreant te sea, vero omittantur vis in. No odio partem appellantur eam, eu vel porro possim eripuit, nulla noster sit in. Mazim mundi mei an, an feugiat oportere duo. No tantas maiestatis pri, saepe quidam ceteros ex quo, reque doctus option ea nam.[/tooltip]

Produces:
Title

Lorem ipsum dolor sit amet, diceret pertinax abhorreant te sea, vero omittantur vis in. No odio partem appellantur eam, eu vel porro possim eripuit, nulla noster sit in. Mazim mundi mei an, an feugiat oportere duo. No tantas maiestatis pri, saepe quidam ceteros ex quo, reque doctus option ea nam.
Close

[Ayzek]

I have improved the Table myCode. I got irritated that centering something inside a td added an blank line to the cell when you saved the code, so I coded things to bypass the [align] tag and just center things with the table cell itself. It's great, believe me. As a side effect, we can also use other css to style the cell.

Examples:

Code:

[table]
[tr]
[td=text-align:center]This text is centered[/td]
[/tr]
[/table]

Produces:

This text is centered

But the code is more powerful than that:

Code:

[table]
[tr]
[td=text-align:center;color:red;text-decoration:underline;font-weight:bold]This text is red, centered, underlined, and bold.[/td]
[/tr]
[/table]

Produces:

This text is red, centered, underlined, and bold.

BUT I AM TOO COOL TO STOP THERE:

Code:

[table=Super title]
[tr]
[td]1 Cell[/td][td]2 Cell[/td][td]3 Cell[/td]
[/tr]
[tr]
[td=3]3 Cells wide, yeeeeaaahhh[/td]
[/tr]
[tr]
[td=3,text-align:center; background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); font-size:20pt; font-weight:bold]BIG ASS CENTERED TEXT ON A RAINBOW BACKGROUND.[/td]
[/tr]
[tr]
[td=3,text-align:center;font-size: 60pt;background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;background-clip: text;]FlAwL3Ss V1CkT0RyYYy.[/td]
[/tr]
[/table]

Super title
1 Cell	2 Cell	3 Cell
3 Cells wide, yeeeeaaahhh
BIG ASS CENTERED TEXT ON A RAINBOW BACKGROUND.
FlAwL3Ss V1CkT0RyYYy.

[Ayzek]

Additionally, know that we have an alternative to the image tag that automatically resizes the image based on the width you provide: [fimg].

Code:

[img]http://board.eternityrpc.com/images/erpc/logo.png[/img]
[fimg=100]http://board.eternityrpc.com/images/erpc/logo.png[/fimg]

Produces:



If you try that with the img code, it'll spaz out and give you a square eventually.

[Ayzek]

Additionally, I re-enabled the code that allows us to embed Getty Images images. All we need is a small bit from the the embed code that Getty Images provides for images that they permit others to embed, but it thankfully works fine if you just copy+paste the whole damn thing in. If you want to embed from getty images, use this code. Don't just steal their images, yo. >_>

Code:

[getty]<a id='OZrgz8KdQSZQKVcpTZiWpQ' class='gie-single' href='http://www.gettyimages.com/detail/935215110' target='_blank' style='color:#a7a7a7;text-decoration:none;font-weight:normal !important;border:none;display:inline-block;'>Embed from Getty Images</a><script>window.gie=window.gie||function(c){(gie.q=gie.q||[]).push(c)};gie(function(){gie.widgets.load({id:'OZrgz8KdQSZQKVcpTZiWpQ',sig:'qOuNoYHGzh-zn9rwh72aab6TcrVAlAy8G8YQw5qPEhU=',w:'508px',h:'339px',items:'935215110',caption: true ,tld:'com',is360: false })});</script><script src='//embed-cdn.gettyimages.com/widgets.js' charset='utf-8' async></script>[/getty]

Produces:
Embed from Getty Images

[Ayzek]

In continuation of above, as the code only seems to let you embed one image per post (so that's a thing, remember that).
The proper code:

Code:

[getty]id:'OZrgz8KdQSZQKVcpTZiWpQ',sig:'qOuNoYHGzh-zn9rwh72aab6TcrVAlAy8G8YQw5qPEhU=',w:'508px',h:'339px',items:'935215110'[/getty]

Produces:
Embed from Getty Images