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

RpNation

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


 
Last edited by a moderator:
Headers & Sub-Headers
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]
 
Last edited by a moderator:
Dividers
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]
 
Last edited by a moderator:
Inline Spoilers
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.
 
Last edited by a moderator:
Highlights
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]
 
Last edited by a moderator:
Justified Text
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]
 
Last edited by a moderator:
Image Float
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]

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

latest
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.
 
Last edited by a moderator:
Blockquotes
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.
 
Last edited by a moderator:
Fieldsets
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.
 
Last edited by a moderator:
Sides
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.
 
Last edited by a moderator:
Portable Document Format (PDF)
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.
 
Last edited by a moderator:
Tabs
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.
 
Last edited by a moderator:
Rows & Columns
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.
 
Last edited by a moderator:
Tables
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
ThisisaTable
Data AData BData CData D
Data QIt can span multiple columnsData F

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
ThisisaTable
Data AData BData CData D
Data AData BData CData 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
ThisisaTable
Data AData BData CData D
Data AData BData CData D
Data AData BData CData 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
ThisisaTable
Data AData BData CData D
Data AData BData CData D
Data AData BData CData 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
ThisisaTable
Data AData BData CData D
Data AData BData CData D
Data AData BData CData 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
ThisisaTable
Data AData BData CData D
Data AData BData CData D
Data AData BData CData 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]
 
Last edited by a moderator:
Print
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.
 
Last edited by a moderator:
Text Message
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]
 
Last edited by a moderator:
Blocks
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]
 
Last edited by a moderator:
Progress Bar
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]
 
Last edited by a moderator:
Sticky Note
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]
 
Last edited by a moderator:
Mail
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]
 
Last edited by a moderator:
Center Block
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]
 
Last edited by a moderator:
Background
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]
 
Last edited by a moderator:
Border
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]
 
Last edited by a moderator:
Newspaper
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]
 
Last edited by a moderator:
Height Restrict
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
shark_chan_by_sharkfreckles-d7v14za.png


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]

shark_chan_by_sharkfreckles-d7v14za.png
shark_chan_by_sharkfreckles-d7v14za.png
 
Last edited by a moderator:
Status
Not open for further replies.

Users who are viewing this thread

  • Back
    Top