Tutorial RpNation - BBcode Guide

RpNation - BBCode Guide

This guide is here to serve the purpose of explaining how to use the many BBCode available to the users of RpNation which are not available in the post editors tools. This BBcode will need to be manually typed in, and will not show a final result in the editor.

• Headers & Sub-Headers
  
• Dividers
  
• Inline Spoilers
  
• Highlights
  
• Justified Text
  
• Image Float
  
• Blockquotes
  
• Fieldsets
  
• Sides
  
• Portable Document Format (PDF)
  
• Tabs
  
• Rows & Columns
  
• Tables
  
• Print
  
• Text Message
  
• Blocks

• Progress Bar
  
• Sticky Note
  
• Mail
  
• Center Block
  
• Background
  
• Border
  
• Newspaper
  
• Height Restrict
  
• Checks
  
• Accordians
  
• Google Font Library
• Font Awesome Icons
• Challonge
  
• Sub Script
  
• Super Script
  
• Scroll Box
  
• Div Box
• HTML Comment

 

Headers & Sub-Headers

Purpose: The Header is designed to make a quick and easy way for members to place a header on their post without having to manually center and resize text. It also includes a bottom border which is impossible without it.

Important Note:



The Sub-Headers are made with sh tags.



Important Note:



Both types of heading will take the option

underline

.

Code:

Code:

 [h=OPTION]This is a Header[/h]
[sh=OPTION]RoleplayZone - BBCode Guide[/sh] 

Example:


This is a Header

This is a Sub-Header

 

Dividers

Purpose: The Divider is designed to create breaks neatly and efficiently in a post, or to separate sections of a post.

Important Note:



The Divider can be empty to create a simple horizontal rule.




Important Note:

The options are case sensitive. Make sure to use all lower case and dashes for spaces. (The options being: thick, dotted, dotted-thick)

Code:

Code:

[divide]More Below[/divide]
[divide=thick]More Below[/divide]
[divide=dotted]More Below[/divide]
[divide=dotted-thick]More Below[/divide]

Example:





More Below

More Below

More Below

More Below

 

Inline Spoilers

Purpose: The Inline Spoiler is designed to be a code used for small amount of spoilers, where having a spoiler tag would be unnecessary. (Such as saying who dies in a new episode of a show)


Code:

Code:

 [inlineSpoiler]This is a Secret[/inlineSpoiler] 

Example:


This is a Secret

 

Highlights

Purpose: The Highlight is used to quickly emphasize a section of text by placing a color background on it.


Code:

Code:

 [Highlight]This is a Secret[/Highlight] 

Example:


Everybody Look At Me!

 

Justified Text

Purpose: The Justify BBCode is used to justify text (This makes the text fix the width of it's container).


Code:

Code:

 [Justify]Example[/Justify] 

Example:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt quam sapien, in malesuada turpis vestibulum a. Duis consectetur eros bibendum massa placerat, non hendrerit massa molestie. Pellentesque vitae condimentum erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus egestas, nibh id ultricies convallis, ipsum arcu rhoncus eros, et aliquam libero lacus vel velit. Praesent quis turpis sed tortor fringilla tincidunt ac accumsan lectus.


Sed euismod imperdiet quam. Sed sit amet cursus metus. Duis eu ultricies elit. Suspendisse potenti. Curabitur quis posuere elit, et sagittis nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed feugiat ullamcorper dui, sed mollis augue dapibus ac. Suspendisse tincidunt sagittis mollis. Fusce vestibulum nibh metus, a consectetur nisl consectetur a. Quisque ullamcorper elit et accumsan suscipit.

 

Image Float

Purpose: The Image Float is used to float an image to either the left or right of a post. Text and other content will wrap around the image. While floated an image will take up a maximum of half a posts width.

Important Note:



The options are case sensitive. Make sure to use all lower case and dashes for spaces. (The options being: thick, dotted, dotted-thick)


Code:

Code:

 [imageFloat=left][img][/img][/imageFloat]
[imageFloat=right][img][/img][/imageFloat] 

Example:




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt quam sapien, in malesuada turpis vestibulum a. Duis consectetur eros bibendum massa placerat, non hendrerit massa molestie. Pellentesque vitae condimentum erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus egestas, nibh id ultricies convallis, ipsum arcu rhoncus eros, et aliquam libero lacus vel velit. Praesent quis turpis sed tortor fringilla tincidunt ac accumsan lectus.




Sed euismod imperdiet quam. Sed sit amet cursus metus. Duis eu ultricies elit. Suspendisse potenti. Curabitur quis posuere elit, et sagittis nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed feugiat ullamcorper dui, sed mollis augue dapibus ac. Suspendisse tincidunt sagittis mollis. Fusce vestibulum nibh metus, a consectetur nisl consectetur a. Quisque ullamcorper elit et accumsan suscipit.


Sed euismod imperdiet quam. Sed sit amet cursus metus. Duis eu ultricies elit. Suspendisse potenti. Curabitur quis posuere elit, et sagittis nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed feugiat ullamcorper dui, sed mollis augue dapibus ac. Suspendisse tincidunt sagittis mollis. Fusce vestibulum nibh metus, a consectetur nisl consectetur a. Quisque ullamcorper elit et accumsan suscipit.

 

Blockquotes

Purpose: The Blockquote is designed to add a simple quote to a post from a non-user (Such as a quote from a famous poet or from a film).

Important Note:



The option determines who said the Quote, and will place it after a tilde(~) to the right of the quote.


Code:

Code:

 [blockquote=Charia]It's called a Rockgagong! It probably takes rocks & ga-gongs people with them![/blockquote] 

Example:

It's called a Rockgagong! It probably takes rocks & ga-gongs people with them! Charia

 

Fieldsets

Purpose: The Fieldset is used to make a block of content stand out to readers and draw their attention towards something of importance.

Important Note:

The option determines the title of the Fieldset.

Code:

Code:

 [Fieldset=Lorem Ipsum]Content[/Fieldset] 

Example:

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor volutpat egestas. Vivamus in fermentum enim. Fusce in fringilla felis, sit amet porta tellus. Cras cursus ligula ac eros aliquam, ut vulputate erat accumsan. Sed fermentum vitae augue nec semper

 

Sides

Purpose: The Side is a very small box positioned to the left of a post, it's purpose is to hold character statistics or other vitals in a roleplay post for easy reference.

Important Note:



The option determines the float of the Side. (left or right)


Code:

Code:

[side=right]Strength: 19
Dexterity: 12
Constitution: 14
Intelligence: 17
Wisdom: 8
Charisma: 11[/side] 

Example:

Strength: 19


Dexterity: 12


Constitution: 14


Intelligence: 17


Wisdom: 8


Charisma: 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor volutpat egestas. Vivamus in fermentum enim. Fusce in fringilla felis, sit amet porta tellus. Cras cursus ligula ac eros aliquam, ut vulputate erat accumsan. Sed fermentum vitae augue nec semper.


Sed euismod imperdiet quam. Sed sit amet cursus metus. Duis eu ultricies elit. Suspendisse potenti. Curabitur quis posuere elit, et sagittis nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed feugiat ullamcorper dui, sed mollis augue dapibus ac. Suspendisse tincidunt sagittis mollis. Fusce vestibulum nibh metus, a consectetur nisl consectetur a. Quisque ullamcorper elit et accumsan suscipit.


Consectetur adipiscing elit. Donec tincidunt quam sapien, in malesuada turpis vestibulum a. Duis consectetur eros bibendum massa placerat, non hendrerit massa molestie. Pellentesque vitae condimentum erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus egestas, nibh id ultricies convallis, ipsum arcu rhoncus eros, et aliquam libero lacus vel velit. Praesent quis turpis sed tortor fringilla tincidunt ac accumsan lectus.

 

Portable Document Format (PDF)

Purpose: The PDF BBCode is used to attach a .pdf from google docs to the site. This can ideally be used to attach character sheets for game systems to a post for easy reference.

Important Note:



This will only work if anyone can view your .pdf. That option is controlled in your google drive.


Code:

Code:

 [gdoc]0B-8p7J_eRZNScUVXUzZNRFBnVEk[/gdoc] 

Example:




In the example of the above file, the url is https://drive.google.com/file/d/0B-8p7J_eRZNScUVXUzZNRFBnVEk/edit?usp=sharing


You will need whats in between /d/ and /edit


So 0B-8p7J_eRZNScUVXUzZNRFBnVEk inbetween the tags, it would look like.

 

Tabs

Purpose: The Tabs BBCode is used separate out multiple blocks of content into tabs that allow users to cycle through them.

Important Note:



The option determines the title of the Tab for

[tab]

.


Code:

Code:

[Tabs]

[Tab=Tab A]
Content For Tab A.
[/Tab]

[Tab=Tab B]
Content For Tab B.
[/Tab]

[/Tabs]

Example:

• Tab A
• Tab B

• 
  
  
  Content For Tab A.
  
  
  
• 
  
  
  Content For Tab B.
  
  
  

 

Rows & Columns

Purpose: The Rows & Column BBCode is used to create columns of content. A Post can support up to eight columns - referred to as spans.

Important Note:



A

Row is needed around columns or else the post is likely to start glitching or the formatting will be broken.



Important Note:

The spans in a row are suppose to

total 8

. Spans are declared in the options of a Column as such:

span#

Code:

Code:

[Row]

[Column=span1]
Example Text Here.
[/Column]

[Column=span2]
Example Text Here.
[/Column]

[Column=span3]
Example Text Here.
[/Column]

[Column=span2]
Example Text Here.
[/Column]

[/Row]

Example:

Sed nec augue eget ipsum venenatis dapibus in vel leo.

Nullam eu pellentesque elit, sed convallis tortor. Aliquam congue faucibus commodo. Nullam euismod arcu id nibh vehicula, quis molestie enim euismod.

Sed nec commodo nibh. Nam elementum semper enim, vel vulputate tellus tristique quis. Nulla sit amet diam tellus. Suspendisse a egestas ante. Sed nec augue eget ipsum venenatis dapibus in vel leo. Sed vel ligula a ante tincidunt rutrum. Vestibulum tristique vel mauris et mollis.

Nullam eu pellentesque elit, sed convallis tortor. Aliquam congue faucibus commodo. Nullam euismod arcu id nibh vehicula, quis molestie enim euismod.

 

Tables

Purpose: The Table is made to display and format data in square cells.

Important Note:



The code table declares the contents to be inside of a table. The table accepts the options of 'none', 'dotted', and 'dark', which will change the borders of the table.



Important Note:

The code tr defines a table row, the amount of cells inside of all table rows needs to be equal after accounting for column spans. The tr accepts the option of 'grey' or 'gray' which will give the entire row a darker background. This is used to highlight a row.



Important Note:

The code th, td, and tf declare a table cell that is defined as a table header, table data and table footer, respectively. All of these codes accept the option of a number (such as td=2). This declares the column span, which will make the cell take up that man columns.

Code:

Code:

[table]

[tr]
[th]This[/th]
[th]is[/th]
[th]a[/th]
[th]Table[/th]
[/tr]

[tr]
[td]Data A[/td]
[td]Data B[/td]
[td]Data C[/td]
[td]Data D[/td]
[/tr]

[tr]
[td]Data Q[/td]
[td=2]It can span multiple columns[/td]
[td]Data F[/td]
[/tr]

[tr]
[tf]Footer A[/tf]
[tf]Footer G[/tf]
[tf]Footer TY[/tf]
[tf]Footer Final[/tf]
[/tr]

[/table]

Example:

This	is	a	Table
Data A	Data B	Data C	Data D
Data Q	It can span multiple columns		Data F
Footer A	Footer G	Footer TY	Footer Final

 

Print

Purpose: The Print tag is used to simulate a physical note written on paper.

Important Note:



The option is the type of paper. (line, graph, parchment)

Code:

Code:

[Print=Paper Type]
This is the information within the message.
[/Print]

Example:

This is the information within the message.

This is the information within the message.

This is the information within the message.

This is the information within the message.

 

Text Message

Purpose: The textmessage tag is used to simulate a text conversation on the forums.

Important Note:



The option is the name of who you are texting towards.




Important Note:



Use the message bbcode within a textmessage tag to declare a individual message use the options 'left' or 'right' to declare what side of the conversation the message belong on (Right being yourself). As well you can use 'me' (right) and 'them' (left) for simplicity.

Code:

Code:

[textmessage=Recipient]
[message=them]Hi [/message]
[message=me]Who is this?[/message]
[message=them]Lol, It's me silly.[/message]
[/textmessage]

Example:

Recipient

them

Hi

me

Who is this?

them

Lol, It's me silly.

 

Blocks

Purpose: The block tag is used to define a section of content that is related.

Important Note:



The option is the type of block you are defining. The options are: dice, dice10, announcement, important, storyteller, warning, information, question, encounter, setting, character, and treasure.



Important Note:



Headers have responsive colour inside of blocks.

Code:

Code:

[block=OPTION]
Vestibulum vestibulum, mi sit amet vulputate scelerisque, augue tellus mattis enim, non vestibulum lorem lectus id libero. In maximus maximus lacus non efficitur.
[/block]

Example:

Hello Vestibulum vestibulum, mi sit amet vulputate scelerisque, augue tellus mattis enim, non vestibulum lorem lectus id libero. In maximus maximus lacus non efficitur.

Vestibulum vestibulum, mi sit amet vulputate scelerisque, augue tellus mattis enim, non vestibulum lorem lectus id libero. In maximus maximus lacus non efficitur.

 

Progress Bar

Purpose: The progress tag is used to create a visual meter to show progress on some task.

Important Note:



The option is the percent of progress held, the text inside is the task the progress is measuring.



Important Note:



The replace progress with 'thinprogress' for a thinner bar.

Code:

Code:

[progress=65]Character Completion[/progress]

[thinprogress=65]Character Completion[/thinprogress]

Example:

Character Completion

Character Completion

 

Sticky Notes

Purpose: The note tag is used to create a visual for a note found or left by a character.

Important Note:



The tag does not require any options.

Code:

Code:

[note]
Vestibulum vestibulum, mi sit amet vulputate scelerisque, augue tellus mattis enim, non vestibulum lorem lectus id libero. In maximus maximus lacus non efficitur.
[/note]

Example:

Vestibulum vestibulum, mi sit amet vulputate scelerisque, augue tellus mattis enim, non vestibulum lorem lectus id libero. In maximus maximus lacus non efficitur.

 

Mail

Purpose: The mail tag is used to create a visual for receiving or sending emails from or to characters in a roleplay.

Important Note:



By Default the mail BBcode will create a send new email box. It accepts the options: send and receive




Important Note:

You must use the person and the subject bbcode inside of a mail tag in order to add a recipient/sender or a subject

Code:

Code:

[mail=send][person]Miz[/person]
[subject]Whats New Man?[/subject]
Hey Miz, Pineapple here looking to find out why you're so totally (:3) all the time? Anyway, email me back. later!

~ Pineapple (^.^)
[/mail]

[mail=receive][person]Miz[/person]
[subject]Re: Whats New Man?[/subject]
I'd tell you, but I don't even know. I guess (:3) just runs in my blood.

Catch you on the flip side,
~ Lil' Miz
[/mail]

Example:

Send New Email

New Email Received

Miz

Whats New Man?

Hey Miz, Pineapple here looking to find out why you're so totally (:3) all the time? Anyway, email me back. later!


~ Pineapple (^.^)

Send New Email

New Email Received

Miz

Re: Whats New Man?

I'd tell you, but I don't even know. I guess (:3) just runs in my blood.


Catch you on the flip side,


~ Lil' Miz

 

Center Block

Purpose: The centerblock tag is used to center a section of content while restricting the width of it.

Important Note:

The inputted option is the percent width of the block in it's container (Normally the post width)

Code:

Code:

[centerblock=OPTION]My Content[/centerblock]

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit, in pretium arcu hendrerit in. Ut rhoncus ipsum metus, auctor pulvinar erat hendrerit ut. Aliquam vulputate, orci in blandit euismod, ex mi scelerisque ligula, nec mollis ligula enim vel quam. Quisque mollis est ac nibh consectetur, sit amet hendrerit purus porttitor. Vestibulum bibendum libero at est ullamcorper cursus. Praesent maximus, magna et tincidunt mollis, sem arcu fermentum nulla, sit amet ultrices massa libero et mauris. Fusce porttitor fermentum lectus, et dapibus est aliquet at. Duis nec molestie ex. Interdum et malesuada fames ac ante ipsum primis in faucibus.

 

Background

Purpose: The background tag will let you add a color backgorund to a section of content.

Important Note:

The inputted option is the

named web color

or hex code of the color you want.

Code:

Code:

[bg=COLOR]My Content[/bg]

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit, in pretium arcu hendrerit in. Ut rhoncus ipsum metus, auctor pulvinar erat hendrerit ut. Aliquam vulputate, orci in blandit euismod, ex mi scelerisque ligula, nec mollis ligula enim vel quam. Quisque mollis est ac nibh consectetur, sit amet hendrerit purus porttitor. Vestibulum bibendum libero at est ullamcorper cursus. Praesent maximus, magna et tincidunt mollis, sem arcu fermentum nulla, sit amet ultrices massa libero et mauris. Fusce porttitor fermentum lectus, et dapibus est aliquet at. Duis nec molestie ex. Interdum et malesuada fames ac ante ipsum primis in faucibus.

 

Border

Purpose: The border tag will let you add a border to a section of content.

Important Note:

The inputted option requires 3 sections to it. the width in pixels (e.g. 5px), the

style of border

and a

named web color

or hex code of the color you want.

Code:

Code:

[border=WIDTH STYLE COLOR]My Content[/border]

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet nisi dolor. Vivamus hendrerit ut risus semper maximus. Pellentesque lobortis consectetur velit, in pretium arcu hendrerit in. Ut rhoncus ipsum metus, auctor pulvinar erat hendrerit ut. Aliquam vulputate, orci in blandit euismod, ex mi scelerisque ligula, nec mollis ligula enim vel quam. Quisque mollis est ac nibh consectetur, sit amet hendrerit purus porttitor. Vestibulum bibendum libero at est ullamcorper cursus. Praesent maximus, magna et tincidunt mollis, sem arcu fermentum nulla, sit amet ultrices massa libero et mauris. Fusce porttitor fermentum lectus, et dapibus est aliquet at. Duis nec molestie ex. Interdum et malesuada fames ac ante ipsum primis in faucibus.

 

Newspaper

Purpose: The newspaper tag will let you place a section of content in a 3 columned news paper.

Important Note:

The images will appear and scale smartly in the newspaper based on where in the text flow you place them.

Code:

Code:

[newspaper]My Content[/newspaper]

Example:

S-Senpai Notice Me!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum orci laoreet, scelerisque enim quis, commodo est. Vestibulum et feugiat odio. Curabitur viverra nisi quis nibh aliquam, non dictum nisi placerat. Integer eu elit sed nisl dictum elementum sit amet nec risus. Fusce erat sem, varius eu molestie id, maximus non nunc. Pellentesque lorem metus, sodales eget dui at, vestibulum tempus dolor. Sed id elit hendrerit, pellentesque erat nec, tincidunt felis. In fringilla est in quam finibus, a porttitor elit feugiat. Etiam sit amet tortor semper, congue magna in, mollis ligula. Nulla placerat imperdiet nisi ut sollicitudin. In vitae ligula justo. Vestibulum id enim et risus ultricies sagittis. Proin vitae auctor purus. Cras sagittis aliquet est, in iaculis augue venenatis sit amet.

Curabitur congue nisl vel semper rhoncus. Nulla egestas dapibus mi, ac maximus eros congue sed. Praesent convallis consectetur sapien. Donec ac vehicula odio. Maecenas aliquet sapien sem. Curabitur consequat vel turpis et eleifend. Etiam volutpat, nunc vel dignissim congue, dolor justo egestas magna, vitae maximus enim mauris vitae diam. Ut nec est eros. Quisque eu metus at erat sodales sodales. Sed pretium vel eros congue porttitor. Nulla congue neque nec eros gravida fringilla.

Sed sit amet metus nec dolor feugiat varius ac quis metus. Mauris convallis felis nec lacinia tincidunt. Nam pharetra placerat eleifend. Aenean id ligula sit amet ipsum imperdiet lacinia nec non orci. Cras fringilla nec nibh nec viverra. Quisque pretium semper eleifend. Proin sed consequat libero.

Vivamus sit amet pretium urna. Duis imperdiet mauris viverra risus varius, at bibendum ligula tempor. Pellentesque nec urna condimentum, maximus magna eget, molestie mi. Ut viverra, ante sed pellentesque ultrices, lectus dui fringilla felis, ac euismod turpis nunc quis mauris. Curabitur rhoncus bibendum lacinia. Sed fringilla velit et lectus ultrices interdum. In lectus nisl, faucibus non ipsum quis, rutrum vestibulum mauris. Aenean semper erat in quam venenatis, non aliquam turpis dapibus. Aliquam rhoncus placerat diam, eget convallis nisl dignissim nec. Nulla commodo suscipit bibendum. Maecenas suscipit venenatis lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In iaculis et ante nec mattis. Vestibulum gravida aliquet lorem, id ultricies metus.

Shark Seeking Senpai
Nullam interdum gravida ornare. Suspendisse elit odio, blandit quis velit eget, congue aliquam arcu. Sed placerat turpis ut quam fringilla vulputate. Aenean eros dolor, convallis sed risus id, suscipit imperdiet purus. Sed quis ex et turpis euismod fringilla. In sed mauris quis dolor hendrerit gravida dignissim nec augue. Vestibulum tempus sagittis vulputate. Nullam lacinia viverra sem nec sodales. Integer eleifend, justo ac porta facilisis, nibh lectus suscipit nulla, id consectetur libero lorem ac nisl. Integer ut nisi non massa vehicula maximus lobortis ut enim. Nunc id consequat diam, sit amet eleifend est. Nam sodales quam neque, nec congue lacus malesuada vel. Nulla facilisi. Proin eros diam, malesuada non vehicula ut, malesuada rhoncus enim.

 

Height Restrict

Purpose: The heightrestrict tag is used force images that are especially tall to fit within a specific height.

Important Note:



The option is the height in pixels you want the image to be scaled down to.

Code:

Code:

[HEIGHTRESTRICT=OPTION][img=http://fc07.deviantart.net/fs70/f/2014/225/c/4/shark_chan_by_sharkfreckles-d7v14za.png] [/HEIGHTRESTRICT]

Example: