Ape Apps utilizes BBCode (Bulletin Board Code) as the markup language for posts, replies, and comments. The BBCode engine on this site is powerful and allows for a wide range of content formatting options. BBCode is created by placing your content between tags, which are denoted using bracket symbols. For example, typing [b]this[/b] will render this. Use this page as a reference to the usage and capabilities of the system.

The Basics

Input
It is simple to make text [b]Bold[/b], [i]Italic[/i], or [u]Underline[/u].  You can even [s]fix[/s] correct your mistakes!
Result
It is simple to make text Bold, Italic, or Underline. You can even fix correct your mistakes!

Colors

Input
Sometimes a [color=red]bit of color[/color] goes a long way.  You can [highlight=orange]make things stand out[/highlight], [font=Impact]change the font[/font], [blur=#303F9F]blur them out[/blur], or [glow=#64DD17]make them glow[/glow]!
Result
Sometimes a bit of color goes a long way. You can make things stand out, change the font, blur them out, or make them glow!

Comments and Tags

Input
There are ways to add text that is invisible in the post, but visible in the editor, for reference.  
                        
The [comment]comment tag adds a standard HTML comment[/comment] which shows up in the page's code but is not visible to the user.

The [tag="CustomTag"]'tag' tag creates an element with a tag which can be linked to with a url tag by appending #TagName to the end of the link[/tag]
ex: [url="coderef.php#CustomTag"]Link to Tag[/url]
Result
There are ways to add text that is invisible in the post, but visible in the editor, for reference.

The which shows up in the page's code but is not visible to the user.

The 'tag' tag creates an element with a tag which can be linked to with a url tag by appending #TagName to the end of the link
ex: Link to Tag

Size and Headings

Input
There are several ways to set the font size.  Heading tags are good for structured content headings.
[h1]Heading 1[/h1]
[h2]Heading 2[/h2]
[h3]Heading 3[/h3]
[h4]Heading 4[/h4]
[h5]Heading 5[/h5]
[h6]Heading 6[/h6]

The style of a heading tag is determined by the overall style of the webpage.  For more fine grained control, you can use the size tag to specify the exact font size in pixel units.

[size=36]This is easy to do![/size]
[size=8]Indeed it is![/size]
Result
There are several ways to set the font size. Heading tags are good for structured content headings.

Heading 1


Heading 2


Heading 3

Heading 4

Heading 5
Heading 6


The style of a heading tag is determined by the overall style of the webpage. For more fine grained control, you can use the size tag to specify the exact font size in pixel units.

This is easy to do!
Indeed it is!

Indention

Input
[tab=40]Normally, a paragraph of text will [b]not[/b] be indented (the way a book would be).  You can change that using the tab tag, specifying the intentation size in pixel units.[/tab]
Result
Normally, a paragraph of text will not be indented (the way a book would be). You can change that using the tab tag, specifying the intentation size in pixel units.

Effects

Input
Other random text effects are also available.  Make something [flash]flash or blink[/flash] if it is important.  There could be times when you require [sub]subscript[/sub] or [sup]superscript[/sup] text.  [stroke=blue]You can outline text[/stroke] using the stroke tag, or use [bigstroke=red]a big stroke[/bigstroke] to really drive the point home, although those work better on larger text sizes.  Similar to the color tag, [dropshadow=#4FC3F7]dropshadow adds color, but also a shadow[/dropshadow] to the text.  [opacity=20]You can barely read me[/opacity]!
Result
Other random text effects are also available. Make something flash or blink if it is important. There could be times when you require subscript or superscript text. You can outline text using the stroke tag, or use a big stroke to really drive the point home, although those work better on larger text sizes. Similar to the color tag, dropshadow adds color, but also a shadow to the text. You can barely read me!

Marquee

Input
[marquee]Make your own breaking news ticker with the marquee tag![/marquee]
Result
Make your own breaking news ticker with the marquee tag!

Bulleted List

Input
[list]
[*]Bulleted lists
[*]Might be used
[*]For helpful information
[/list]
Result
  • Bulleted lists
  • Might be used
  • For helpful information

Numbered List

Input
[ol]
[*]The ol tag is similar
[*]except for that the list
[*]is numbered sequentially.
[/ol]
Result
  1. The ol tag is similar
  2. except for that the list
  3. is numbered sequentially.

Quoting

Input
[quote=God]Let there be light.[/quote]
[quote]I don't even know who said this.[/quote]
Result
God said:Let there be light.

I don't even know who said this.

Left Alignment

Input
[left]You can align your paragraphs left...[/left]
Result
You can align your paragraphs left...

Center Alignment

Input
[center]... or you can align your paragraphs center...[/center]
Result
... or you can align your paragraphs center...

Right Alignment

Input
[right]... or you can align your paragraphs right![/right]
Result
... or you can align your paragraphs right!

Code Samples

Input
[code]A lot of code tags were used in the making of this page.  You can even demonstrate other [b]tags[/b] inside of this tag.[/code]

[noparse]You can also use the [b]noparse[/b] tag to specify an area where BBCode tags will not be parsed.[/noparse]

[c]The [c] tag does the same thing as [noparse][/c]
Result
A lot of code tags were used in the making of this page.  You can even demonstrate other [b]tags[/b] inside of this tag.

You can also use the [b]noparse[/b] tag to specify an area where BBCode tags will not be parsed.

The [c] tag does the same thing as [noparse]

Spoilers

Input
[spoiler]You can have a simple spoiler alert...[/spoiler]

[spoiler="Custom Heading"]...or you can even pick a custom heading.[/spoiler]
Result
Spoiler:You can have a simple spoiler alert...

Custom Heading:...or you can even pick a custom heading.

Collapse Section

Input
[collapse="Click Here to See More!"]The Collapse tag works similar to spoiler, although it is meant more for content organization instead of hiding a small piece of text.[/collapse]
Result
Click Here to See More!
The Collapse tag works similar to spoiler, although it is meant more for content organization instead of hiding a small piece of text.

Links

Input
To prevent spam, urls like this: https://www.ape-apps.com are not automatically made into links anyore.  You must place them manually inside of a [url]https://www.ape-apps.com[/url] tag.  You can also have links with [url=https://www.ape-apps.com]custom text[/url].
Result
To prevent spam, urls like this: https://www.ape-apps.com are not automatically made into links anyore. You must place them manually inside of a https://www.ape-apps.com tag. You can also have links with custom text.

Wiki Article Links

Input
If the site contains Wiki sections and articles, you can link to them with the article tag.
                        
To link to another article within the same wiki as the current article, you would simply do [article]Wiki Article Title[/article]

To link to an article in another Wiki, or to link to a wiki article from a non-article (like a forum post), you would do [article=wiki-title-or-id]Article Name[/article]

Wikis on this system use this BBCode rather than Wikimedia type markdown.
Result
If the site contains Wiki sections and articles, you can link to them with the article tag.

To link to another article within the same wiki as the current article, you would simply do Wiki Article Title

To link to an article in another Wiki, or to link to a wiki article from a non-article (like a forum post), you would do Article Name

Wikis on this system use this BBCode rather than Wikimedia type markdown.

Page Subject

Input
In a post or wiki article, the string: ##subject## will be replaced with the subject/title of the current thread or article.  This has no effect on other page types.
Result
In a post or wiki article, the string: ##subject## will be replaced with the subject/title of the current thread or article. This has no effect on other page types.

Info Box

Input
A post or article can have an info box.
[infobox]
[meme]2[/meme]
This is basically a shortcut for a right-floating container that will automatically append the page title centered at the top.  Any available bbcode tag can be placed within the infobox.
[infoboxheader]A Section[/infoboxheader]
Within an infobox, you can define a section header to break up information sections.
[infoboxheader]Some Stats[/infoboxheader]
[infostat="Stat Name"]Stat Data[/infostat]
[infostat="Another Stat"]More Data[/infostat]
[/infobox]
Result
A post or article can have an info box.
##subject##

This is basically a shortcut for a right-floating container that will automatically append the page title centered at the top. Any available bbcode tag can be placed within the infobox.
A Section
Within an infobox, you can define a section header to break up information sections.
Some Stats
Stat Name
Stat Data
Another Stat
More Data

Table of Contents

Input
Create an auto-generated Table of Contents for the post or article.  [toc][/toc]  Must include the ending tag.
Result
Create an auto-generated Table of Contents for the post or article.
Must include the ending tag.

Wiki Template

Input
This tag only works in wiki sections and articles.  Inserts the content of another wiki article as a template, with variable support.  Within a template, variables are defined with the $ symbol, eg $varname

[template="article name"]{varname:replacement content for variable goes here.}[/template]
Result
This tag only works in wiki sections and articles. Inserts the content of another wiki article as a template, with variable support. Within a template, variables are defined with the $ symbol, eg $varname

Wiki Index

Input
Creates an index of all Wiki articles, with an optional filter.  The filter can be blank to show all articles, otherwise only articles with the filter within the title will be displayed.  This tag only works in wiki sections.
                        
[wikiindex]filter[/wifiindex]
Result
Creates an index of all Wiki articles, with an optional filter. The filter can be blank to show all articles, otherwise only articles with the filter within the title will be displayed. This tag only works in wiki sections.

Images

Input
[img]https://www.ape-apps.com/ape_logo.png[/img]
Result

Floating Element

Input
[float=right][img]https://market.ape-apps.com/app_icons/1496261737409.png[/img][/float]Sometimes you need to align an element and wrap text around it. Use the Float tag. Acceptable parameter values are left and right. Many elements can be placed within the float tag.
Result
Sometimes you need to align an element and wrap text around it. Use the Float tag. Acceptable parameter values are left and right. Many elements can be placed within the float tag.

Columns

Input
[b]Method 1[/b]
[columns=2]There are a couple of different ways to render columns.  Using this first method, you specify the number of columns you want, and the browser automatically lays out your text to render evenly (or close) between the columns.[/columns]

[b]Method 2[/b]
[column]
[col]The second method is more like specifiying a standard table.[/col]
[col]You control what text goes into what column, and you add a col tag for each column you want.[/col]
[col]Column sizing and spacing is left up for the browser to decide.[/col]
[/column]
Result
Method 1
There are a couple of different ways to render columns. Using this first method, you specify the number of columns you want, and the browser automatically lays out your text to render evenly (or close) between the columns.

Method 2
The second method is more like specifiying a standard table. You control what text goes into what column, and you add a col tag for each column you want. Column sizing and spacing is left up for the browser to decide.

Data Tables

Input
[table]
[tr][th]Name[/th][th]Age[/th][/tr]
[tr][td]Bobby[/td][td]26[/td][/tr]
[tr][td]Suzie[/td][td]19[/td][/tr]
[/table]
Result

NameAge
Bobby26
Suzie19

Horizontal Lines

Input
[hr][/hr]
[hr=blue][/hr]
Result



Sized Container

Input
[container=200]When you want to contain a block of text to a specific width, specified in pixels.  The 'width' tag does the exact same thing, but is included for compatibility with other BBCode implementations..[/container]
Result
When you want to contain a block of text to a specific width, specified in pixels. The 'width' tag does the exact same thing, but is included for compatibility with other BBCode implementations..

Boxes

Input
[box]Put text into a box to draw attention to it.[/box]
[box=#999999]You can also set the box background color.[/box]
[box2 color="#90CAF9" border="4px dashed #f44336"]The [b]box2[/b] tag is an alternate brought over from the old [b]RPF[/b] site and allows you to specify a box color and custom border CSS (the border attribute can also be just a hex color).[/box2]
[gradbox d="to right" c="rgba(255,223,223,0.8), rgba(160,49,86,0.8)" b="transparent"]Another transfer from the old [b]RPF[/b] site, the [b]gradbox[/b] is a bit more complicated, but allows a gradient background.  Parameters are gradient [b]d[/b]irection, gradient [b]c[/b]olors, and [b]b[/b]order style.[/gradbox]
[gradbox d="to top" c="orange, yellow, green" b="1px solid black"][color=black]Here is another [b]gradbox[/b] example for clarity.[/color][/gradbox]
[imgbox=https://backgroundbag.com/backgrounds/bluetile_51.jpg]The [b]imgbox[/b] tag creates a box with a covering background image from the specified URL.[/imgbox]
[imgbox=https://backgroundbag.com/backgrounds/norcal_beach_31.jpg][bigstroke=#000000][size=24][font="Arial Black"]Some interesting effects can be achieved using the [b]imgbox[/b] tag in conjunction with the [b]glassbox[/b] tag.[/font][/size][/bigstroke]
[glassbox]A glassbox is a special type of box with a blurred glass effect for the background, although it needs to be inside of an [b]imgbox[/b] to have a noticeable effect.[/glassbox][/imgbox]
Result
Put text into a box to draw attention to it.
You can also set the box background color.
The box2 tag is an alternate brought over from the old RPF site and allows you to specify a box color and custom border CSS (the border attribute can also be just a hex color).
Another transfer from the old RPF site, the gradbox is a bit more complicated, but allows a gradient background. Parameters are gradient direction, gradient colors, and border style.
Here is another gradbox example for clarity.
The imgbox tag creates a box with a covering background image from the specified URL.
Some interesting effects can be achieved using the imgbox tag in conjunction with the glassbox tag.
A glassbox is a special type of box with a blurred glass effect for the background, although it needs to be inside of an imgbox to have a noticeable effect.

Popup Window

Input
[popup="Check It Out"]Look at this fun fancy tag![/popup]
Result

YouTube Video

Input
[youtube]EUJ27HD_F7A[/youtube]
Result

LBRY/Odysee Video

Input
[lbry]https://lbry.tv/$/embed/level-up/3bc65ecedb9b661908262fbe19ded9f87a9b926b?r=9kgekmwivYANNsfnjjLdi2mFg2tHzKeB[/lbry]
Result

Torrent Streaming

Input
[torrent]https://www.ape-apps.com/uploads/torrents/23382.torrent[/torrent]
Result

MP3 Streaming

Input
[mp3]https://www.ape-apps.com/download.php?f=22145[/mp3]
Result

Ape Web Apps embed

Input
[webapp]censor-bleep[/webapp]
                        
You can also pass an external parameter to the web app, like so:
[webapp="a great parameter"]web-app-core[/webapp]

Finally, the similar [b]nfwebapp[/b] tag does the same thing but without the title frame:
[nfwebapp]air-horn[/nfwebapp]
Result

You can also pass an external parameter to the web app, like so:

Finally, the similar nfwebapp tag does the same thing but without the title frame:

Mad About Memes embed

Input
[meme]2[/meme]
Result

Facebook Post embed

Input
[facebook]https://www.facebook.com/apeapps/posts/3086840188056175[/facebook]
Result

Twitter tweet embed

Input
[tweet=right]https://twitter.com/apeapps/status/1178780844611256326[/tweet]
[tweet]https://twitter.com/apeapps/status/1178780844611256326[/tweet]
Result







Ape Chat Window

Input
[chat]off-topic[/chat]
Result

My Colony Card

Input
[colony]8Ksj9SAy[/colony]
Result

Colony Wars Combat Card

Input
[colonywars]bastecklein[/colonywars]
Result

Blog More Tag

Input
[more][/more]
Result

Additional Samples

Input
[float=left][container=180][box=#f44336][b][color=white]Specify a box size by placing it [flash]inside[/flash] of a container![/color][/b][/box][/container][/float]The power of the system comes in when you start mixing and matching tags together.

Since you can place almost any combination of tags inside of each other, you can create many interesting layouts in your comments or posts.  As long as all of your opening tags properly match to a closing tags, there are a ton of possibilities for making your posted content look amazing!  Just play around with the system and see what you can come up with.  Odds are good that if there is something you need to create, you will have the ability to create it.

[box=#333333][color=#ffcc00][b][marquee][flash]BREAKING NEWS[/flash]: There are a ton of capabilities with the BBCode system![/marquee][/b][/color][/box]

[center][size=36][b][bigstroke=#000000][color=#ffffff][font=Impact]go have fun and see what you can create![/font][/color][/bigstroke][/b][/size][/center]
Result
Specify a box size by placing it inside of a container!
The power of the system comes in when you start mixing and matching tags together.

Since you can place almost any combination of tags inside of each other, you can create many interesting layouts in your comments or posts. As long as all of your opening tags properly match to a closing tags, there are a ton of possibilities for making your posted content look amazing! Just play around with the system and see what you can come up with. Odds are good that if there is something you need to create, you will have the ability to create it.

BREAKING NEWS: There are a ton of capabilities with the BBCode system!

go have fun and see what you can create!