The Complete BBCode Reference

GMSuerte's picture

Table of Contents

  1. Table of Contents
  2. Introduction
  3. Tags
    1. abbr
    2. acronym
    3. anchor
    4. b
    5. br
    6. c
    7. center
    8. code
    9. col
    10. color
    11. em
    12. email
    13. flash
    14. float
    15. font
    16. google
    17. h
    18. head
    19. header
    20. hr
    21. h1
    22. h2
    23. h3
    24. h4
    25. h5
    26. h6
    27. i
    28. img
    29. index
    30. justify
    31. left
    32. list
    33. notag
    34. php
    35. quote
    36. r
    37. right
    38. row
    39. s
    40. size
    41. sp
    42. strong
    43. sub
    44. sup
    45. table
    46. td
    47. row
    48. u
    49. url
    50. wikipedia
    51. youtube
    52. * (star)
  4. Compatibility
    1. TEFc Library
      1. Comment Form
  5. Contributing
    1. Todo
  6. See also
    1. TEFc
  7. Infrequently Asked Questions (iFAQ)
    1. So is this meant to replace the original guide or what?

Introduction

Hello, peoples. I have put together a complete BBCode reference just for you. It's certainly not perfect, but with your help maybe it can be.

The original guide was fine, but it doesn't have all the tags. This one does (and if it doesn't, tell me if I missed any!).

To paraphrase the original guide, BBCode tags are alphanumeric words surrounded by square brackets, [ and ]. All tags have an opening variant that looks like [tag]. Most tags need to be closed with its corresponding closing tag, which looks like [/tag].

If your BBCode input is well-formed enough, it is converted to HTML, which is then rendered by the browser. Say you want this image embedded into the page. The img tag will create an image out of its content, the text in between the opening and the closing tag. A proper use of the img tag in BBCode will look like this: [img]/community/files/pictures2/picture-30519.gif[/img]. The resulting HTML will be <img src="/community/files/pictures2/picture-30519.gif">, resulting in this:

Many tags allow for parameters that change their output. Parameters follow the name in the opening tag, usually starting with an equals sign (=), but not always.

Below is all the BBCode tags that TEFc supports. Each tag will be introduced with its opening and closing variants. If the tag has no closing variant, the tag will be listed without one.

I apologize for the ugly design. I tried to keep the CSS light so that it doesn't confuse you (unless you're a coder, of course). There are some obvious differences, though, such as the yellow h3's.

Tags

abbr


  • Parameter: Required.
  • Content: Optional, but preferred.

Description: This tag indicates that the content enclosed is an abbreviation for whatever is specified in the parameter. If you hover over the abbreviation, you'll see what it stands for.
Format BBCode input Result
[abbr={title}]{text}[/abbr] I am [abbr=Doctor]Dr.[/abbr] Hartley, master of BBCode. I am Dr. Hartley, master of BBCode.

acronym


  • Parameter: Required.
  • Content: Optional, but preferred.

Description: This tag indicates that the content enclosed is an acronym for whatever is specified in the parameter. If you hover over the acronym, you'll see what it stands for.
Format BBCode input Result
[acronym={title}]{text}[/acronym] I am heading over to [acronym=The Endless Forest community]TEFc[/acronym] to do some intense coding. I am heading over to TEFc to do some intense coding.

anchor


  • Parameter: Required.
  • Content: Optional, but preferred.
Description: This tag creates an anchor with the unique name specified by its parameter. You can jump to the anchor by using an a hyperlink pointing to that anchor. Note that there cannot be spaces in the parameter.
Format BBCode input Result
[anchor={name}]{text}[/anchor]
[anchor=example_anchor]I am an example anchor[/anchor].

[url=#example_anchor]Click me[/url] to get to the example anchor.
I am an example anchor.

Click me to get to the example anchor.

b


  • Parameter: Don't include, or it will break.
  • Content: Optional, but preferred.

Description: Bolds the text enclosed by the tag.
Format BBCode input Result
[b]{text}[/b] And the bubble said, "if you don't bring me some water soon, [b]I am going to burst.[/b]". And the bubble said, "if you don't bring me some water soon, I am going to burst.".

br


  • Parameter: Don't include, or it will break.
  • Content: Optional.

Description: Creates a line break.
Format BBCode input Result
[br]{text} I am text.[br]I am text.[br][br]I am text. I am text.
I am text.

I am text.

c


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a column entry in a table. Same as the col and td tags. See the table tag for examples.
Format BBCode input Result
[c]{text}[/c] See the table tag for examples. See the table tag for examples.

center


  • Parameter: Don't include, or it will break.
  • Content: Optional, but preferred.
Description: Centers the enclosed text.
Format BBCode input Result
[center]{text}[/center]
I'm so tired of being left aligned. I am thinking of centering myself, but I don't think I'm brave enough.

[center]I did it! I have been centered! I am so happy I could cry.[/center]
I'm so tired of being left aligned. I am thinking of centering myself, but I don't think I'm brave enough.

I did it! I have been centered! I am so happy I could cry.

code


  • Parameter: Don't include, or it will break.
  • Content: Optional, but preferred.

Description: Escapes all HTML in the provided content. Doesn't do anything to BBCode. If the content contains line breaks, it will be processed as a code block. Otherwise, processes the content as inline code.
Format BBCode input Result
[code]{text}[/code] My favorite JavaScript function is [code]document.querySelector()[/code]. My favorite JavaScript function is document.querySelector().
[code]{text} {text}[/code]
To get the number of elements with the class name 'chocolate', do this:
[code]var elems = document.getElementsByClassName('chocolate');

console.log(elems.length);[/code]
To get the number of elements with the class name 'chocolate', do this:
var elems = document.getElementsByClassName('chocolate');

console.log(elems.length);

col


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a column entry in a table. Same as the c and td tags. See the table tag for examples.
Format BBCode input Result
[col]{text}[/col] See the table tag for examples. See the table tag for examples.

color


  • Parameter: Required.
  • Content: Optional, but preferred.

Description: Gives the enclosed content the color indicated by the parameter. Aside from the equals sign (=) in the beginning, the parameter must be a single word consisting of any combination of alphanumeric, hash (#), and underscore (_) characters.
Format BBCode input Result
[color={word}]{text}[/color] What kind of color is [color=papayawhip]papaya whip[/color]? What kind of color is papaya whip?
[color=#{hex}]{text}[/color] The deer was not impressed. "[color=#0069FF]I have seen better shoes worn by an [em]anteater[/em][/color]," he remarked. The deer was not impressed. "I have seen better shoes worn by an anteater," he remarked.

em


  • Parameter: Don't include, or it will break.
  • Content: Optional, but preferred.

Description: Italicizes the content enclosed by the tag. Note that this does not decompose to the HTML <em> tag, so if you wish to semantically indicate emphasis, use <em> instead.
Format BBCode input Result
[em]{text}[/em] This is a [em]very[/em] important celebration. This is a very important celebration.

email


  • Parameter: Optional.
  • Content: Required.

Description: Links to an email address linked to in the tag. If there is a parameter present, then that parameter will be the address and the enclosed content will be the text linking to that address via a mailto protocol. If there is no parameter, then the content will serve as both the email and the text linking to that email.
Format BBCode input Result
[email]{address}[/email] You can contact ToT at [email]contact@tale-of-tales.com[/email]. You can contact ToT at .
[email={address}]{text}[/email] If you send an email to [email=contact@tale-of-tales.com]Tale of Tales[/email], you might be able to to convince them to make a game about floppy cats. If you send an email to , you might be able to to convince them to make a game about floppy cats.

flash


  • Parameter: Required.
  • Content: Required.

Description: Embeds a flash object into the page. The parameters designate the dimensions of the object in pixels. The content will be a url to the source of a flash file.
Format BBCode input Result
[flash={pixels}x{pixels}]{url}[/flash] This is what my pictogram looks like: [flash=150x150]http://tale-of-tales.com/TheEndlessForest/register/symbol2.swf?word=1Gchy[/flash] This is what my pictogram looks like:

float


  • Parameter: Required.
  • Content: Required.

Description: Floats the enclosed text to the left or right, depending on the parameter passed in.
Format BBCode input Result
[float=(left|right)]{text}[/float] If you haven't noticed me yet, you'd better keep searching because [float=right]I am over here.[/float] If you haven't noticed me yet, you'd better keep searching because I am over here.

font


  • Parameter: Required.
  • Content: Optional, but preferred.

Description: Encloses text with the font specified by the parameter.
Format BBCode input Result
[font={font name}]{text}[/font] [font=Papyrus]I am very tired.[/font] I am very tired.

google


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Performs a Google search to the enclosed content when clicked.
Format BBCode input Result
[google]{search query}[/google] If you don't know how to make sushi, just search [google]how to make sushi[/google]. If you don't know how to make sushi, just search how to make sushi.

h


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Indicates that the enclosed content is the heading of a table. Same as the head and header tags. This tag must be the child of a row/r/tr tag. See the table tag for examples.
Format BBCode input Result
[h]{text}[/h] See the table tag for examples. See the table tag for examples.

head


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Indicates that the enclosed content is the heading of a table. Same as the head and header tags. This tag must be the child of a row/r/tr tag. See the table tag for examples.
Format BBCode input Result
[head]{text}[/head] See the table tag for examples. See the table tag for examples.

header


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Indicates that the enclosed content is the heading of a table. Same as the head and header tags. This tag must be the child of a row/r/tr tag. See the table tag for examples.
Format BBCode input Result
[header]{text}[/header] See the table tag for examples. See the table tag for examples.

hr


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a horizontal rule, which is a line that thematically separates sections of text.
Format BBCode input Result
[hr]{text} I am a section.[hr]I am another section. I am a section.
I am another section.

h1


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a heading that has an anchor attached that is to be used in the index tag.
Format BBCode input Result
[h1]{text}[/h1] See the index tag for examples. See the index tag for examples.

h2


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a heading that has an anchor attached that is to be used in the index tag.
Format BBCode input Result
[h2]{text}[/h2] See the index tag for examples. See the index tag for examples.

h3


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a heading that has an anchor attached that is to be used in the index tag.
Format BBCode input Result
[h3]{text}[/h3] See the index tag for examples. See the index tag for examples.

h4


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a heading that has an anchor attached that is to be used in the index tag.
Format BBCode input Result
[h4]{text}[/h4] See the index tag for examples. See the index tag for examples.

h5


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a heading that has an anchor attached that is to be used in the index tag.
Format BBCode input Result
[h5]{text}[/h5] See the index tag for examples. See the index tag for examples.

h6


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a heading that has an anchor attached that is to be used in the index tag.
Format BBCode input Result
[h6]{text}[/h6] See the index tag for examples. See the index tag for examples.

i


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Italicizes the enclosed text.
Format BBCode input Result
[i]{text}[/i] My advanced literature class just read [i]Twilight[/i]. My advanced literature class just read Twilight.

img


  • Parameter: Optional, but preferred.
  • Content: Required.

Description: Embed an image into the page. The content indicates the source of the image, and parameters can be used to specify various details about that image. Using parameters, you can specify the width and height of the image, alternate text if the image doesn't load, or the alignment of the image. Note that certain browsers may not display the alternate text.
Format BBCode input Result
[img]{src}[/img] [img]/community/files/pictures2/picture-30519.gif[/img]
[img={width}x{height}]{src}[/img] [img=50x40]/community/files/pictures2/picture-30519.gif[/img]
[img={alternate text}]{src}[/img] [img=If I have trouble loading, I should be displayed instead.]/community/files/pictures2/picture.gif[/img] If I have trouble loading, I should be displayed instead.
[img align=(left|right|center)]{src}[/img] [img align=right]/community/files/pictures2/picture-30519.gif[/img]

index


  • Parameter: Optional.
  • Content: Will not do anything.

Description: This is actually an interesting tag. Creates a table of contents made of all the h1 through h6 tags. The table of contents at the top of this page is the result of using this tag. You can specify whether to use an ordered list or an unordered list to display the table of contents.
Format BBCode input Result
[index] No example provided. See the top of this page. No example provided. See the top of this page.
[index style=(ul|ol)] No example provided. See the top of this page. No example provided. See the top of this page.

justify


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Justifies the enclosed content.
Format BBCode input Result
[justify]{text}[/justify] [justify]I am text. And text. And text again. And again. And again, and again, and again.[/justify]
I am text. And text. And text again. And again. And again, and again, and again.

left


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Aligns the enclosed content to the left.
Format BBCode input Result
[left]{text}[/left] [left]I am text. And text. And text again. And again. And again, and again, and again.[/left]
I am text. And text. And text again. And again. And again, and again, and again.

list


  • Parameter: Optional.
  • Content: Required.

Description: Creates a list. The supplied parameter is a single character that specifies the type of list. Valid characters are: c, d, 1, i, I, a, and A. If no parameter is specified, c is applied by default. Depending on the character, the list will change the style of each list item. The character also affects whether the list is an ordered list or an unordered list. The following table displays the outcome of each option:
Character List style Tag
None provided circle ul
c circle ul
d disc ul
s square ul
1 decimal ol
a lower-alpha ol
A upper-alpha ol
i lower-roman ol
I upper-roman ol
Note that TEFc replaces ul list item bullets with its own custom bullet, so you won't see their true output without altering the CSS.
Format BBCode input Result
[list]{list items}[/list] [list][*]List item 1[*]List item 2[/list]
  • List item 1
  • List item 2
[list={character}]{list items}[/list] [list=1][*]List item 1[*]List item 2[/list]
  1. List item 1
  2. List item 2

notag


  • Parameter: Don't include, or it will break.
  • Content: Optional, but preferred.

Description: Prevents the BBCode inside this tag from being processed. Does nothing to the HTML. Also escapes the @ character, which can be used to escape email addresses. This tag doesn't seem to work on the color, font, or list tags.
Format BBCode input Result
[notag]{text}[/notag] To italicize the word "chocolate", do [notag][i]chocolate[/i][/notag]. To italicize the word "chocolate", do [i]chocolate[/i].

php


  • Parameter: Don't include, or it will break.
  • Content: Optional, but preferred.

Description: Indicates that the content enclosed is PHP code. Applies syntax highlighting to the code if within <?php and ?>.
Format BBCode input Result
[php]{php code}[/php] [php]<?php echo 'hi there'; ?> I am also here.[/php]

<?php echo 'hi there'?> I am also here.

quote


  • Parameter: Optional.
  • Content: Required.

Description: Indicates that the enclosed content is a quotation. Quotes can be nested. If params are provided, those params indicate the source of the quotation. The params can optionally include quotation marks, which will be removed. The params can also include BBCode and HTML.
Format BBCode input Result
[quote]{quotation}[/quote] [quote]I have been quoted.[/quote]
Quote:
I have been quoted.
[quote=(&quot;|"|'){source}(&quot;|"|')]{quotation}[/quote] [quote="Santa Claus"]Let there be light.[/quote]
Santa Claus wrote:
Let there be light.
[quote]{quotation}[quote]{nested quotation}[/quote]{quotation}[/quote] [quote=<u>[i]GMSuerte[/i]</u>][quote=A piece of chocolate]I am hungry.[/quote]So am I![/quote]
GMSuerte wrote:
A piece of chocolate wrote:
I am hungry.
So am I!

r


  • Parameter: Optional.
  • Content: Required.

Description: Creates a row of content in a table. This tag is the same as the row and tr tags. This tag accepts an optional color parameter, which will change the background color of the row. This tag must be the child of a table tag and this tag can only contain h/head/header or c/col/td tags. See the table tag for examples.
Format BBCode input Result
[r]{text}[/r] See the table tag for examples. See the table tag for examples.
[r color={color name}]{text}[/r] See the table tag for examples. See the table tag for examples.
[r color=#{color hex}]{text}[/r] See the table tag for examples. See the table tag for examples.

right


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Aligns the enclosed content to the right.
Format BBCode input Result
[right]{text}[/right] [right]I am text and you aren't.[/right]
I am text and you aren't.

row


  • Parameter: Optional.
  • Content: Required.

Description: Creates a row of content in a table. This tag is the same as the r and tr tags. This tag accepts an optional color parameter, which will change the background color of the row. This tag must be the child of a table tag and this tag can only contain h/head/header or c/col/td tags. See the table tag for examples.
Format BBCode input Result
[row]{text}[/row] See the table tag for examples. See the table tag for examples.
[row color={color name}]{text}[/row] See the table tag for examples. See the table tag for examples.
[row color=#{color hex}]{text}[/row] See the table tag for examples. See the table tag for examples.

s


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Strikes through the enclosed text.
Format BBCode input Result
[s]{text}[/s] I just ate [s]100[/s] 2 bugs. I just ate 100 2 bugs.

size


  • Parameter: Required.
  • Content: Optional, but preferred.

Description: Changes the font size of the enclosed text. If the parameter supplied is below 6 or greater than 48, then the size is set to whichever value is closer.
Format BBCode input Result
[size={pixels}]{text}[/size] I love you [size=30]this much[/size]. I love you this much.

sp


  • Parameter: Don't include, or it will break.
  • Content: Optional.

Description: Creates non-breaking space that's supposed to prevent line breaks from being inserted. Also allows the writer to insert multiple spaces without them being condensed to one space character.
Format BBCode input Result
[sp] I am stuff.[sp][sp][sp][sp]I am also stuff. I am stuff.    I am also stuff.

strong


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Indicates that the enclosed text has strong importance. Note that this only changes the look of the text. If you wish to convey strong importance semantically, use the HTML version instead.
Format BBCode input Result
[strong]{text}[/strong] I love you [strong]this much[/strong]. I love you this much.

sub


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a subscript out of the supplied content.
Format BBCode input Result
[sub]{text}[/sub] H[sub]2[/sub]O is my favorite elem&mdash; I mean, my favorite molecule. H2O is my favorite elem— I mean, my favorite molecule.

sup


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a superscript out of the supplied content.
Format BBCode input Result
[sup]{text}[/sup] H[sup]+[/sup] is a hydrogen ion. H+ is a hydrogen ion.

table


  • Parameter: Don't include, or it will break.
  • Content: Required.
Description: Creates a table.
Format BBCode input Result
[table]{text}[/table]
[table]
[row color=red]
[h]Category #1[/h]
[h]Category #2[/h]
[/row]
[row]
[c]Cell #1[/c]
[c]Cell #2[/c]
[/row]
[/table]

Category #1 Category #2
Cell #1 Cell #2

td


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a column entry in a table. Same as the c and col tags. See the table tag for examples.
Format BBCode input Result
[td]{text}[/td] See the table tag for examples. See the table tag for examples.

row


  • Parameter: Optional.
  • Content: Required.

Description: Creates a row of content in a table. This tag is the same as the r and row tags. This tag accepts an optional color parameter, which will change the background color of the row. This tag must be the child of a table tag and this tag can only contain h/head/header or c/col/td tags. See the table tag for examples.
Format BBCode input Result
[row]{text}[/row] See the table tag for examples. See the table tag for examples.
[row color={color name}]{text}[/row] See the table tag for examples. See the table tag for examples.
[row color=#{color hex}]{text}[/row] See the table tag for examples. See the table tag for examples.

u


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Underlines the enclosed content.
Format BBCode input Result
[u]{text}[/u] I am [u]text[/u]. I am text.

url


  • Parameter: Optional, but preferred.
  • Content: Required.

Description: If a parameter is supplied, that parameter is the url and the enclosed content will hyperlink to that url. If no parameter is supplied then the enclosed content is both the url and the hyperlink to that url.
Format BBCode input Result
[url]{url}[/url] This is the link to donate to The Endless Forest: [url]http://tale-of-tales.com/TheEndlessForest/donate.html[/url]. This is the link to donate to The Endless Forest: http://tale-of-tales.com/TheEndlessForest/donate.html.
[url={url}]{text}[/url] Have you seen [url=/community/frontpage]the front page[/url]? It is quite fascinating. Have you seen the front page? It is quite fascinating.

wikipedia


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Creates a link to a wikipedia page. The content must be the exact term matching an existing Wikipedia page, or it will direct the user to a nonexist page.
Format BBCode input Result
[wikipedia]{Wikipedia page}[/wikipedia] Have you seen [wikipedia]The Endless Forest[/wikipedia]'s Wikipedia page? Have you seen The Endless Forest's Wikipedia page?

youtube


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Embeds a YouTube video into the page. The content supplied is the id of a YouTube video.
Format BBCode input Result
[youtube]{YouTube id}[/youtube] [youtube]vXaYiqAYeF8[/youtube]

* (star)


  • Parameter: Don't include, or it will break.
  • Content: Required.

Description: Used inside the list tag to provide a list item.
Format BBCode input Result
[*]{text} See the list tag for examples. See the list tag for examples.

Compatibility

TEFc Library

Comment Form

In case you were wondering, my comment form module is mostly compatible with the BBCode tags here. Some of the tags have not been coded for, so they will not show up during previews. All tags will show up once submitted. If you know how a tag should turn out, and previewability is not a problem for you, then you can still use the forms as normal.

Contributing

You can contribute by pointing out any mistakes I have made or by making any suggestions as to how I can make it better. Feel free to leave a comment, as feedback is appreciated.

Todo

I personally don't like using tables, so I am looking for a way to list each tag in a different format, but I don't know what since I'm not that creative. I would like if someone would suggest a better way to arrange the examples in this guide.

See also

TEFc

Infrequently Asked Questions (iFAQ)

Note that the names of the questions may change, so if you need to link to the questions, link to the whole iFAQ, not the individual question itself.

So is this meant to replace the original guide or what?

Yes, or at least it was. After making it, it seems that this guide is more of a supplemental reference than a replacement for the original. If you want to make this a complete replacement, you can most certainly help make that happen. But in the meantime, this is just going to be something different.

Aivilo's picture

Ooh. Tracking this~

Ooh. Tracking this~
Eq's picture

Yup, bookmarking.

Yup, bookmarking.
Keepiru's picture

.

.
OshiBoo's picture

Sitting.

Sitting.

-Track-

-Track-

Unplugged's picture

Useful as always

Useful as always
Mjrn's picture

Thankyouthankyouthankyouthank

Thankyouthankyouthankyouthankyou.
Account previously Mjrn, returned to Veedeer.

You're a star

You're a star <3 Thank you!
GMSuerte's picture

Y'all are too kind.

Y'all are too kind. Smiling

Nice.

Nice.

Great job, handy. For

Great job, handy.
For improved readability, I'd do the table of contents horizontal and make tags' tables into separate divs with darker bg and vertical logic;
'merging' the format and input fields, writing the parameter/content notice into it;
omitting the 'html output' as your average user has no use for it.
These came to mind at the first look.
GMSuerte's picture

Hello there. I don't want to

Hello there.

I don't want to overdo it on the CSS, because I think doing so will mislead the user. I left the table of contents the way it is since it's meant to showcase the [index] tag, and that's how it will look if you use it. I could make them expandable via click or condensed side by side, but, again, I don't want to mislead the user into thinking that using that tag will result in either of those options.

I find anything better than tables in most cases, so I guess I will do divs. I didn't want to at first because in my mind it would've looked the same as how it looks using tables. Then again, that's obviously a CSS issue and not an HTML issue. Plus, I'm bad at choosing colors since I'm obviously not a designer.

Now that you mention it, merging the format and input fields is a good idea, since the format field is kind of messy. I definitely need to make that more readable. Although I'm a little concerned about the tags that allow for a various and finite amount of parameters, such as left|right|center. I'd have to make an example for each instance, and that's unnecessary.

You're right: the average user has no use for the HTML. Those entries were remnants from when I wanted this to be an in-depth BBCode guide for advanced (for TEFc) coders (though now that I think of it that sounds like a contradiction). I guess that doesn't make sense since making this an in-depth guide would detract from the guide's utility as a reference. Plus, it's not robust since they are inserted using JavaScript, not from me copy/pasting each output.
Rouda's picture

Tracking this.

Tracking this.
ShrinkingRose's picture

Track.

Track.
Laiia's picture

What a good idea ! Tracking,

What a good idea ! Tracking, thanks !

Avatar & signature by Shimmyshimmy. ♥

Now that I've read it

Now that I've read it through, I see.
A screenshot could do as an example for [index].
I find that ToC has to be easy on the eye, as its primary function is to point the user around.
What fits a book, doesn't sit with the interactive website:
the anchors are navigated best within the span of a few rows vs. spread out as a long list.

Plus, tag names by themselves leave much to guesswork.
I suggest arranging them into groups by function [sth like text effects, content elements, table tags, referred elements].


GMSuerte wrote:
obviously not a designer

Might want to try a color picker. Changes colors realtime.
GMSuerte's picture

I know. I'm thinking that

I know. I'm thinking that since the table of contents is too much, I'll just redo it without the index tag. Or, even easier, remove it. Either way I could have a smaller use of the index tag inside its example location, right where it should be. I guess it was a mistake to write the guide itself using BBCode.

I was considering arranging them by category, but for the table of contents it seemed more suitable to leave them all in alphabetical order since I used the index tag. I will reconsider it once I take care of the countless other details I have yet to address.

I did use a color picker. Shows you how awful I am at this.
Hum's picture

-Beeps you.-

-Beeps you.-
GMSuerte's picture

&hearts;

PeacockBird's picture

+

+
by Sheökî~
tigerart27's picture

Savin for future reference

Savin for future reference
Thais's picture

Thank you for doing this

Thank you for doing this blog, its very helpful!
Display pic by crabbycrown ♥
thelittleraven's picture

Definitely need to track

Definitely need to track this.
IvyChain's picture

Track.

Track.
Snowylittlekitty's picture

*pulls out a couch* *sits and

*pulls out a couch* *sits and reads*
GMSuerte's picture

Thanks y'all. And you're

Thanks y'all. And you're welcome. :3
Chromai's picture

O Trackin'.

O
Trackin'.
Reyy's picture

ty

ty
Ysrael's picture

tracking this because I keep

tracking this because I keep losing it;;