The Basics
InputIt 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
InputSometimes 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
InputThere 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]
ResultThere 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
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
InputThere 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.
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!
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
InputOther 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
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
- The ol tag is similar
- except for that the list
- is numbered sequentially.
Quoting
Input[quote=God]Let there be light.[/quote] [quote]I don't even know who said this.[/quote]Result
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.
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.
The Collapse tag works similar to spoiler, although it is meant more for content organization instead of hiding a small piece of text.
Links
InputTo 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
InputIf 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.
ResultIf 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.
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
InputIn 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
InputA 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.
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.
##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
InputCreate 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
InputThis 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]
ResultThis 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
InputCreates 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]
ResultCreates 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
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
Method 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.
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
| Name | Age |
|---|---|
| Bobby | 26 |
| Suzie | 19 |
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]
ResultYou 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!
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.
go have fun and see what you can create!