Templates

[Pai]

→ TEMPLATES

Conversely from dA's very strict limitations for formatting, Proboards allows for tons of customized layouts of posts and threads, which can make for really cool designs for your character profiles! We've had a lot of fun using them, so we want to provide a lot of options for everyone to have fun with them, too.

Even though it involves a lot of code to make your own, we've got a bunch provided for you to use, which are pretty plug-and-play! And, if you want to go above and beyond, you are (as stated elsewhere too) absolutely welcome to build on top of them further!

Included in this thread, I'm also going to show you some formatting tricks, from simple things to even how to make your own templates and layouts! And even though everything provided matches our visual aesthetic, if you make any of your own, you're free to design them to any visual style you like.

As always, if you have any questions about anything related to forum coding/formatting/are overwhelmed by the templates and need help/etc, feel free at any point to ask me! I'm the mod that knows most about it (I did all of awafl's layouts/coding and templates and stuff).

To start though, as a handy reference, here are all the main templates:

Base Profile Template

SPOILER: Click to show

[img src="PLACE IMAGE LINK TO APP ART HERE (should end in .png or etc)" style="max-width:300px; float:left; padding: 0 20px 20px 0;"]
[div style="font-weight: bold; font-size:30px; color:#b7b7b7; letter-spacing:2px; font-style:italic;"][font face="times new roman"]“QUOTE HERE”[/font][/div]

[div style="font-weight:bold; font-style:italic; letter-spacing:1px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; font-size:16px; margin-left: 310px;"]NAME[/div]
NAME HERE

[div style="font-weight:bold; font-style:italic; letter-spacing:1px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; font-size:16px; margin-left: 310px;"]AGE[/div]
AGE HERE

[div style="font-weight:bold; font-style:italic; letter-spacing:1px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; font-size:16px; margin-left: 310px;"]GENDER[/div]
GENDER HERE

[div style="font-weight:bold; font-style:italic; letter-spacing:1px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; font-size:16px; margin-left: 310px;"]BIRTH DATE[/div]
DAY HERE

[div style="font-weight:bold; font-style:italic; letter-spacing:1px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; font-size:16px; margin-left: 310px;"]OCCUPATION[/div]
OCCUPATION HERE

[div style="font-weight:bold; font-style:italic; letter-spacing:1px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; font-size:16px; margin-left: 310px;"]LIKES[/div]
LIKES HERE

[div style="font-weight:bold; font-style:italic; letter-spacing:1px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; font-size:16px; margin-left: 310px;"]DISLIKES[/div]
DISLIKES HERE


[div style="align:left; font-weight:bold; font-style:italic; letter-spacing:1px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; font-size:16px;"]  PERSONALITY[/div]
[blockquote]PERSONALITY HERE[/blockquote]

[div style="align:left; font-weight:bold; font-style:italic; letter-spacing:1px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; font-size:16px;"]  BIOGRAPHY[/div]

[ul][li]BIOGRAPHY HERE (use [ li ][ /li ] without the spaces to add more bullets if using bbc)[/li][/ul]

[div style="align:left; font-weight:bold; font-style:italic; letter-spacing:1px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; font-size:16px;"]  PERSONAL HISTORY[/div]
[blockquote]HISTORY HERE[/blockquote]

[div style="align:left; font-weight:bold; font-style:italic; letter-spacing:1px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; font-size:16px;"]  EXTRAS[/div]

[ul][li]EXTRAS HERE (use [ li ][ /li ] without the spaces to add more bullets if using bbc)[/li][/ul]

[div style="align:left; font-weight:bold; font-style:italic; letter-spacing:1px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; font-size:16px;"]  COMPLICATIONS[/div]
[blockquote][b]PVP:[/b]
[b]Injury:[/b]
[b]Death:[/b]
[/blockquote]
[hr]

Leveling Table

SPOILER: Click to show

Link actually

Relationship Tracker (optional)

SPOILER: Click to show

[quote][table border="0"][tr][td style="width:150px;"][img src="http://quasicake.net/awafl/defaulticon.png"][/td][td][div style="font-size:16px; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; padding-right:5px; letter-spacing:1px; width:200px; color:#1abdff!important;"][a href="LINK TO CHARACTER'S BIO"][b][i]CHARACTER NAME[/i][/b][/a][/div][div style="width:300px; align:right; box-shadow: inset 0 -0.1em red, inset 0 -0.1em red, inset 0 -0.1em red, inset 0 -0.1em red;] [/div]
:: emptyheart :: :: emptyheart :: :: emptyheart :: :: emptyheart :: :: emptyheart :: :: emptyheart ::

DESCRIPTION[/td][/tr][/table][/quote]

[Pai]

→ EXTRA TEMPLATES

As well, here are a bunch of pick-'n-choose templates to use for other parts of your profile! For things like Snapshots, rp trackers, extra information, playlists, additional references, whatever you feel like and want to add! Some are more code-intensive than others. Plus you're free to build on these, too!

You aren't required to use any of these by any means (especially if you're not super comfortable with code), but they're here if you want to use them! They're just for fun.

---

HEADERS

  → Just paste them in and swap out where it says "title"! For if you want to put headers at the top of each post in your profile. Each comes with color variations for different moods!

→ THIS THREAD'S

In blue

SPOILER: Click to show

[div style="box-shadow: -10px 10px #34befc; background: #fff; font-size:24px; font-family:Arial Black, san-serif; font-weight:bold; color:#34befc; padding: 0 5px 0 5px; letter-spacing:1px;] → TITLE[/div]

In red

SPOILER: Click to show

[div style="box-shadow: -10px 10px #red; background: #fff; font-size:24px; font-family:Arial Black, san-serif; font-weight:bold; color:#red; padding: 0 5px 0 5px; letter-spacing:1px;] → TITLE[/div]

In black

SPOILER: Click to show

[div style="box-shadow: -10px 10px #000; background: #fff; font-size:24px; font-family:Arial Black, san-serif; font-weight:bold; color:#000; padding: 0 5px 0 5px; letter-spacing:1px;] → TITLE[/div]

bordered

Red side border

SPOILER: Click to show

[div style="text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; font-family:Arial Black, sans-serif; font-weight:bold; letter-spacing:1.5px; border-width: 0px 0px 0px 6px; border-style:solid; border-color: red; font-size:24px; padding: 0px 0px 0px 5px;"] title[/div]

Blue side border

SPOILER: Click to show

[div style="text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; font-family:Arial Black, sans-serif; font-weight:bold; letter-spacing:1.5px; border-width: 0px 0px 0px 6px; border-style:solid; border-color: #34befc; font-size:24px; padding: 0px 0px 0px 5px;"] title[/div]

  NAVLIKE

    **change "margin-right:300px;" to a lower number for a longer line, or remove it to have it take up the whole line

Red & Blue

SPOILER: Click to show

[div style="text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff; font-family:Arial Black, sans-serif; font-weight:bold; letter-spacing:1.5px; font-size:24px; color:red; box-shadow: inset 0 -0.4em #34befc, inset 0 -0.4em #34befc, inset 0 -0.5em #34befc, inset 0 -0.4em #34befc; margin-right:300px; text-transform:uppercase;"]  TITLE[/div]

Black & Red

SPOILER: Click to show

[div style="text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff; font-family:Arial Black, sans-serif; font-weight:bold; letter-spacing:1.5px; font-size:24px; color:#000; box-shadow: inset 0 -0.4em red, inset 0 -0.4em red, inset 0 -0.5em red, inset 0 -0.4em red; margin-right:300px; text-transform:uppercase;"]  TITLE[/div]

White & Blue

SPOILER: Click to show

[div style="text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff; font-family:Arial Black, sans-serif; font-weight:bold; letter-spacing:1.5px; font-size:24px; color:#34befc; box-shadow: inset 0 -0.4em white, inset 0 -0.4em white, inset 0 -0.5em white, inset 0 -0.4em white; margin-right:300px; text-transform:uppercase;"]  TITLE[/div]

○ bubble

    **change "margin-right:300px;" to a lower number for a longer bubble, or remove it to have it take up the whole line

In red

SPOILER: Click to show

[div style="background: red; border-radius:20px; margin-right: 300px; box-shadow: -8px 8px white; font-face:Arial Black, sans-serif; font-weight:bold; letter-spacing:2px; color: white; padding: 5px 5px 5px 10px; font-size:24px;"]○ title[/div]

In blue

SPOILER: Click to show

[div style="background: red; border-radius:20px; margin-right: 300px; box-shadow: -8px 8px white; font-face:Arial Black, sans-serif; font-weight:bold; letter-spacing:2px; color: #34befc; padding: 5px 5px 5px 10px; font-size:24px;"]○ title[/div]

In black

SPOILER: Click to show

[div style="background: red; border-radius:20px; margin-right: 300px; box-shadow: -8px 8px white; font-face:Arial Black, sans-serif; font-weight:bold; letter-spacing:2px; color: black; padding: 5px 5px 5px 10px; font-size:24px;"]○ title[/div]

○ inverse bubble

    **change "margin-right:300px;" to a lower number for a longer bubble, or remove it to have it take up the whole line
    **or add background:white; for a background color

In red

SPOILER: Click to show

[div style="border-radius:20px; border: 1px solid red; margin-right: 300px; box-shadow: -8px 8px red; font-face:Arial Black, sans-serif; font-weight:bold; letter-spacing:2px; color: red; padding: 5px 5px 5px 10px; font-size:24px;"]○ title[/div]

In blue

SPOILER: Click to show

[div style="border-radius:20px; border: 1px solid #34befc; margin-right: 300px; box-shadow: -8px 8px red; font-face:Arial Black, sans-serif; font-weight:bold; letter-spacing:2px; color: #34befc; padding: 5px 5px 5px 10px; font-size:24px;"]○ title[/div]

In black

SPOILER: Click to show

[div style="border-radius:20px; border: 1px solid black; margin-right: 300px; box-shadow: -8px 8px red; font-face:Arial Black, sans-serif; font-weight:bold; letter-spacing:2px; color: black; padding: 5px 5px 5px 10px; font-size:24px;"]○ title[/div]

---

CONTAINERS

  → Content containers to use whereever you like! Available in variations for how much code you want to get involved with, what layout type you want, plus palette variations.

Double Dotted

In blue

SPOILER: Click to show

[div style="border: dotted 2px #34befc; padding:10px; border-radius:20px;"][div style="background:white; padding:20px; border-radius:20px;"]text here
[/div][/div]

In red

SPOILER: Click to show

[div style="border: dotted 2px red; padding:10px; border-radius:20px;"][div style="background:white; padding:20px; border-radius:20px;"]text here
[/div][/div]

In black

SPOILER: Click to show

[div style="border: dotted 2px #000; padding:10px; border-radius:20px;"][div style="background:white; padding:20px; border-radius:20px;"]text here
[/div][/div]

titled box

content

In red

SPOILER: Click to show

[div style="background:red; color:white; font-family:arial black, sans-serif; font-size:18px; letter-spacing:2px; margin: 0px 0px -12px 0px; padding-left:5px;"] TITLE[/div]
[div style="background:white; padding:10px; border: solid 1px red;"]content
[/div]

In blue

SPOILER: Click to show

[div style="background:#34befc; color:white; font-family:arial black, sans-serif; font-size:18px; letter-spacing:2px; margin: 0px 0px -12px 0px; padding-left:5px;"] TITLE[/div]
[div style="background:white; padding:10px; border: solid 1px #34befc;"]content
[/div]

In black

SPOILER: Click to show

[div style="background:#000; color:white; font-family:arial black, sans-serif; font-size:18px; letter-spacing:2px; margin: 0px 0px -12px 0px; padding-left:5px;"] TITLE[/div]
[div style="background:white; padding:10px; border: solid 1px #000;"]content
[/div]

Box shadow

In blue

SPOILER: Click to show

[div style="box-shadow: -10px 10px #34befc; padding:10px; background:white;"]content[/div]

In red

SPOILER: Click to show

[div style="box-shadow: -10px 10px red; padding:10px; background:white;"]content[/div]

In black

SPOILER: Click to show

[div style="box-shadow: -10px 10px #000; padding:10px; background:white;"]content[/div]

Double Side

In blue

SPOILER: Click to show

[div style="border-style:double; border-width: 0px 0px 0px 10px; border-color: #34befc; background:#dddddd; padding:10px"]Double Side[/div]

In red

SPOILER: Click to show

[div style="border-style:double; border-width: 0px 0px 0px 10px; border-color:red; background:#dddddd; padding:10px"]Double Side[/div]

In black

SPOILER: Click to show

[div style="border-style:double; border-width: 0px 0px 0px 10px; border-color: #000; background:#dddddd; padding:10px"]Double Side[/div]

In white

SPOILER: Click to show

[div style="border-style:double; border-width: 0px 0px 0px 10px; border-color: #fff; background:#dddddd; padding:10px"]Double Side[/div]

Simple Dashed

In red

SPOILER: Click to show

[div style="border: dashed 2px red; border-radius:50px; padding: 10px 10px 10px 20px;"]content
[/div]

In blue

SPOILER: Click to show

[div style="border: dashed 2px #34befc; border-radius:50px; padding: 10px 10px 10px 20px;"]content
[/div]

In black

SPOILER: Click to show

[div style="border: dashed 2px black; border-radius:50px; padding: 10px 10px 10px 20px;"]content
[/div]

[Pai]

→ FORMATTING TIPS

The coding for the forum is (mostly) the same as html, but here are still some easy tips for using them in the forum!

If you want your text indented,

like this,

You can use blockquotes! You can use multiple sets of blockquotes to get more indented.

The code is:
[blockquote] text here [/blockquote]


If you want the same effect, but in its own container,

like this one,

That's a regular quote!

The code is:
[quote] text here [/quote]


If you want a divider in your posts--ex, to split sections, or to indicate a timeskip in a post, or etc, like this:

---

You can use a horizontal rule!

This is the code:
text above divider
[hr]
text below divider


For bulleted lists, you use a code like this:
[ul]
[li] List item [/li]
[li] List item 2[/li]
[/ul]
"ul" stands for "unordered list" (you can change it to "OL" for "ordered list" if you want numbers!), and "li" stands for "list item." Make more sets of li tags for more list items! The ui tags should mark the start and end of your bulleted list.

You can also make nested bullets in your list by doing a second set of the code, within one of your li tags:
[ul][li]List item
[ul][li]Nested list item[/li][/ul][/li]
[li] List item 2[/li]
[/ul]


The use of tables is also available, and works the same as regular HTML; they're easy to generate them using the formatting buttons above too! I won't get into an explanation of how to use tables here (to stay brief), but if you want to know more on it, feel free to ask! W3 Schools is also an excellent resource. It's worth noting that Proboards doesn't automatically generate borders around your table, which can make it hard to see what your result looks like if you're not used to coding tables. You can add that in your opening table tag with border="1"!

→ DOING YOUR OWN LAYOUTS

Advanced custom formatting is done through the use of divs, which can be embedded with CSS. The setups look like this:
[div style="your css here"] content [/div]

Common aspects you might want to use in your css are things like...

background: #hex code; (used to change the background color; good for making a container)
color: #hex code; (used for changing the font color)
font-size: #px; (for changing font size)
border: #px type (solid, dashed, dotted, etc) #hex code; (for adjusting the border)
padding: #px; (formats a container a little more so the text is away from the edges)
border-radius: #px; (makes the corners of your containers round! The higher the number, the rounder the corner)

Make sure that each aspect ends in the ; or else the code won't work!

The majority of css styles are accepted by Proboards, allowing you opportunities as diverse as your knowledge. If you're unfamiliar with css and need a good resource to learn from, W3 Schools is the best out there! If you google "css [the thing you want to do], they'll almost always come right up with exactly what you need; they're very thorough.


You can always check out a bunch of examples of what things should look like from my already-made templates, too! For example, here's what I made to use for the headers for this thread:

[div style="box-shadow: -10px 10px #34befc; background: #fff; font-size:24px; font-family:Arial Black, san-serif; font-weight:bold; color:#34befc; padding: 0 5px 0 5px; letter-spacing:1px;] → TITLE[/div]
Let's break this down!

box-shadow: -10px 10px #34befc; → The container will have a shadow. The first number dictates the shadow's horizontal position (positives for right, negatives for left), and the second its vertical position (positives for down, negatives for up), and the hex code decides what color it is. There's lots of different effects you can achieve with box shadows, but this is a very simple standard one. You can also add a third number for a blurred/soft shadow!

background: #fff; → the container's background will be white! I used the shortcode for the full hex of white (#ffffff); you can also just use the word "white"!

font-size:24px; → pretty standard; I wanted bigger text!

font-family: Arial Black, sans-serif; → dictates what the font will be. Be mindful of using web-safe fonts! Most standard web-safe font families can be found here. The purpose of using web-safe fonts is that they're common ones installed for all users, as if they don't have a font included in the family of your choice, it'll appear as the default font instead.

font-weight: bold; → I wanted bold text! The parameters you can use for font weight are "normal," "bold," and "bolder." If you wanted all the text in italics, you would use "font-style: italic;".

color: #34befc; → Changes the font color! You can use basic color names, hex codes, or rgb numbers.

padding: 0 5px 0 5px; → because I didn't want the text touching the sides, but I didn't want the box to be any taller than line height, I only did padding in two aspects. Whenever there's four numbers present, they control, in order: Top, Right, Bottom, Left. So, I have the top and bottom set and 0, and the left and right at 5, to keep the text away from the edges. This can also be done split up as padding-top: #px; padding-bottom: #px;, etc.

letter-spacing:1px; → This spaces out the letters a bit more than default! It's very handy for making normal fonts look a little more special.

While it is possible to set up custom css classes for more advanced utilization, it is very complicated and I don't... honestly recommend trying, it's a huge headache and not especially worth it. If you're interested, though, here's some explanation on it!