Bulletin Board Code - Tutorial

Started by Tìtstewan, February 21, 2014, 11:35:02 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Tìtstewan

Bulletin Board Code - Tutorial

EDIT:
A new BBC tutorial has been added to Help tab.




Kaltxì ma frapo!
Since I got some PMs in the past with questions how the Bulletin Board codes are work and that LN "standard" help page about it isn't so useful, I decided to write this detailed tutorial about them. Here I will add every BB code tags which is possible on this forum. Please note that I can't add here every possible combination of those tags, but some examples are here.

Following symbols you have on a standard message board:
SymbolBB codeExample                 
[b][/b]Hello
[i][/i]Hello
[u][/u]Hello
[s][/s]Hello
[glow=red,2,300][/glow]Hello
[shadow=red,left][/shadow]Hello (doesn't work...)
[pre][/pre]
Hello friends!
[left][/left]
Hello
[center][/center]
Hello
[right][/right]
Hello
[hr]
[size=XYpt][/size]Hello friends!
[font=font style][/font]Hello friends!
Change Color [color=selected color][/color]Hello
[flash=200,200][/flash]it inserts flash video
[img][/img]
[url][/url]http://learnnavi.org/
[email][/email]it inserts your email adress
[ftp][/ftp]it inserts your file
[table][/table], [tr][/tr], [td][/td]below more about the table BB codes
[sup][/sup]Hello
[sub][/sub]Hello
[tt][/tt]Hello
[code][/code]
Hello
[quote][/quote]
QuoteHello
[spoiler][/spoiler]
[list][li][/li]
[li][/li][/list]
  • it lists
  • various things
[desc=][/desc]Kaltxì
[prezi][/prezi]it inserts prezi lesson
[audio][/audio]it inserts audio file



The table BB code

The buttons for the table...
[table][/table], [tr][/tr], [td][/td]
...works only together:
[table]
[tr][td]   A   [/td][td]   B   [/td][/tr]
[tr][td]   C   [/td][td]   D   [/td][/tr]
[/table]
Blue is general inserts table, teal inserts the table row and navy inserts the table column.
-->
   A      B   
   C      D   



Colors

You can use instead the color name also the color in hexadecimal number,

[b][color=#CC3366]text[/color][/b] <-- added the number "#CC3366"
which makes,
text

There are also four special color tags:

[black]This test should appear in black[/black]
[blue]And this one in blue[/blue]
[red]...red...[/red]
[white]Ulte fì'u leiu teyr[/white]
[color=transparent]Transparent text WOU![/color]
-->
This test should appear in black
And this one in blue
...red...
>Ulte fì'u leiu teyr<
>Transparent text WOU!<

Writting style of some BB codes

Some codes have the similar pattern regarding the writting style.

One of the most used BB code is the URL code, which just link a website:

          [url]http://learnnavi.org/[/url] -> http://learnnavi.org/

But in truth, it will be look like this,

          [url=http://learnnavi.org/]http://learnnavi.org/[/url]

Also note that this forum automatically change a posted link,
          http://learnnavi.org/ -> http://learnnavi.org/

...the same happend with YouTube videos, but it shows the video..

So, but that URL code can more.

          [url=http://learnnavi.org/]Homepage[/url] -> Homepage

Some other BB codes have the same writting pattern,

          [email][/email]          [email=[email protected]]My email[/email]
          [ftp][/ftp]          [ftp=http://learnnavi.org/someones-file.doc]My file[/ftp]
          [desc=][/desc]          [desc=Text which will be shown, if your mouse is placed over it]original text[/desc] -> original text
          [spoiler][/spoiler]          [spoiler=description of the spoiler]something is in this spoiler[/spoiler]
          [quote][/quote]          [quote=who wrote this quote? (link also works here)]something is in this quote[/quote]
Quote from: who wrote this quote? (link also works here)something is in this quote
          [audio][/audio]          [audo=http://learnnavi.org/someones-audio-file.mp3]Audio's title[/audio]



BB codes with attributes

One BB code can have attributes.

[img width=X height=Y][/img]

X is the width in pixel
Y is the height in pixel

Example

Original size,
old gallery link?id=5412[/img]
old gallery link?id=5412[/img]

Size changed by attributes,
[img width=400 height=90]http://forum.learnnavi.org/MGalleryItem.php?id=5412[/img]


And for lazy people ;D just leave out the "height" attribute,
[img width=400]http://forum.learnnavi.org/MGalleryItem.php?id=5412[/img]


Size changed (forced) by attributes,
[img width=500 height=200]http://forum.learnnavi.org/MGalleryItem.php?id=5412[/img]





If you want to use images for the Forum's Gallery, you can use the smg tag.
See here to learn more about that tag's potential:
http://forum.learnnavi.org/projects/bulletin-board-code-tutorial/msg614926/#msg614926
(I would not post those useful stuff here as it will break some html stuff I used here.)




The code tag

A short note to the code tag,
this [code][/code] cam be "extended",

For example "html",
[code=html][/code]
Code (html) Select
<table>
<tr>
<td style="background-color: #c2c2c2;"><span style="font-size: small;"><strong>smell</strong></span></td>
<td><span style="font-size: small;"><strong>hefi</strong><br />
'smell' </span></td>
<td><span style="font-size: small;"><strong>syam</strong><br />
'smell' </span></td>
<td><span style="font-size: small;"><strong>tìng ontu</strong><br />
'smell'</span></td>
<td><span style="font-size: small;"><strong>fahew</strong><br />
'smell' </span></td>
<td><span style="font-size: small;"><strong>hefitswo</strong><br />
'sense of smell' </span></td>
</tr></table>




Special tags

SMF forum supports some more BB codes. Some are rare or cannot used by everyone.

The php-tag
[php]<?php
echo 'Hello World!';
?>[/php]

<?php
echo 'Hello World!';
?>

Note: as you see, in this post there appear that "apostrophe bug"...

The me-tag
[me=Titstewan]is testing some tags I forgot[/me]
* Titstewan is testing some tags I forgot

Right-to-Left
[rtl]right to left![/rtl]
right to left!
Left-to-Right
[ltr]left to right![/ltr]
left to right!
Abbreviation
[abbr=exemlpi gratia]eg[/abbr]
eg

Acronym
[acronym=Simple Machines Forum]SMF[/acronym]
SMF

Ignoring BB code tag (ignores bbcode formatting)
[nobbc][/nobbc]
[nobbc][color=green]old gallery link?id=5412[/img][/color][/nobbc]
[color=green]old gallery link?id=5412[/img][/color]

Convert a Unix Timestamp into a time recognizable by people
[time]December 31, 1969, 06:00:00 pm[/time]
[time]November 24, 2005, 12:10:40 am[/time]
November 22, 2005, 04:10:40 PM

Marquee
Originally, this forum supports also the marquee tag, but it has been disabled.
[move]move[/move]
move (realized by html equalevant)



Link in the same windows
[iurl][/iurl]
[anchor=][/anchor]

[iurl=#test]Link to anchor[/iurl]
Link to anchor
-->
[anchor=test]Test[/anchor]
Test

HTML code tag
[html][/html]<br />[html]&lt;div title=&quot;Hello everyone! How are you?&quot; style=&quot;text-align:center;width:600px;color:blue;background-color:#FFFF99; font-weight:bold;font-size:22pt;padding:10px;border:2px dotted black; font-family: Papyrus;&quot;&gt;Kaltxì ma frapo! Ayngaru lu fpom srak?&lt;/div&gt;[/html]
Kaltxì ma frapo! Ayngaru lu fpom srak?


Note: This HTML tag works only for admins and a very small group of members.



Tag combinations

Sometimes it's quite useful to combine tags.

Example 1 - bold and umderline tag
I mention this first, just because there is a little difference in underlining :),

[size=12pt][u][b]Hello world[/b][/u][/size]  vs.  [size=12pt][b][u]Hello world[/u][/b][/size]
result,
Hello world  vs.  Hello world


Example 2 - image with link
Basic,
[url][img][/img][/url]
feed the tags,
[url=http://forum.learnnavi.org/mgallery/?sa=item;id=5412]old gallery link?id=5412[/img][/url]
Result,
old gallery link?id=5412[/img]


Example 3 - Changing the color of the description function

In this example the colortag must be inside the description tag,
[desc=Hello, my friend!][color=purple]Kaltxì ma oeyä 'eylan![/color][/desc]
Result,
Kaltxì ma oeyä 'eylan!


Playing with the list tag

[list][o]circle[/li][/list]
[list][O]circle[/li][/list]
[list][0]circle[/li][/list]
[list][*]disc[/li][/list]
[list][@]disc[/li][/list]
[list][+]square[/li][/list]
[list][x]square[/li][/list]
[list][#]square[/li][/list]

Result,
  • circle
  • circle
  • circle
  • disc
  • disc
  • square
  • square
  • square


A list in a list

[list]
[li]test1[/li]
[li]test2
[list]
[li]a[/li]
[li]b
[list]
[li]x[/li]
[li]y[/li]
[/list]
[/li]
[li]test3[/li]
[/list]
[/li]
[li]test4[/li]
[/list]


Result
  • test1
  • test2

    • a
    • b

      • x
      • y
    • test3
  • test4



Complex stuff

Finally a more complex example, useful for signatures,
[table][tr][td][img width=400]http://forum.learnnavi.org/MGalleryItem.php?id=5412[/img]
[font=Papyrus][b][size=9pt][desc=Hello friends, bloom Na'vi! I hope that everyone can speak Na'vi][color=blue]Kaltxì ma eylan, 'ivong Na'vi! Sìlpey oe, frapo tsivun pivlltxe lì'fyayä Na'vi.[/color][/desc][/size][/b][/font][/td][td]old gallery link?id=5212[/img][/td][/tr][/table]


[table][tr][td][img width=400]http://forum.learnnavi.org/MGalleryItem.php?id=5412[/img]
[font=Papyrus][b][size=9pt][desc=Hello friends, bloom Na'vi! I hope that everyone can speak Na'vi][color=blue]Kaltxì ma eylan, 'ivong Na'vi! Sìlpey oe, frapo tsivun pivlltxe lì'fyayä Na'vi.[/color][/desc][/size][/b][/font][/td][td]old gallery link?id=5212[/img][/td][/tr][/table]

Result,

Kaltxì ma eylan, 'ivong Na'vi! Sìlpey oe, frapo tsivun pivlltxe lì'fyayä Na'vi.
old gallery link?id=5212[/img]




I hope this little tutorial hepls you. If you have questions, just ask here. :)

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Swoka Ikran

Nice. :) I'm amazed this didn't exist already, seeing we've been around for 4 years.

I don't know how many times I've edited posts because I screwed up the BBC (or tried to use HTML out of habit...)
2010 was the year of the Na'vi.Vivar 'ivong Na'vi!


 
Avatray | NWOTD Sigbars | Sacred's Sigbar Tool | My collection of Avatar merchandise

Tìtstewan

There is a help page of this forum, but it is standard and not really complete.


Btw, I see a bug in my post... ::)

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Blue Elf

Well, I think it is enough to make help page public (http://forum.learnnavi.org/help). Although it may be not complete, only a few of codes are used daily. But I'm wondering why to publish codes which can use only admins/mods? :D
Oe lu skxawng skxakep. Slä oe nerume mi.
"Oe tasyätxaw ulte koren za'u oehu" (Limonádový Joe)


Tìtstewan

Well, because some of them should know what they can? :P

...meh there is an interesting "list" bug, no idea why...the also same I seeing at the rule post...

Bug fixed!

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

`Eylan Ayfalulukanä

This is extremely useful, and should be stickied somewhere. I am also going to 'steal' it, and put it in the Dothraki forums. :)

Yawey ngahu!
pamrel si ro [email protected]

Tìtstewan

I'm not sure if some codes works also for your Dothraki forum. It is first not the same forum version 1.1XX vs. 2.02, second, some codes are created by mods.
But feel free to use it. :) :)

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tìtstewan

#7
I've added some tags I totally forgot:
Quote from: Tìtstewan on August 23, 2014, 02:45:17 AM
Apxa tìfmetok

[php][/php]

<?php
echo 'Hello World!';
?>


NICE! ;D :D


[me]
[me=Titstewan]is testing some tags I forgot[/me]
->
* Titstewan is testing some tags I forgot

HRH! :D


abc[br]abcde
-->
abc
abcde


[black]This test should appear in black[/black]
[blue]And this one in blue[/blue]
[red]...red...[/red]
[white]Ulte fì'u leiu teyr[/white]
-->
This test should appear in black
And this one in blue
...red...
>Ulte fì'u leiu teyr<

Cool! For blue, black, red and white stuff, I don't need color=#aabbcc anymore ;D
...that stupid "apostrophe bug" broke that php example in the first post...

EDIT:
<?php echo 'Hello World!';?>

Weird, in this post it works, still...

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tirea Aean

In my experience, The PHP thing works ONLY if you do not edit the post afterward. You need to write the code and the entire post correctly the first time and then never edit the post. I'm not sure why. :-\

Tìtstewan

#9
I've edited, my previous post and it's looks normal
It has to do with that stupid apostrophe bug which appreas also in HTML posted stuff...
Example:
<td style="width: 200px;">Proposed Na'vi word</td>
...instead Na'vi
But this doesn't appear in every post. Weird.

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tirea Aean


Tìtstewan


-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Ertew


True, as long as You linking images outside gallery.
For linking content from gallery You should use SMF Gallery [smg] tag like below.
*As long as You can use width instead of height attribute and don't need width/height malformation.

Any errors in spelling, tact or fact are transmission errors.

Hi! I'm a signature virus. Copy me into your signature to help me spread.

Tìtstewan

Awesome! I didn't know that one can extend the smg tag with such attributes! :D +1!
I will add that when I'm back from work!

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tìtstewan

#14
Quote from: Ertew on September 17, 2014, 03:19:59 PM

True, as long as You linking images outside gallery.
For linking content from gallery You should use SMF Gallery [smg] tag like below.
*As long as You can use width instead of height attribute and don't need width/height malformation.
I would say "can", because the smg tag has a frame. :) Also, there is a little bug I noticed after I've added it to the OP. It's break the html formatting (I still added a link to your post here)
I'm trying to fix it.

EDIT: I tested some stuff and found out that the smg tag breaks the html formatting...
EDIT 2: I just tested it on my local SMF installation and there appears the same bug. So, another SMF fail.

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Ertew

Thanks for karma. Now few more things to explain.


1. Yes, i agree with You, there's a mistake. IMO version below sounds better:
Quote from: Ertew on September 17, 2014, 03:19:59 PM
True, as long as You linking images outside gallery.
For linking content from gallery You should try use SMF Gallery [smg] tag like below.
*As long as You can use width instead of height attribute and don't need width/height malformation.


2. Please try to compress size of Your compendium. I think about create simple table of content (i.e. standard interface; colors; images; links; lists and tables; ...) and hide rest of examples under that 'radioactive' tag. This would be simpler to navigate.


3. Important thing to notice, theres actually two different ways to play with [smg] tags. First has type=album where id=nr refer to user albums, second has different (or none) type so id=nr refer to items in gallery.


4. For me, black frame wasn't a bug, it's a feature. I like the ability to zoom and direct link to gallery.
Yes, I know, unclickable emoticon without black frame looks better than [smg] version, but for bigger images and other resources, gallery item win.
If You want a bug, heres another. Sometimes whole magic disappear while preparing post but everything looks good after posted msg.


5. While ago found another feature.

Last found feature was caption=text property. Doesn't work with type=box and type=album. On other types Your text replaces 'More info...' link, if link wasn't visible, text was added below without extra link. When zoomed, text appears under image on left, while on right still persist 'More info...' link.
Any errors in spelling, tact or fact are transmission errors.

Hi! I'm a signature virus. Copy me into your signature to help me spread.

Tìtstewan

I'm thinking about to rewrite this stuff, but when I get more time for it...

---
As for the frame, I didn't say the frame itself is a bug, I mean the bug caused by the smg tag that break the html code.
[smg id=5892 type=full]
(I tested it in 90k2 thread)

---
Hmm, probably because "type=av" is designed for documents and audio/video stuff, but not for images? And "full, preview, width/height" attribute doesn't work for documents.

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-

Tirea Aean

ah! smg type=full. AWESOME. Gone now for me are the days of the long link to gallery.

[smg id=5843 width=300 type=full]

EDIT: Ah. the black frame. Who cares, it takes less effort to remember/type out the code.

Ertew



Part related to forum gallery need to be corrected. Every single link with SMG tag return (Sorry, but you are not allowed to access the gallery), while old IMG tag return Sorry, you aren not allowed to view this file... so many posts need to be corrected.
This is sad :(
Any errors in spelling, tact or fact are transmission errors.

Hi! I'm a signature virus. Copy me into your signature to help me spread.

Tìtstewan

#19
Well, the problem is, that the gallery module we have used was the oldes modification and it was a kind of work to get that almost 6+ year old mod working on SMF2. Also, the old gallery isn't supported by the author since 2010. That modification - also the successor of that gallery Avea Media - has been removed from the official SMF modification download site due to reported security issues...

EDIT: That message you can read is still form the old gallery, because I have not uninstalled it yet.

-| Na'vi Vocab + Audio | Na'viteri as one HTML file | FAQ | Useful Links for Beginners |-
-| Kem si fu kem rä'ä si, ke lu tìfmi. |-