• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Tutorial RpNation - BBcode Guide

Status
Not open for further replies.
Check
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]
 
Last edited by a moderator:
Accordions
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 |

  1. number%: Set the width of the accordion box
  2. fleft: block will float left
  3. fright: block will float right
  4. bleft: align the block to the left
  5. bcenter: align the block to the center
  6. bright: align the block to the right

  1. left: title of the slide will be align to the left
  2. center: title of the slide will be align to the center This one is enabled by default for slide titles.
  3. right: title of the slide will be align to the right
  4. 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]
 
Last edited by a moderator:
Google Font Library
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.
 
Last edited by a moderator:
Font Awesome Icons
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.

Screen Shot 2019-04-09 at 9.35.24 AM.png

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]
 
Last edited by a moderator:
Challonge
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.
firefox_2017-03-06_07-35-25.png
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
 
Last edited by a moderator:
Scroll Box
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.
 
Div Box
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.
 
Last edited by a moderator:
HTML Comment
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.
 
Last edited by a moderator:
Anchors
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
 
Paragraph Indent
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.
Screen Shot 2019-06-26 at 10.32.15 AM.png
 
Last edited by a moderator:
Chapters
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.
 
No Line Break
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.


 
Line Break
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.
 
Status
Not open for further replies.

Users who are viewing this thread

Back
Top