Tutorial RpNation - BBcode Guide

RpNation · Jul 7, 2014

RpNation - BBCode Guide

Within this thread you will find information regarding basic BBCode and general information and examples on how to use them. BBCode can be used in creative ways to modify and beautify your posted content. Even if you are not very familiar with CSS/HTML or other coding languages, BBCode is very direct and simple allowing most to code easily.

Please note that BBCode tags are case sensitive. Also remember to close tags when coding to prevent unexpected results. If tags are nested, you should close them from the inside out, like this example.

Code:

[SIZE=6]
[FONT=Roboto]
Hello!
[/FONT]
[/SIZE]

MainText Formatting

Text Formatting

MainLayout & Design

Layout & Design

MainMedia & Embeds

Media & Embeds

MainAesthetics

Aesthetics

RpNation · Jul 7, 2014

MainText Formatting

Headers & Sub-Headers

PurposeThe Header is designed to make a quick and easy way for members to place a header on their post without having to manually center (excluding the sub-header) or resize the text.

Examples & CodesThis is a Header

Code:

[h]This is a Header[/h]

This is a Sub-Header

Code:

[sh]This is a Sub-Header[/sh]

RpNation · Jul 7, 2014

MainLayout & Design

Dividers

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

Examples & Codes

Lined Divider

Code:

[divide]Lined Divider[/divide]

Thick Lined Divider

Code:

[divide=thick]Thick Lined Divider[/divide]

Dotted Divider

Code:

[divide=dotted]Dotted Divider[/divide]

Thick Dotted Divider

Code:

[divide=dotted-thick]Thick Dotted Divider[/divide]

RpNation · Jul 7, 2014

MainText Formatting

Inline Spoilers

PurposeThe 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)

Examples & Codes
This is a Secret

Code:

[inlineSpoiler]This is a Secret[/inlineSpoiler]

Note:
We are aware that there are issues with this code on Light theme.

RpNation · Jul 7, 2014

MainText Formatting

Highlights

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

Examples & Codes
Everybody Look At Me!

Code:

 [Highlight]This is a Secret[/Highlight]

RpNation · Jul 7, 2014

MainText Formatting

Justified Text

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

Examples & Codes
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.

Code:

[Justify]Text here[/Justify]

RpNation · Jul 7, 2014

MainLayout & Design

Image Float

PurposeThe 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.

Note:
Floats may overlap over other BBCode content due to how the floats behave. If this happens, at the bottom of your content you can use [div=clear:both;][/div] to end the float effect.

Examples & Codes

Code:

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

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.

RpNation · Jul 7, 2014

MainText Formatting

Blockquotes

PurposeThe 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).

Examples & Codes

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

Charia

Code:

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

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

RpNation · Jul 7, 2014

MainLayout & Design

Fieldsets

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

Examples & Codes

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

Code:

[Fieldset=Lorem Ipsum]Content[/Fieldset]

Code:

[Fieldset=OPTION]Content[/Fieldset]

Note:
The option determines the title of the Fieldset.

RpNation · Jul 7, 2014

MainLayout & Design

Sides

PurposeThe 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.

Examples & Codes
Note:
The option determines the float of the Side (left or right).

Code:

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

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.

Code:

[side=left]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.

RpNation · Jul 7, 2014

MainMedia & Embeds

Portable Document Format (PDF)

PurposeThe 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.

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

Examples & Codes

Code:

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

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.

RpNation · Jul 7, 2014

MainLayout & Design

Tabs

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

Examples & Codes

Code:

[Tabs]

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

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

[/Tabs]

Content For Tab A.
Content For Tab B.

RpNation · Jul 7, 2014

MainLayout & Design

Rows & Columns

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

Note:
A row is needed around columns or else the post is likely to start glitching or the formatting will be broken. Spans in a row may only total up to 8. Spans are declared in the options of the column tag.

Examples & CodesDeclaring a span:

Code:

[row][column=span#][/column][/row]

This is a column with [Column=span1]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a column with [Column=span2]

Maecenas rhoncus volutpat lacinia. Sed tincidunt convallis mi, sit amet elementum ex. Etiam mattis faucibus leo. Duis blandit ex sed luctus auctor.

This is a column with [Column=span3]

Aenean lectus ante, laoreet ac dolor eu, dapibus placerat mauris. Duis sagittis dolor nec turpis pellentesque dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque nibh lacus, laoreet at malesuada id, feugiat vitae nibh. Sed et ante congue, egestas nulla vitae, mollis tortor.

This is a column with [Column=span2]

Donec ante sem, accumsan sit amet ullamcorper in, faucibus a urna. Quisque sit amet scelerisque sapien. Fusce pharetra quam ipsum, id pretium justo tincidunt a. In sit amet molestie tortor, nec lacinia mauris.

Code:

[Row]
[Column=span#]
Text Here.
[/Column][Column=span#]
Text Here.
[/Column][Column=span#]
Text Here.
[/Column][Column=span#]
Text Here.
[/Column]
[/Row]

Note:
Line breaks in the code will result in the columns not lining up.

RpNation · Jul 7, 2014

MainLayout & Design

Tables

PurposeThe Table is made to display and format data in square cells.

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.

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.

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.

Examples & CodesBasic Table

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

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]

Table with tr=blue

This	is	a	Table
Data A	Data B	Data C	Data D
Data A	Data B	Data C	Data D

Code:

[table]

[tr]
[th]This[/th]
[th]is[/th]
[th]a[/th]
[th]Table[/th]
[/tr]
[tr=blue]
[td]Data A[/td]
[td]Data B[/td]
[td]Data C[/td]
[td]Data D[/td]
[/tr]
[tr]
[td]Data A[/td]
[td]Data B[/td]
[td]Data C[/td]
[td]Data D[/td]
[/tr]

[/table]

Zebra Table

This	is	a	Table
Data A	Data B	Data C	Data D
Data A	Data B	Data C	Data D
Data A	Data B	Data C	Data D

Code:

[table=zebra]

[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 A[/td]
[td]Data B[/td]
[td]Data C[/td]
[td]Data D[/td]
[/tr]
[tr]
[td]Data A[/td]
[td]Data B[/td]
[td]Data C[/td]
[td]Data D[/td]
[/tr]

[/table]

Dotted Zebra Table

This	is	a	Table
Data A	Data B	Data C	Data D
Data A	Data B	Data C	Data D
Data A	Data B	Data C	Data D

Code:

[table=dotted-zebra]

[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 A[/td]
[td]Data B[/td]
[td]Data C[/td]
[td]Data D[/td]
[/tr]
[tr]
[td]Data A[/td]
[td]Data B[/td]
[td]Data C[/td]
[td]Data D[/td]
[/tr]

[/table]

Table without cell borders or background color

This	is	a	Table
Data A	Data B	Data C	Data D
Data A	Data B	Data C	Data D
Data A	Data B	Data C	Data D

Code:

[table=none]

[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 A[/td]
[td]Data B[/td]
[td]Data C[/td]
[td]Data D[/td]
[/tr]
[tr]
[td]Data A[/td]
[td]Data B[/td]
[td]Data C[/td]
[td]Data D[/td]
[/tr]

[/table]

Table with dotted border

This	is	a	Table
Data A	Data B	Data C	Data D
Data A	Data B	Data C	Data D
Data A	Data B	Data C	Data D

Code:

[table=dotted]

[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 A[/td]
[td]Data B[/td]
[td]Data C[/td]
[td]Data D[/td]
[/tr]
[tr]
[td]Data A[/td]
[td]Data B[/td]
[td]Data C[/td]
[td]Data D[/td]
[/tr]

[/table]

RpNation · Jul 7, 2014

MainAesthetics

Print

PurposeThe Print tag is used to simulate a physical note written on paper.

The option is the type of paper (line, graph, parchment). If you use an unordered list within this BBCode, it will not use bullets, but arrows. If you use the thin progress BBCode bars they get a sketch effect. The sticky notes BBCode will also be slightly different.

Note that the color of the text within the print graphic defaults to the color of the text in the theme you're using. That means if you're in Dark Mode, the text will be white and you can't read it. Changing the text color to black will fix this, as shown in the examples below.

Examples & Codes

Code:

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

Code:

[Print]
[color=black]
This is the information within the message.
[/color]
[/Print]

This is the information within the message.

Code:

[Print=line]
[color=black]
This is the information within the message.
[/color]
[/Print]

This is the information within the message.

Code:

[Print=graph]
[color=black]
This is the information within the message.
[/color]
[/Print]

This is the information within the message.

Code:

[Print=parchment]
[color=black]
This is the information within the message.
[/color]
[/Print]

This is the information within the message.

RpNation · Jul 7, 2014

MainAesthetics

Text Message

PurposeThe textmessage tag is used to simulate a text conversation on the forums.

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

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.

Examples & Codes

Recipient

them

Hi :)

me

Who is this?

them

Lol, It's me silly.

Code:

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

RpNation · Nov 3, 2014

MainAesthetics

Blocks

PurposeThe block tag is used to define a section of content that is related.

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.

Headers have responsive color inside of blocks.

Examples & Codes

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]

[block=dice][/block]

[block=dice10][/block]

[block=setting][/block]

[block=warning][/block]

[block=storyteller][/block]

[block=announcement][/block]

[block=important][/block]

[block=question][/block]

[block=encounter][/block]

[block=information][/block]

[block=character][/block]

[block=treasure][/block]

RpNation · Nov 3, 2014

MainAesthetics

Progress Bar

PurposeThe progress tag is used to create a visual meter to show progress on some task.

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

You can replace progress with 'thinprogress' for a thinner bar.

Examples & Codes

Character Completion

Code:

[progress=65]Character Completion[/progress]

Character Completion

Code:

[thinprogress=65]Character Completion[/thinprogress]

RpNation · Nov 3, 2014

MainAesthetics

Sticky Note

PurposeThe note tag is used to create a visual for a note found or left by a character.

Examples & Codes

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

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]

RpNation · Jan 20, 2015

MainAesthetics

Mail

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

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

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

Examples & Codes

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

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]

RpNation · Jan 20, 2015

MainLayout & Design

Center Block

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

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

Examples & Codes

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.

Code:

[centerblock=OPTION]My Content[/centerblock]

RpNation · Jan 20, 2015

MainLayout & Design

Background

PurposeThe background tag will let you add a color background to a section of content.

The inputted option is the named web color or hex code of the color you want.

Examples & Codes

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.

Code:

[bg=COLOR]My Content[/bg]

RpNation · Jan 20, 2015

MainLayout & Design

Border

PurposeThe border tag will let you add a border to a section of content.

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.

Examples & Codes

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.

Code:

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

Code:

[border=5px dashed CornflowerBlue ]My Content[/border]

RpNation · Jan 20, 2015

MainAesthetics

Newspaper

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

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

Examples & Codes

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 SenpaiNullam 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.

Code:

[newspaper]My Content[/newspaper]

RpNation · Jan 20, 2015

MainMedia & Embeds

Height Restrict

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

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

Examples & Codes

Code:

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

Note: If you do not want your images to stack atop each other you can use:

Code:

[div=display:inline-block;vertical-align:top;][HEIGHTRESTRICT=300][IMG]http://fc07.deviantart.net/fs70/f/2014/225/c/4/shark_chan_by_sharkfreckles-d7v14za.png[/IMG][/HEIGHTRESTRICT][/div][div=display:inline-block;vertical-align:top;][HEIGHTRESTRICT=300][IMG]http://fc07.deviantart.net/fs70/f/2014/225/c/4/shark_chan_by_sharkfreckles-d7v14za.png[/IMG][/HEIGHTRESTRICT][/div]

[div=display:inline-block;vertical-align:top;]

[/div][div=display:inline-block;vertical-align:top;]

[/div]

Tutorial RpNation - BBcode Guide

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Users Who Are Viewing This Thread (Users: 1, Guests: 2)