What's new

Tutorial RpNation - BBcode Guide

Status
Not open for further replies.

RpNation

I didn't want to go swimming anyway, baka!
Administrator
#26
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:

RpNation

I didn't want to go swimming anyway, baka!
Administrator
#27
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:

RpNation

I didn't want to go swimming anyway, baka!
Administrator
#28
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:

RpNation

I didn't want to go swimming anyway, baka!
Administrator
#29
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

Google Fonts


Code:

Code:
[fa]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]fa-address-book fa-5x[/fa]



Animation:

fa-spin, fa-pulse
Code:
[fa]fa-address-book fa-spin[/fa]


Effects should stack like so:
Code:
[COLOR=#0000ff][fa]fa-address-book fa-spin fa-5x[/fa][/COLOR]
 
Last edited by a moderator:

RpNation

I didn't want to go swimming anyway, baka!
Administrator
#30
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:

RpNation

I didn't want to go swimming anyway, baka!
Administrator
#31
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

I didn't want to go swimming anyway, baka!
Administrator
#32
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

I didn't want to go swimming anyway, baka!
Administrator
#33
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

I didn't want to go swimming anyway, baka!
Administrator
#34
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:

RpNation

I didn't want to go swimming anyway, baka!
Administrator
#35
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:

RpNation

I didn't want to go swimming anyway, baka!
Administrator
#36
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
 
Status
Not open for further replies.

Users Who Are Viewing This Thread (Users: 0, Guests: 3)

Top