Tutorial RpNation - BBcode Guide

RpNation · Jan 20, 2015

Check

Purpose: The check tag is used to create a list using special icons.

The options are: check, cross, dot.

Examples

I have to do this at some point.

I finished this at some point.

I failed this at some point.

Code:

[CHECK=dot]I have to do this at some point.[/CHECK]
[CHECK=check]I finished this at some point.[/CHECK]
[CHECK=cross]I failed this at some point.[/CHECK]

RpNation · Jun 22, 2015

Accordions

Purpose: The accordion bbcode is designed to give users a sleek alternative to the popular Tabs bbcode and another option to organize their post contents in a friendly manner that also works with all of our other bbcodes.

Testing 1: Info
Testing 2: Testing
Testing 3: Stuff

The example above is accomplished with the following code:

Code:

[accordion]
{slide=Testing 1}Info{/slide}
{slide=Testing 2}Testing{/slide}
{slide=Testing 3}Stuff{/slide}
[/accordion]

You can add different codes together with |

number%: Set the width of the accordion box
fleft: block will float left
fright: block will float right
bleft: align the block to the left
bcenter: align the block to the center
bright: align the block to the right

left: title of the slide will be align to the left
center: title of the slide will be align to the center This one is enabled by default for slide titles.
right: title of the slide will be align to the right
open: the slide will be opened by default

You are welcomed to add as many slides as you want and change their name/contents. However the important thing to note about this addon is the ability to alter their size and the way some of their aspects work.

Another important thing to note is that the above example is set to 100 percent width. To alter the size you have to decrease it.

For example:

Testing 1: Info
Testing 2: Testing
Testing 3: Stuff

This can be accomplished by

Testing 1: Info
Testing 2: Testing
Testing 3: Stuff

Code:

[accordion=35%]
{slide=Testing 1}Info{/slide}
{slide=Testing 2}Testing{/slide}
{slide=Testing 3}Stuff{/slide}
[/accordion]

You'll notice that I added the 35% tag code to the accordion tag instead of the slides.

You can also do things like move it to the right/left or the center. Here is an example of it being centered.

Testing 1: Info
Testing 2: Testing
Testing 3: Stuff

The code for that as an example is as follows:

Testing 1: Info
Testing 2: Testing
Testing 3: Stuff

Code:

[accordion=35%|bcenter]
{slide=Testing 1}Info{/slide}
{slide=Testing 2}Testing{/slide}
{slide=Testing 3}Stuff{/slide}
[/accordion]

RpNation · Aug 1, 2015

Google Font Library

Purpose: Instead of being restricted to the basic web fonts available in the rich text editor, RP Nation now offers Google Font compatibility. Any Google Font can now be used in a post.

Important Note:

A list of all Google Fonts is available here

. Fonts not on this list will not work. Fonts will only activate on page load – the rich text editor and page preview page will not display the Google Font, however as long as you typed the code correctly the font will display in the “live” post.

Code:

Code:

[font=Indie Flower]The quick brown dog jumped over the lazy fox.[/font]
[font=Lobster]The quick brown dog jumped over the lazy fox.[/font]
[font=Source Code Pro]The quick brown dog jumped over the lazy fox.[/font]

Example:

The quick brown dog jumped over the lazy fox.

The quick brown dog jumped over the lazy fox.

The quick brown dog jumped over the lazy fox.

RpNation · Mar 6, 2017

Font Awesome Icons

Purpose: Inserting Font Awesome Icons into posts.

Important Note:

A list of all font awesome icons are located here: Font Awesome Icons

RPNation supports Pro level icons. This means you can use light, solid, regular and brand icons. To use them, put in fal, fas, far, and fab respectively. On the icon list page, you can also find the text needed, which is displayed at the top of the page.

Code:

Code:

[fa]far fa-address-book[/fa]

Example:

Extras

FA Icons are completely alterable in the editor, for example you can color them and make them larger.

Effects

You can append the following options to the bbcode to get greater effects.

Sizes:
fa-2x (you can use between 2-5)

Code:

[fa]far fa-address-book fa-5x[/fa]

Animation:

fa-spin, fa-pulse

Code:

[fa]far fa-address-book fa-spin[/fa]

Effects should stack like so:

Code:

[COLOR=#0000ff][fa]far fa-address-book fa-spin fa-5x[/fa][/COLOR]

RpNation · Mar 6, 2017

Challonge
Purpose: Inserting Challonge Brackets into Posts

Important Note:

Challonge might insert an ad into your post just like YouTube Videos if you don't have ad blocker installed. These ads from third party embeds are not served by RpNation.com. If you see an inappropriate ad, please report it.

Example:

To use:

Simply head on over to the editor and click on the media button and insert your URL.

Or simply paste the url into the post and when you submit your post it will auto format it for you, same like YouTube Videos, media button usually not required.

Example:

Our url for the above demo is as follows

Code:

https://challonge.com/rpnbracketdemo

RpNation · Mar 23, 2017

Sub Script

Purpose: Small text below the normal line of text

Code:

Code:

[sub]This is subscript text.[/sub] This is normal text.

Example:

_{This is subscript text.} This is normal text.

RpNation · Mar 23, 2017

Super Script

Purpose: Small text above the normal line of text

Code:

Code:

[sup]This is supscript text.[/sup] This is normal text.

Example:

^{This is supscript text.} This is normal text.

RpNation · Mar 23, 2017

Scroll Box

Purpose: Allow users to create scroll boxes for their text

Important Note:

You can control the height in px. This BBCode can be affected by others like column to control the width. Combine with the Div Box code for spectacular effects.

Code:

Code:

[scroll=75px]
text
[/scroll]

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget dictum erat. Nam dictum ex est, quis ullamcorper dolor ultricies eu. In tincidunt luctus velit, ac porttitor velit viverra in. Curabitur vitae pellentesque velit. Suspendisse consectetur dolor eget enim dignissim elementum sit amet in odio. Phasellus placerat, leo id venenatis eleifend, metus lacus eleifend felis, vel pretium augue orci ac diam. Mauris feugiat, sem a lacinia tincidunt, turpis purus feugiat ligula, nec semper urna ligula non ante. Vivamus tristique nisl a mauris lacinia interdum. Vestibulum tempus convallis ante id tincidunt. Aenean sit amet velit blandit, molestie metus eget, mollis magna. Nam fringilla dui id dui molestie, at dignissim turpis euismod. Fusce scelerisque augue ut nibh ultricies volutpat.

Mauris vestibulum ultrices urna eget varius. Nullam sodales lacus sit amet nisl pulvinar, ut cursus lorem varius. Nullam placerat nisi nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla nec velit vestibulum, accumsan sem at, sodales dolor. Mauris et velit in nisi blandit tempus. Proin at posuere neque. Proin elementum quis magna at dictum. Integer placerat iaculis lacus et vestibulum. Nulla non odio tellus. Praesent sapien purus, sollicitudin eget volutpat sed, dapibus sed dui. Cras in nibh arcu. Phasellus tempor nunc sit amet dolor vehicula semper.

RpNation · Mar 23, 2017

Div Box

Purpose: Allow users to create Div Boxes for increased freedom and spectacular effects.

Important Note:

Div Box is the most advanced BBCode to date. For full customization and options beyond what this example demonstrates please refer to the BBCode Center for further assistance. We will link to advanced guides created by users here.

Code:

Code:

[div=background:url('https://www.rpnation.com/media/bg-blue.24726/full?d=1490285904');background-size:cover;border:5px #1976d2 double;color: #000000;padding:5px;]text blah blah[/div]

Example 1:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus rutrum lacus, id suscipit augue. Quisque tempus finibus justo, non cursus leo finibus consectetur. Ut tempor elit sit amet sapien sodales, non rutrum risus blandit. Aliquam lacinia est id fermentum blandit. Curabitur urna justo, lacinia at turpis sit amet, iaculis porta turpis. Suspendisse eget interdum diam, eu sodales justo. Praesent vel sagittis nisi, pretium finibus quam. Praesent condimentum condimentum vulputate. Aliquam erat volutpat. Sed auctor sed odio et pharetra. Proin non finibus turpis. Etiam sagittis scelerisque mauris, pretium viverra tortor semper nec.

Aliquam eu massa dolor. Quisque lobortis dui quis ligula suscipit, sit amet hendrerit nibh pretium. Donec consequat volutpat ex, sed feugiat turpis tincidunt eu. Fusce efficitur, nulla eget porta ultricies, massa diam malesuada magna, eu porta quam metus ut tortor. Aliquam nec quam mattis, fermentum enim id, molestie tellus. Sed malesuada sollicitudin massa, at ullamcorper turpis lacinia vulputate. Praesent ultricies fringilla dolor, vitae posuere arcu porttitor quis. In feugiat sed diam eu molestie. Ut mauris dolor, imperdiet non cursus et, interdum sit amet magna. Cras lacinia quis odio at fermentum. Integer egestas porttitor dignissim. Etiam lacinia a elit nec vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse feugiat metus rutrum, gravida odio et, efficitur tellus. Phasellus neque augue, maximus ut porta vitae, placerat quis dolor. Praesent euismod orci lorem, ut tempor lectus porta id.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus rutrum lacus, id suscipit augue. Quisque tempus finibus justo, non cursus leo finibus consectetur. Ut tempor elit sit amet sapien sodales, non rutrum risus blandit. Aliquam lacinia est id fermentum blandit. Curabitur urna justo, lacinia at turpis sit amet, iaculis porta turpis. Suspendisse eget interdum diam, eu sodales justo. Praesent vel sagittis nisi, pretium finibus quam. Praesent condimentum condimentum vulputate. Aliquam erat volutpat. Sed auctor sed odio et pharetra. Proin non finibus turpis. Etiam sagittis scelerisque mauris, pretium viverra tortor semper nec.

RpNation · May 11, 2017

HTML Comment

Purpose: Allow users to html comments that are only visible in the coding for the purposes of bbcode credit and such.

Important Note:

Text inside of a comment can only be seen in the coding. All RpN rules apply.

Code:

Code:

[comment]text[/comment]

Example 1:

Can't give an example or it would hide.

However any codes that contain an HTML comment that is copied will always be copied along even if invisible, this allows staff to check and authors to check.

RpNation · Aug 28, 2017

Anchors

Purpose: The anchor and goto tags can be used in combination with each other to create jumps within a post. They work exactly like named HTML anchors, creating various points in a page that can be jumped to with links.

Important Note:

You do not have to use goto to link to an anchor - you can also link to it directly with the url tag. However the latter may not work properly in some cases.

Important Note:

The anchor tag may be left empty if you are using it in a more elaborate setup.

Code:

Code:

[A=your_anchor_name]An anchor[/A]

[GOTO=your_anchor_name]Jump to an anchor[/GOTO]

Example:

An anchor

Jump to an anchor

RpNation · Jun 26, 2019

MainText Formatting

Paragraph Indent

PurposeParagraph Indent allows for indents to the first line of the first paragraph. The software comes with a built in code [indent][/indent] for indenting everything as a whole. Use which ever suits your needs.

Examples & Codes
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:

[pindent]text[/pindent]

Note:
Paragraph indent is also accessible through the toolbar on the editor under lists.

RpNation · Sep 9, 2022

MainLayout and Design

Chapters

PurposeChapters provides an alternative method of organizing information in the first post of threads, making it easier for users to digest and browse information about a roleplay.

Examples & Codes

Code:

[chapter]Chapter Name[/chapter]

Using chapters will make a table of content for you in the first post.

Note:
Chapters only currently works in the first post of a thread.

Alteras · Nov 12, 2022

MainLayout & Design

No Line Break

PurposeThe No Line Break tag disables the auto conversion of line breaks into actual text breaks. This allows more complex code to be made easier to read when typing while preserving its intended look. This also gives users full control over line break characters via CSS.

Examples & Codes

Code:

[nobr]line 1
line 2


line 4
line 5
[/nobr]

line 1 line 2 line 4 line 5

Note:
In normal bbcode, line breaks after the end of a tag is counted as a line break. With [nobr], this can be ignored, allowing for easier to read code. See the below differences with and without the tag.
Example

Code:

[nobr]
[div="background-color: skyblue;
	color: red;
	border: 5px dotted green;
	margin: 5px;
	box-sizing: border-box;
	padding: 5px;"]
[div="background-color: orange;"]
		inside div
[/div]
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.
[/div]
[/nobr]

inside div

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.

Code:

[div="background-color: skyblue;
	color: red;
	border: 5px dotted green;
	margin: 5px;
	box-sizing: border-box;
	padding: 5px;"]
[div="background-color: orange;"]
		inside div
[/div]
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.
[/div]

inside div

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.

Alteras · Nov 12, 2022

MainLayout & Design

Line Break

PurposeThe Line Break tag forces a HTML line break in the code. This allows users to decide when a line break occurs instead of via enter. This will override [nobr]

Examples & Codes

Code:

[nobr]line 1
line 2[br][/br]
line 4
line 5
[/nobr]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [br][/br]Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [br][/br]Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This [br][/br]is [br][/br]a [br][/br]sentence [br][/br]with [br][/br]the [br][/br]tag [br][/br][icode][br][/br][/icode] [br][/br]placed [br][/br]between [br][/br]each [br][/br]word.

line 1 line 2
line 4 line 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This
is
a
sentence
with
the
tag
[br][/br]
placed
between
each
word.

Tutorial RpNation - BBcode Guide

Recent threadmarks

RpNation

I didn't want to go swimming anyway, baka!

RpNation

I didn't want to go swimming anyway, baka!

RpNation

I didn't want to go swimming anyway, baka!

RpNation

I didn't want to go swimming anyway, baka!

RpNation

I didn't want to go swimming anyway, baka!

RpNation

I didn't want to go swimming anyway, baka!

RpNation

I didn't want to go swimming anyway, baka!

RpNation

I didn't want to go swimming anyway, baka!

RpNation

I didn't want to go swimming anyway, baka!

RpNation

I didn't want to go swimming anyway, baka!

RpNation

I didn't want to go swimming anyway, baka!

RpNation

I didn't want to go swimming anyway, baka!

RpNation

I didn't want to go swimming anyway, baka!

Alteras

The Sleepy One

Alteras

The Sleepy One

Recent threadmarks

Users who are viewing this thread

Similar threads