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

Resource ♥*♡∞:。.。 𝚜𝚊𝚕𝚎𝚖'𝚜 𝚏𝚛𝚎𝚎𝚋𝚒𝚎𝚜 。.。:∞♡*♥


hii there! i'm a total noob at coding but i've been trying to teach myself some bbcode for fun in the past few days and i'm just gonna be dropping some codes that i've made here, both to document my progress and provide some more resources for y'all to use if you want to. feel free to take em and use them in your rps, even alter them if u want, all i ask is that you keep the credit that i leave at the bottom. hope you like them lol

also, lmk if you have any problems or there's any sort of discrepancies i need to work out with any of my codes, bc there'll probably be some that i have no idea about haha

 

character sheet no. 1
i wanted to figure out how to make my own character sheets and all so here's one that i managed to make this morning. it's the first 'successful' code that i've made and it's pretty basic but i'm proud of it hehe

i'm including the colors in the post below for ease, feel free to change them with ctrl + f, and lmk if there are any problems that need fixing or if you need help using it. p.s., bg pic creds to pumpkin-stem on tumblr



firstname lastname.
basics.
title : info.
title : info.
title : info.
title : info.
title : info.
title : info.
title : info.
visage.
title : info.
title : info.
title : info.
title : info.
title : info.
title : info.
title : info.
persona.
- positive traits :
trait
: description.
trait : description.
trait : description.
- negative traits :
trait
: description.
trait : description.
trait : description.
- likes : info.
- dislikes : info.
archive.
title : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium ligula enim, vel finibus lorem interdum quis. Suspendisse viverra lectus tortor. Nam dui orci, hendrerit quis risus quis, placerat mattis augue. Phasellus in felis orci. Donec in ligula nisl. Sed at consectetur velit, ut placerat velit. Sed tristique interdum dui, sit amet euismod nunc mollis vel. Nulla facilisi. Praesent a elit neque. Vivamus in scelerisque metus. Maecenas in libero bibendum, feugiat leo in, auctor metus. Morbi vulputate libero sit amet ligula feugiat, non facilisis eros tempus. Fusce blandit risus enim, in consequat libero commodo nec. Proin pretium velit vitae lorem scelerisque mollis. Etiam eleifend scelerisque nunc a scelerisque. Nulla ipsum diam, lobortis in ipsum et, ullamcorper interdum magna.
coded by incandescent

Code:
[bg=transparent; margin: auto; background-color: #cda77d; width: 700px; height: 400px; border-radius: 5px; border-style: solid; border-color:#ba8950; border-width: 5px;][row][column=span3][comment]

(づ ◕‿◕ )づ  sidebar image below!

[/comment][bg=transparent; margin: auto; background: url('https://i.pinimg.com/originals/62/dd/52/62dd520fb09a28deb4cc9309fea9dab6.jpg'); height: 380px; background-size: cover; border-radius: 5px;][/bg][/column][column=span5][bg=transparent; margin: auto; border-radius: 5px; border-color: #ba8950; border-size: 10px; border-style: solid; background-color: #ba8950; height: 40px; font-family: Karla;][bg=transparent; margin: auto; color: #75492f; letter-spacing: 2px; text-transform: uppercase;][comment]

(つ≧▽≦)つ    name goes here!

[/comment][B]name.[/B][/bg][/bg]
[bg=transparent; background-color: #ba8950; margin: auto; height: 288px; border-radius: 5px;  overflow-y: scroll; overflow-x: hidden;][bg=transparent; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]

(⊃。•́‿•̀。)⊃     first section starts here!

[/comment][B]basics.[/B][/bg][bg=transparent; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.[/bg][bg=transparent; position: sticky; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]

(づ ◕‿◕ )づ  second section starts here!

[/comment][B]visage.[/B][/bg][bg=transparent; position: sticky; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.[/bg][bg=transparent; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]

(っಠ‿ಠ)っ   third section starts here!

[/comment][B]persona.[/B][/bg][bg=transparent; position: sticky; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B]- positive traits :
[I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B]- negative traits :
[I]trait[/I][/B] : description.
[B][I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B][I]- likes[/I][/B]  :  info.
[B][I]- dislikes[/I][/B]  :  info.[/bg][bg=transparent; position: sticky; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px; text-align: justify; text-justify: inter-word;][comment]

(づ◡﹏◡)づ    fourth section starts here!

[/comment][B]archive.[/B][/bg][bg=transparent; position: sticky; margin: auto; font-family: Karla; color: #75492f;][B][I]title[/I][/B]  :  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium ligula enim, vel finibus lorem interdum quis. Suspendisse viverra lectus tortor. Nam dui orci, hendrerit quis risus quis, placerat mattis augue. Phasellus in felis orci. Donec in ligula nisl. Sed at consectetur velit, ut placerat velit. Sed tristique interdum dui, sit amet euismod nunc mollis vel. Nulla facilisi. Praesent a elit neque. Vivamus in scelerisque metus. Maecenas in libero bibendum, feugiat leo in, auctor metus. Morbi vulputate libero sit amet ligula feugiat, non facilisis eros tempus. Fusce blandit risus enim, in consequat libero commodo nec. Proin pretium velit vitae lorem scelerisque mollis. Etiam eleifend scelerisque nunc a scelerisque. Nulla ipsum diam, lobortis in ipsum et, ullamcorper interdum magna.[/bg][/bg][/column][/row][/bg]

[center][bg=transparent; margin: auto; color: #75492f; font-family: Karla; text-transform: uppercase; border-radius: 5px; font-size: 9px;][B]coded by incandescent[/B][/bg][/center]
Code:
[bg=transparent; margin: auto; background-color: #cda77d; width: 700px; height: 400px; border-radius: 5px; border-style: solid; border-color:#ba8950; border-width: 5px;][row][column=span3][comment]

(づ ◕‿◕ )づ  sidebar image below!

[/comment][bg=transparent; margin: auto; background: url('https://i.pinimg.com/originals/62/dd/52/62dd520fb09a28deb4cc9309fea9dab6.jpg'); height: 380px; background-size: cover; border-radius: 5px;][/bg][/column][column=span5][bg=transparent; margin: auto; border-radius: 5px; border-color: #ba8950; border-size: 10px; border-style: solid; background-color: #ba8950; height: 40px; font-family: Karla;][bg=transparent; margin: auto; color: #75492f; letter-spacing: 2px; text-transform: uppercase;][comment]

(つ≧▽≦)つ    name goes here!

[/comment][B]name.[/B][/bg][/bg]
[bg=transparent; background-color: #ba8950; margin: auto; height: 288px; border-radius: 5px;  overflow: hidden;][bg=transparent; width: 105%; height: 288px; position: relative; bottom: 10px; right: 11px; overflow-y: scroll; overflow-x: hidden;][bg=transparent; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]

(⊃。•́‿•̀。)⊃     first section starts here!

[/comment][B]basics.[/B][/bg][bg=transparent; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.[/bg][bg=transparent; position: sticky; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]

(づ ◕‿◕ )づ  second section starts here!

[/comment][B]visage.[/B][/bg][bg=transparent; position: sticky; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.[/bg][bg=transparent; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]

(っಠ‿ಠ)っ   third section starts here!

[/comment][B]persona.[/B][/bg][bg=transparent; position: sticky; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B]- positive traits :
[I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B]- negative traits :
[I]trait[/I][/B] : description.
[B][I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B][I]- likes[/I][/B]  :  info.
[B][I]- dislikes[/I][/B]  :  info.[/bg][bg=transparent; position: sticky; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px; text-align: justify; text-justify: inter-word;][comment]

(づ◡﹏◡)づ    fourth section starts here!

[/comment][B]archive.[/B][/bg][bg=transparent; position: sticky; margin: auto; font-family: Karla; color: #75492f;][B][I]title[/I][/B]  :  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium ligula enim, vel finibus lorem interdum quis. Suspendisse viverra lectus tortor. Nam dui orci, hendrerit quis risus quis, placerat mattis augue. Phasellus in felis orci. Donec in ligula nisl. Sed at consectetur velit, ut placerat velit. Sed tristique interdum dui, sit amet euismod nunc mollis vel. Nulla facilisi. Praesent a elit neque. Vivamus in scelerisque metus. Maecenas in libero bibendum, feugiat leo in, auctor metus. Morbi vulputate libero sit amet ligula feugiat, non facilisis eros tempus. Fusce blandit risus enim, in consequat libero commodo nec. Proin pretium velit vitae lorem scelerisque mollis. Etiam eleifend scelerisque nunc a scelerisque. Nulla ipsum diam, lobortis in ipsum et, ullamcorper interdum magna.[/bg][/bg][/bg][/column][/row][/bg]

[center][bg=transparent; margin: auto; color: #75492f; font-family: Karla; text-transform: uppercase; border-radius: 5px; font-size: 9px;][B]coded by incandescent[/B][/bg][/center]
Code:
[border=5px; margin: auto; background-color: #cda77d; width: 700px; height: 400px; border-radius: 5px; border-style: solid; border-color:#ba8950; display: flex; align-items: center; justify-content: space-between;][border=0px; width: 35%; height: 380px; background: url('https://i.pinimg.com/originals/62/dd/52/62dd520fb09a28deb4cc9309fea9dab6.jpg'); background-size: cover; border-radius: 5px;][/border][border=0px; width: 58%; height: 380px;][border=0px; width: 100%; height: 40px; background-color: #ba8950; position: relative; bottom: 10px; right: 10px; border-radius: 5px; display: flex; align-items: center;][border=0px; text-transform: uppercase; font-size: 25px; font-family: Times New Roman; letter-spacing: 3px; color: #75492f; font-weight: bold;]firstname lastname.[/border][/border][border=0px; width: 100%; height: 310px; background-color: #ba8950; position: relative; right: 10px; border-radius: 5px; overflow: hidden;][border=0px; height: 310px; width: 105%; position: relative; bottom: 10px; right: 10px; overflow-y: scroll; overflow-x: hidden; font-family: Times New Roman; color: #75492f; text-align: justify;][border=0px; margin: auto; background-color: #75492f; color: #ba8950; font-family: Times New Roman; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][B]basics.[/B][/border][border=0px; font-family: Times New Roman; color: #75492f; text-align: justify;][comment]


(づ ◕‿◕ )づ  first section starts here!


[/comment][B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.[/border][border=0px; position: sticky; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]


(づ ◕‿◕ )づ  second section starts here!


[/comment][B]visage.[/B][/border][border=0px; position: sticky; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.[/border][border=0px; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]


(っಠ‿ಠ)っ   third section starts here!


[/comment][B]persona.[/B][/border][border=0px; text-align: justify;][B]- positive traits :
[I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B]- negative traits :
[I]trait[/I][/B] : description.
[B][I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B][I]- likes[/I][/B]  :  info.
[B][I]- dislikes[/I][/B]  :  info.[/border][border=0px; position: sticky; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px; text-align: justify; text-justify: inter-word;][comment]


(づ◡﹏◡)づ    fourth section starts here!


[/comment][B]archive.[/B][/border][border=0px; text-align: justify;][B][I]title[/I][/B]  :  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium ligula enim, vel finibus lorem interdum quis. Suspendisse viverra lectus tortor. Nam dui orci, hendrerit quis risus quis, placerat mattis augue. Phasellus in felis orci. Donec in ligula nisl. Sed at consectetur velit, ut placerat velit. Sed tristique interdum dui, sit amet euismod nunc mollis vel. Nulla facilisi. Praesent a elit neque. Vivamus in scelerisque metus. Maecenas in libero bibendum, feugiat leo in, auctor metus. Morbi vulputate libero sit amet ligula feugiat, non facilisis eros tempus. Fusce blandit risus enim, in consequat libero commodo nec. Proin pretium velit vitae lorem scelerisque mollis. Etiam eleifend scelerisque nunc a scelerisque. Nulla ipsum diam, lobortis in ipsum et, ullamcorper interdum magna.[/border][/border][/border][/border][/border][center][border=0px; margin: auto; color: #75492f; font-size: 9px; font-family: Times New Roman; letter-spacing: 3px;][B]coded by incandescent[/B][/border][/center]
 
Last edited:

character post no. 1
i was thinking of making an in character post insp. by pantone and here's what i came up with but pls ignore the fact that it looks pretty much exactly like the first code. i wanted to do a hidden scrollbar but when i was adjusting the width i noticed that the scrollbar reminded me of tumblr so i kept it like how it is lol

once again, i'm including the colors in the post below for ease, feel free to change them with ctrl + f. just a note that it'll look a little wonky while ur editing it but it's fine once you're out of editing mode.

bg pic creds to chillcrafting on tumblr


name.
mood : idk
location : idk
outfit : idk
tags : idk
Thought if I was alone then maybe I could recover, To write it away or cry it away
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida dignissim enim et interdum. Donec pellentesque lobortis erat, id feugiat magna gravida nec. Nunc quis venenatis tellus. Sed euismod leo molestie, vulputate mauris a, blandit orci. In hac habitasse platea dictumst. Nunc maximus sagittis pharetra. Phasellus in odio est. Nunc consequat congue erat, ac convallis diam. Integer elementum, augue id feugiat aliquet, risus risus ultricies magna, eget fermentum erat arcu et leo.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pellentesque est vel risus gravida, quis vestibulum lectus molestie. Mauris augue enim, laoreet in tempus in, dignissim vitae felis. Sed et orci diam. Curabitur venenatis lectus eget dolor porta, non aliquam orci ornare. Duis laoreet orci non urna sagittis hendrerit. Ut interdum commodo tempor. Etiam vel nisl consectetur, pharetra ante eu, convallis metus.

Integer vel mi commodo, elementum tortor eget, tincidunt orci. Pellentesque id augue risus. Donec commodo quam nec erat consequat ornare. Vestibulum laoreet imperdiet dapibus. Vivamus eros felis, malesuada vel vulputate facilisis, finibus a nisi. Integer consectetur efficitur dapibus. Praesent congue eleifend leo vitae accumsan. Curabitur vel mauris sollicitudin, interdum urna quis, auctor sem. Cras ut nunc eget orci malesuada pretium ac sit amet augue. Phasellus eleifend scelerisque nulla quis tempor. Donec ultricies dolor ut felis semper imperdiet. Curabitur sed convallis arcu.

coded by incandescent


Code:
[bg=transparent; margin: auto; height: 30px;][/bg]
[bg=transparent; margin: auto; height: 400px; max-width: 700px; background-color: #4a5859; border-style: solid; border-width: 10px; border-color: #c0bcb5;][row][column=span3][comment]


** sidebar pic below


[/comment][bg=transparent; height: 225px; background-size: cover; background: url('https://66.media.tumblr.com/903aa6fe81995ca75539c82c2a261480/tumblr_p1y80pOSJb1ujygkoo2_250.png'); border-style: solid; border-radius: 0px; border-width: 3px; border-color: #DADADA;][/bg][bg=transparent; height: 124px; background-color: #F9F9F9; border-style: solid; border-radius: 0px; border-width: 3px; border-color: #F9F9F9; overflow: hidden;][comment]


** sidebar name + char info below


[/comment][bg=transparent; color: #9C9C9C; position: relative; bottom: 20px; text-transform: uppercase; right: 10px;][SIZE=6][b]name.[/b][/SIZE][/bg][bg=transparent; color: #9C9C9C; text-transform: lowercase; position: relative; bottom: 40px; right: 10px; overflow-y: scroll; height: 124px; width: 250px;]mood : idk
location : idk
outfit : idk
tags : idk[/bg][/bg][/column][column=span5][bg=transparent; height: 30px; background-color: #F9F9F9; border-style: solid; border-radius: 0px; border-width: 3px; border-color: #DADADA;][comment]


** music note w/ youtube url below


[/comment][url=https://www.youtube.com/watch?v=S0qrinhNnOM][fa]fas fa-music fa-2x[/fa][/url][comment]


** lyrics below, try to keep them to 2 lines unless ur comfortable with adjusting the position and all


[/comment][bg=transparent; color: #9C9C9C; position: relative; bottom: 49px; left: 25px; text-transform: lowercase; font-size: 12px;]Thought if I was alone then maybe I could recover, To write it away or cry it away[/bg][bg=transparent; background-color: #F9F9F9; border-style: solid; border-radius: 0px; border-width: 3px; height: 305px; border-color: #DADADA; overflow: hidden; width: 100%; position: relative; right: 13px; bottom: 39px;][bg=transparent; height: 305px; overflow-y: scroll; overflow-x: hidden; width: 410px; position: relative; bottom: 10px; right: 10px; color: #9C9C9C; text-align: justify;][comment]


** your post starts here


[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida dignissim enim et interdum. Donec pellentesque lobortis erat, id feugiat magna gravida nec. Nunc quis venenatis tellus. Sed euismod leo molestie, vulputate mauris a, blandit orci. In hac habitasse platea dictumst. Nunc maximus sagittis pharetra. Phasellus in odio est. Nunc consequat congue erat, ac convallis diam. Integer elementum, augue id feugiat aliquet, risus risus ultricies magna, eget fermentum erat arcu et leo.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pellentesque est vel risus gravida, quis vestibulum lectus molestie. Mauris augue enim, laoreet in tempus in, dignissim vitae felis. Sed et orci diam. Curabitur venenatis lectus eget dolor porta, non aliquam orci ornare. Duis laoreet orci non urna sagittis hendrerit. Ut interdum commodo tempor. Etiam vel nisl consectetur, pharetra ante eu, convallis metus.

Integer vel mi commodo, elementum tortor eget, tincidunt orci. Pellentesque id augue risus. Donec commodo quam nec erat consequat ornare. Vestibulum laoreet imperdiet dapibus. Vivamus eros felis, malesuada vel vulputate facilisis, finibus a nisi. Integer consectetur efficitur dapibus. Praesent congue eleifend leo vitae accumsan. Curabitur vel mauris sollicitudin, interdum urna quis, auctor sem. Cras ut nunc eget orci malesuada pretium ac sit amet augue. Phasellus eleifend scelerisque nulla quis tempor. Donec ultricies dolor ut felis semper imperdiet. Curabitur sed convallis arcu. [/bg][/bg][/bg][/column][/row][/bg]

[center][bg=transparent; margin: auto; color: #4a5859; text-transform: uppercase; border-radius: 5px; font-size: 9px; letter-spacing: 3px;][B]coded by incandescent[/B][/bg][/center]
[bg=transparent; margin: auto; height: 30px;][/bg]
 
colors used:

post border: #c0bcb5

post bg: #4a5859

sidebar img border + text borders: #DADADA

sidebar txt and main txt bg: #F9F9F9


i used this website to gather the colors from my sidebar pic
 

character post no. 2
another reeally simple in character post : ) idk how i feel about the colors but i've been trying to adjust them for a while and this was the best i could do lol, but feel free to change them. the sidebar text comes w/ a hidden scroll if you write a lot

colors used below, bg pic creds to chillcrafting on tumblr



location?
idk.
interactions?
idk.
mood?
idk.
outfit?
idk.
firstname lastname.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel mollis ante, quis vehicula nulla. Ut laoreet est quam, nec faucibus ipsum eleifend quis. Nam luctus sapien id ipsum eleifend viverra. Curabitur consequat purus sollicitudin velit faucibus maximus. Maecenas luctus ut turpis a molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta pretium enim, ut euismod est convallis in. Curabitur vitae sodales justo. Phasellus et leo augue. Quisque maximus a justo et imperdiet. Sed pellentesque mattis nisl at auctor. Vivamus ut ligula id diam feugiat hendrerit eu sit amet metus. Sed a iaculis mi. Pellentesque semper maximus quam, id lacinia tellus scelerisque eget. Ut ut lobortis nisi. Donec vitae mi dui.

Nulla vitae ligula at ex maximus vulputate. Suspendisse consectetur elit leo. Nunc et condimentum dolor, sit amet efficitur neque. Nam varius magna ut eleifend accumsan. Aliquam egestas justo eu magna sodales bibendum. Praesent finibus sollicitudin augue eget volutpat. In non urna id libero sodales porta.

Ut ornare urna vitae porta porttitor. Nam risus tortor, laoreet a nibh sed, congue euismod nibh. In et sodales nisl. Aenean sed auctor purus. Vivamus et nisi sed ipsum egestas semper id eget arcu. Nulla id nisi at ex elementum pellentesque vel a purus. Nam ut mauris tincidunt, faucibus nulla et, ullamcorper urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam luctus ex at sagittis dignissim. Suspendisse volutpat leo at malesuada molestie.
put some kinda quote here maybe
coded by incandescent


Code:
[bg=transparent; margin: auto; height: 30px;][/bg]
[bg=transparent; margin: auto; border-radius: 0px; border-style: solid; border-color: #12100f ; border-size: 2px; max-width: 600px; height: 302px; background-color: #3b3e3a ;][row][column=span2][comment]


sidebar pic is here
vv


[/comment][bg=transparent; height: 85px; background: url('https://66.media.tumblr.com/89c656e4fc6a98e3726b6caaae55833d/tumblr_pwtd22eSTJ1xoilo0o8_250.png'); background-size: cover; border-radius: 0px; border-style: solid; border-color: #12100f ; border-size: 2px;][/bg][bg=transparent; height: 173px; background-color: #12100f ; position: relative; top: 8px; overflow: hidden;][bg=transparent; color: #ab8d7b; font-size: 12px; overflow-y: scroll; overflow-x: hidden; height: 173px; position: relative; bottom: 10px; width: 125px;][comment]


sidebar txt starts here
- includes a hidden scroll if you write enough


[/comment][b]location?[/b]
idk.
[b]interactions?[/b]
idk.
[b]mood?[/b]
idk.
[b]outfit?[/b]
idk.[/bg][/bg][/column][column=span6][bg=transparent; height: 8px; background-color: #12100f ;][comment]


name at the top starts here


[/comment][bg=transparent; margin: auto; position: relative; bottom: 19px; width: 100%; height: 10px; letter-spacing: 5px; text-transform: uppercase; text-align: center; color: #ab8d7b;][b]firstname lastname.[/b][/bg][/bg][bg=transparent; height: 206px; background-color: #ab8d7b ; border-radius: 0px; border-style: solid; border-color: #12100f ; border-size: 2px; position: relative; top: 8px; overflow: hidden;][comment]


main post text starts here


[/comment][bg=transparent; width: 420px; height: 206px; overflow-y: scroll; overflow-x: hidden; position: relative; bottom: 10px; text-align: justify; font-size: 12px; color: #12100f;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel mollis ante, quis vehicula nulla. Ut laoreet est quam, nec faucibus ipsum eleifend quis. Nam luctus sapien id ipsum eleifend viverra. Curabitur consequat purus sollicitudin velit faucibus maximus. Maecenas luctus ut turpis a molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta pretium enim, ut euismod est convallis in. Curabitur vitae sodales justo. Phasellus et leo augue. Quisque maximus a justo et imperdiet. Sed pellentesque mattis nisl at auctor. Vivamus ut ligula id diam feugiat hendrerit eu sit amet metus. Sed a iaculis mi. Pellentesque semper maximus quam, id lacinia tellus scelerisque eget. Ut ut lobortis nisi. Donec vitae mi dui.

Nulla vitae ligula at ex maximus vulputate. Suspendisse consectetur elit leo. Nunc et condimentum dolor, sit amet efficitur neque. Nam varius magna ut eleifend accumsan. Aliquam egestas justo eu magna sodales bibendum. Praesent finibus sollicitudin augue eget volutpat. In non urna id libero sodales porta.

Ut ornare urna vitae porta porttitor. Nam risus tortor, laoreet a nibh sed, congue euismod nibh. In et sodales nisl. Aenean sed auctor purus. Vivamus et nisi sed ipsum egestas semper id eget arcu. Nulla id nisi at ex elementum pellentesque vel a purus. Nam ut mauris tincidunt, faucibus nulla et, ullamcorper urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam luctus ex at sagittis dignissim. Suspendisse volutpat leo at malesuada molestie.[/bg][/bg][bg=transparent; height: 8px; position: relative; top: 16px; background-color: #12100f ;][comment]


bottom quote txt starts here


[/comment][bg=transparent; margin: auto; position: relative; bottom: 17px; width: 100%; height: 30px; letter-spacing: 2px; color: #ab8d7b; font-size: 12px;][b]put some kinda quote here maybe[/b][/bg][/bg][/column][/row][/bg]
[center][bg=transparent; margin: auto; color: #12100f; text-transform: uppercase; border-radius: 5px; font-size: 9px; letter-spacing: 3px;][B]coded by incandescent[/B][/bg][/center]
[bg=transparent; margin: auto; height: 30px;][/bg]
 
Last edited:
colors used:

borders + sidebar and main top and bottom bars bg + main text: #12100f

post bg: #3b3e3a

main txt bg + sidebar txt: #ab8d7b


i used this website to gather the colors from my sidebar pic
 

character post no. 3
i was playing mc and i thought of making a character post insp by my minecraft headers in this thread so here's this cute thing, middle sidebar comes w a hidden scroll for tags and stuff. will also look wonky while you're editing it but it's fine when you have it saved

colors used below, bg pic creds to halcyoncraft on tumblr








- location.
info.
- interactions.
info.
- mood.
info.
- outfit.
info.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi libero, pretium vitae est at, euismod suscipit velit. Suspendisse venenatis nisi ut erat accumsan, vestibulum pharetra purus hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur ultricies maximus consequat. Fusce eu aliquet arcu. Etiam ante nunc, tempus non congue vitae, porttitor eget nulla. In euismod massa lorem, et porttitor massa ullamcorper consectetur. Suspendisse interdum arcu eu turpis aliquam semper. Vestibulum at malesuada diam. Proin nisi nisi, efficitur ut sapien eu, viverra gravida lectus. Donec eget ex ac mi consectetur vulputate in vel justo.

Sed bibendum cursus tortor, a ullamcorper orci laoreet non. Praesent vel lacus varius ipsum lacinia tempor. Cras nulla lacus, consequat in vestibulum sed, sagittis bibendum libero. In et ex pretium, ornare ante ut, pellentesque nulla. Vivamus magna magna, sollicitudin et hendrerit et, aliquet vel mi. Donec tempor quam ut ultricies fermentum. Vestibulum porttitor diam at mi placerat efficitur. Nulla scelerisque facilisis lectus, fermentum luctus enim aliquet vitae. Ut pulvinar sodales scelerisque. Pellentesque porttitor purus eu est auctor pulvinar. Vestibulum non ipsum sapien. Phasellus arcu dui, molestie eget elit sit amet, bibendum egestas metus. Donec fringilla libero libero, sit amet porta eros aliquet sit amet. Quisque finibus, nisl sed sollicitudin faucibus, ipsum eros lobortis lorem, vel bibendum enim nunc vitae quam.

Integer gravida augue id risus maximus consectetur. Integer condimentum bibendum eleifend. Duis et urna nec felis dictum malesuada nec eu enim. Suspendisse nec libero mollis, pulvinar lorem ut, blandit ipsum. Praesent maximus ante non mi tincidunt aliquam. Aenean non blandit dui. Proin imperdiet lacus interdum, maximus odio egestas, pharetra quam. Morbi semper pellentesque tempor. Vivamus ultricies nibh non erat rhoncus, et sodales felis luctus. Vestibulum at bibendum nunc. Donec eget diam congue, porta massa scelerisque, elementum mauris. Proin sed tellus quis tortor tristique sagittis et vel sapien. Sed interdum, odio sed vulputate finibus, diam nisi condimentum dolor, placerat feugiat neque arcu sed felis. Nunc varius dui et vulputate ullamcorper. Aenean facilisis cursus dapibus.
firstname lastname
coded by incandescent


Code:
[bg=transparent; margin: auto; height: 30px;][/bg]
[row][bg=transparent; margin: auto; max-width: 800px; height: 400px;][column=span2][comment]


** first img square starts here


[/comment][bg=transparent; margin: auto; background-size: cover; background: url('https://66.media.tumblr.com/519478cf507ce6ed7821ae1797833463/3e122ffd083b6bf3-0a/s250x400/bffc03d654d566ee8c9d4a134949a0b460075de5.gifv'); background-size: cover; height: 104px; border-width: 5px; border-radius: 0px; border-style: solid; border-color: #d3a743;][/bg][comment]


** middle square w; hidden sidebar scroll text starts here


[/comment]
[bg=transparent; margin: auto; background-color: #f1d646; background-size: cover; height: 105px; border-width: 5px; border-radius: 0px; border-style: solid; border-color: #d3a743; position: relative; bottom: 12px; overflow: hidden;][bg=transparent; height: 104px; overflow-y: scroll; overflow-x: hidden; width: 165px; position: relative; right: 4px; bottom: 12px; font-size: 14px; color: #9f8747;]

[center][color=#9f8747][fa]far fa-flower-tulip fa-2x[/fa][/color][/center]


[b]-  location.[/b]
info.
[b]-  interactions.[/b]
info.
[b]-  mood.[/b]
info.
[b]-  outfit.[/b]
info.
[/bg][/bg][comment]


** second img square starts here


[/comment]
[bg=transparent; margin: auto; background-size: cover; background: url('https://66.media.tumblr.com/36228aca4f9c69a6bdb864ed0286c42e/3e122ffd083b6bf3-60/s250x400/32d058b2e4c998b3f1c4dcb754e17a1946d0ceb2.gifv'); height: 104px; border-width: 5px; border-radius: 0px; border-style: solid; border-color: #d3a743; position: relative; bottom: 24px;][/bg][/column][column=span5][comment]


** if you feel like changing it, the main txt bg is right here


[/comment][bg=transparent; margin: auto; background: url('https://66.media.tumblr.com/f14f8d314fd87eb5e556165d4223cabf/tumblr_pv234cLFdF1y7ei2ho3_1280.png'); background-size: cover; height: 400px; border-width: 5px; border-radius: 0px; border-style: solid; border-color: #d3a743;][bg=transparent; height: 20px; margin: auto; text-align: center; position: relative; bottom: 11px;][color=#d3a743][fa]fas fa-heart fa-2x[/fa][/color][/bg][bg=transparent; margin: auto; background-color: #f1d646; border-width: 3px; border-radius: 0px; border-style: solid; border-color: #d3a743; width: 70%; height: 300px; position: relative; bottom: 2px; overflow: hidden;][comment]


** main txt starts here


[/comment][bg=transparent; margin: auto; height: 300px; overflow-y: scroll; overflow-x: hidden; position: relative; bottom: 10px; width: 323px; text-align: justify; font-size: 12px; color: #9f8747;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi libero, pretium vitae est at, euismod suscipit velit. Suspendisse venenatis nisi ut erat accumsan, vestibulum pharetra purus hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur ultricies maximus consequat. Fusce eu aliquet arcu. Etiam ante nunc, tempus non congue vitae, porttitor eget nulla. In euismod massa lorem, et porttitor massa ullamcorper consectetur. Suspendisse interdum arcu eu turpis aliquam semper. Vestibulum at malesuada diam. Proin nisi nisi, efficitur ut sapien eu, viverra gravida lectus. Donec eget ex ac mi consectetur vulputate in vel justo.

Sed bibendum cursus tortor, a ullamcorper orci laoreet non. Praesent vel lacus varius ipsum lacinia tempor. Cras nulla lacus, consequat in vestibulum sed, sagittis bibendum libero. In et ex pretium, ornare ante ut, pellentesque nulla. Vivamus magna magna, sollicitudin et hendrerit et, aliquet vel mi. Donec tempor quam ut ultricies fermentum. Vestibulum porttitor diam at mi placerat efficitur. Nulla scelerisque facilisis lectus, fermentum luctus enim aliquet vitae. Ut pulvinar sodales scelerisque. Pellentesque porttitor purus eu est auctor pulvinar. Vestibulum non ipsum sapien. Phasellus arcu dui, molestie eget elit sit amet, bibendum egestas metus. Donec fringilla libero libero, sit amet porta eros aliquet sit amet. Quisque finibus, nisl sed sollicitudin faucibus, ipsum eros lobortis lorem, vel bibendum enim nunc vitae quam.

Integer gravida augue id risus maximus consectetur. Integer condimentum bibendum eleifend. Duis et urna nec felis dictum malesuada nec eu enim. Suspendisse nec libero mollis, pulvinar lorem ut, blandit ipsum. Praesent maximus ante non mi tincidunt aliquam. Aenean non blandit dui. Proin imperdiet lacus interdum, maximus odio egestas, pharetra quam. Morbi semper pellentesque tempor. Vivamus ultricies nibh non erat rhoncus, et sodales felis luctus. Vestibulum at bibendum nunc. Donec eget diam congue, porta massa scelerisque, elementum mauris. Proin sed tellus quis tortor tristique sagittis et vel sapien. Sed interdum, odio sed vulputate finibus, diam nisi condimentum dolor, placerat feugiat neque arcu sed felis. Nunc varius dui et vulputate ullamcorper. Aenean facilisis cursus dapibus.[/bg][/bg][bg=transparent; height: 20px; margin: auto; text-align: center; position: relative; bottom: 5px;][color=#d3a743][fa]fas fa-heart-broken fa-2x[/fa][/color][/bg][/bg][/column][column=span1][bg=transparent; height: 400px; background-color: #f1d646; border-width: 5px; border-radius: 0px; border-style: solid; border-color: #d3a743;][comment]


** character name goes here, change the letter spacing depending on the length of their name


[/comment][bg=transparent; writing-mode: vertical-rl; text-orientation: sideways; color: #d3a743; text-transform: uppercase; font-size: 25px; letter-spacing: 6px; position: relative; right: 3px;][B]firstname lastname[/B][/bg][/bg][/column][/bg][/row]
[center][bg=transparent; margin: auto; color: #12100f; text-transform: uppercase; border-radius: 5px; font-size: 9px; letter-spacing: 3px;][B]coded by incandescent[/B][/bg][/center]
[bg=transparent; margin: auto; height: 30px;][/bg]

edit 06.07.2020 : fixed smth with the background size
edit 07.02.2020 : lmfao just got to fixing the weird white line showing cause of the scroll
 
Last edited:
colors used:

borders + hearts + name txt: #d3a743

post and sidebars bg: #f1d646

left sidebar txt and main txt: #9f8747

i used this website to gather the colors from the bg pic
 
ok this is iconic!!!!!!! king shit right here

if we're not supposed to post here pls tell me oop-
 

placeholder no. 1
i wanted to make a placeholder that looks like the iphone music notif and i came up with this simple lil thing but it was such a pain to try to make gjkahglas, i wouldn't recommend messing around w/ it too much cause the code itself is kind of messy and there's probably a better way to do it than i actually did

colors used below, bg pic creds to halcyoncraft on tumblr


2:23
-0:55
placeholder

firstname lastname - the role

"quotey quote quote quote."
_________________

.


_____________



Code:
[bg=transparent; height: 130px;][/bg]
[bg=transparent; height: 130px;][/bg]
[bg=transparent; margin: auto; width: 380px; height: 10px; position: relative; top: 158px;][row][column=span4][bg=transparent; text-align: left; color: #F0F0F0; font-size: 13px;]2:23[/bg][/column][column=span4][bg=transparent; text-align: right; color: #F0F0F0; font-size: 13px;]-0:55[/bg][/column][/row][/bg]
[bg=transparent; margin: auto; width: 380px; height: 10px; position: relative; top: 128px;][row][column=span3][/column][/row][/bg]
[bg=transparent; margin: auto; width: 380px; height: 200px; background-color: #494949; border-radius: 10px;][row][column=span2][comment]


top left image goes right here


[/comment][bg=transparent; height: 60px; background: url('https://66.media.tumblr.com/0a4643ed8e71656fd6b543e3dc3453b9/tumblr_ov8xjq0uUs1qc5yqfo1_400.jpg'); background-size: cover; border-radius: 5px;][/bg][/column][column=span6][comment]


"placeholder" text


[/comment][bg=transparent; margin: auto; height: 10px; color: #F0F0F0; letter-spacing: 2px; position: relative; font-size: 11px; bottom: 5px;]placeholder[/bg][comment]


name text


[/comment]
[bg=transparent; margin: auto; height: 10px; color: #F0F0F0; letter-spacing: 2px; position: relative; bottom: 35px; font-size: 13px;][b]firstname lastname - the role[/b][/bg][comment]


quote text


[/comment]
[bg=transparent; margin: auto; height: 10px; color: #F0F0F0; letter-spacing: 2px; position: relative; bottom: 62px; font-size: 12px;]"quotey quote quote quote."[/bg][/column][/row][/bg]
[bg=transparent; height: 5px; width: 380px; text-align: center; margin: auto; position: relative; bottom: 165px; font-family: Helvetica; font-size: 37px;][b][COLOR=#F0F0F0]_____________[/COLOR][color=#BFBFBF]____[/color][/b][/bg]
[bg=transparent; height: 5px; width: 380px; text-align: center; margin: auto; position: relative; bottom: 229px; left: 88px; font-family: Roboto; font-size: 54px;][b][color=#F0F0F0].[/color][/b][/bg]
[bg=transparent; height: 5px; width: 380px; text-align: center; margin: auto; position: relative; bottom: 176px; letter-spacing: 100px; left: 50px;][b][COLOR=#F0F0F0][fa]fas fa-angle-double-left[/fa][fa]fas fa-play[/fa][fa]fas fa-angle-double-right[/fa][/COLOR][/b][/bg]
[bg=transparent; height: 5px; width: 380px; text-align: center; margin: auto; position: relative; bottom: 228px; font-family: Helvetica; font-size: 37px;][b][COLOR=#F0F0F0]_____________[/COLOR][/b][/bg]

[bg=transparent; margin: auto; width: 380px; height: 10px; position: relative; bottom: 277px;][row][column=span4][bg=transparent; text-align: left; color: #F0F0F0; font-size: 13px; position: relative;][fa]fas fa-volume-down[/fa][/bg][/column][column=span4][bg=transparent; text-align: right; color: #F0F0F0; font-size: 13px;][fa]fas fa-volume-up[/fa][/bg][/column][/row][column=span4][bg=transparent; text-align: right; color: #F0F0F0; font-size: 13px;][/bg][/column][/bg]
 
Last edited:
colors used:

bg color: #494949

everything else but the right half of the time bar: #F0F0F0

right half of the time bar: #BFBFBF

 

character sheet no. 2
here's a cs that i made for my character in my new rp group just now ( you should definitely apply ;) )

colors used below, bg pic creds to chillcrafting on tumblr

I'll know the way back if you know the way,
basics.

title : info
title : info
title : info
title : info
title : info
title : info
title : info
title : info

visage.

title : info
title : info
title : info
title : info
title : info
title : info
title : info
title : info

psyche.

title : info
title : info
title : info
title : info
title : info
title : info
title : info
title : info


other.

title : info
title : info
title : info
title : info
title : info
title : info
title : info
title : info
But if you are, I am quite alright hiding today.
coded by incandescent


Code:
[bg=transparent; margin: auto; height: 30px;][/bg]
[comment]


** top lyric goes here


[/comment][bg=transparent; margin: auto; width: 750px; height: 30px; color: #ECECEC; letter-spacing: 5px; text-align: left; font-size: 13px; font-family: Times New Roman; position: relative; right: 11px; top: 10px; text-transform: lowercase;]I'll know the way back if you know the way,[/bg][bg=transparent; margin: auto; width: 750px; height: 400px; background-color: #BDBDBD; border-color: #9B9B9B; border-width: 3px; border-style: solid][row][column=span3][comment]


** left sidebar image goes here


[/comment][bg=transparent; margin: auto; height: 375px; background: url('https://images.squarespace-cdn.com/content/v1/57bfac9829687fe4f8dfdb7b/1511927326761-KSNI9TAECCFJVHGBB7WF/ke17ZwdGBToddI8pDm48kJVAHI5KKuViTeTTrHfZM-B7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0jG2lbcDYBOeMi4OFSYem8COGEz7DzEWZQrZtVNHvzugkKMnObkHUzb-_PYhc4orAg/IMG_4728-Edit.jpg'); background-size: cover; filter: grayscale(30%); border-color: #9B9B9B; border-size: 2px; border-style: solid;][/bg][/column][column=span3][bg=transparent; margin: auto; height: 375px; background-color: #DCDCDC; border-color: #9B9B9B; border-size: 2px; border-style: solid; overflow: hidden;][bg=transparent; height: 375px; overflow-y: scroll; overflow-x; hidden; text-align: justify; width: 262px; position: relative; bottom: 10px; right: 10px; color: #878787; font-family: Times New Roman;][comment]


** middle text below


[/comment][border=0px; padding: 4px; background-color: #7a88a4; color: #ECECEC; font-size: 20px; text-transform: uppercase; font-weight: bold; display: inline; letter-spacing: 3px;]basics.[/border]
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info

[border=0px; padding: 4px; background-color: #7a88a4; color: #ECECEC; font-size: 20px; text-transform: uppercase; font-weight: bold; display: inline; letter-spacing: 3px;]visage.[/border]
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info

[border=0px; padding: 4px; background-color: #7a88a4; color: #ECECEC; font-size: 20px; text-transform: uppercase; font-weight: bold; display: inline; letter-spacing: 3px;]psyche.[/border]
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info


[border=0px; padding: 4px; background-color: #7a88a4; color: #ECECEC; font-size: 20px; text-transform: uppercase; font-weight: bold; display: inline; letter-spacing: 3px;]other.[/border]
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info
[b]title[/b] : info[/bg][/bg][/column][column=span2][comment]


** right top image goes here


[/comment][bg=transparent; margin: auto; height: 100px; background: url('https://i.pinimg.com/564x/93/b5/a0/93b5a09945b3ee1c596b2fcd8e72ebb6.jpg'); background-size: cover; filter: grayscale(100%); border-color: #9B9B9B; border-size: 2px; border-style: solid; position: relative;][/bg][comment]


** right middle image goes here


[/comment][bg=transparent; margin: auto; height: 103px; background: url('https://i.pinimg.com/564x/57/4c/da/574cdad7db66e70deba7e4e78667cc91.jpg'); background-size: cover; filter: grayscale(100%); border-color: #9B9B9B; border-size: 2px; border-style: solid; position: relative; top: 10px;][/bg][comment]


** right bottom image goes here


[/comment][bg=transparent; margin: auto; height: 100px; background: url('https://i.pinimg.com/564x/07/e1/06/07e106314324f41dfe44a9217b8c3679.jpg'); background-size: cover; filter: grayscale(100%); border-color: #9B9B9B; border-size: 2px; border-style: solid; position: relative; top: 20px;][/bg][/column][/row][/bg][comment]


** right bottom image goes here


[/comment][bg=transparent; margin: auto; width: 750px; height: 30px; color: #ECECEC; letter-spacing: 5px; text-align: right; font-size: 13px; font-family: Times New Roman; position: relative; left: 15px; text-transform: lowercase;]But if you are, I am quite alright hiding today.[/bg][center][bg=transparent; margin: auto; color: #12100f; text-transform: uppercase; border-radius: 5px; font-size: 9px; letter-spacing: 3px;][B]coded by incandescent[/B][/bg][/center]
[bg=transparent; margin: auto; height: 30px;][/bg]
 
Last edited:
These are really nice. I'm hoping to use one in a character sheet (all credits to you ofc). Would that be fine?
 

character sheet no. 3
another cs i made for the same character lol, but i actually ended up using this one. each square is scrollable nd has headers. i think this is my favorite i've made so far aside from the minecraft one? kind of inspired by tumblr because i just started rping on there again and the codes are soooo nice

colors used below, bg pic creds to chillcrafting on tumblr









header example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia elementum mauris, eu pharetra velit mattis et. Donec viverra nisi id dapibus semper. Cras sapien eros, condimentum id venenatis sed, commodo non eros. Nulla sapien odio, faucibus sit amet risus non, vehicula tincidunt neque. Pellentesque placerat neque vitae ipsum volutpat blandit. Ut condimentum mi nec lorem tincidunt ultricies. Curabitur consectetur tellus a imperdiet lacinia. Quisque at nulla accumsan, placerat nulla euismod, lobortis neque. Maecenas at nibh placerat, facilisis elit et, dignissim urna. Cras eu ex efficitur, vulputate nisl eu, scelerisque enim.

Fusce vulputate mi sed sem congue, quis suscipit lacus interdum. Sed pharetra, tellus nec vulputate fringilla, urna dolor tristique quam, vulputate finibus augue velit at leo. Nam lobortis placerat leo ut accumsan. Curabitur convallis odio et sollicitudin ultrices. Nunc quis leo ligula. Sed nec facilisis ipsum. Cras quis tincidunt leo. Aenean rhoncus nisl porttitor, semper orci sed, eleifend ante. Aenean maximus tortor vel lectus varius aliquam. Phasellus accumsan tristique dictum. Praesent ut consequat tellus. Ut orci mi, viverra a iaculis nec, consectetur nec libero. In consectetur, lacus efficitur hendrerit ultrices, risus urna maximus velit, sit amet commodo tellus nibh et lorem. Praesent sollicitudin rutrum posuere. Nunc varius metus et nulla lobortis, luctus dapibus sapien rutrum. Donec vitae interdum massa, posuere euismod purus.


i'll know the way back
if you know the way,





header example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia elementum mauris, eu pharetra velit mattis et. Donec viverra nisi id dapibus semper. Cras sapien eros, condimentum id venenatis sed, commodo non eros. Nulla sapien odio, faucibus sit amet risus non, vehicula tincidunt neque. Pellentesque placerat neque vitae ipsum volutpat blandit. Ut condimentum mi nec lorem tincidunt ultricies. Curabitur consectetur tellus a imperdiet lacinia. Quisque at nulla accumsan, placerat nulla euismod, lobortis neque. Maecenas at nibh placerat, facilisis elit et, dignissim urna. Cras eu ex efficitur, vulputate nisl eu, scelerisque enim.

Fusce vulputate mi sed sem congue, quis suscipit lacus interdum. Sed pharetra, tellus nec vulputate fringilla, urna dolor tristique quam, vulputate finibus augue velit at leo. Nam lobortis placerat leo ut accumsan. Curabitur convallis odio et sollicitudin ultrices. Nunc quis leo ligula. Sed nec facilisis ipsum. Cras quis tincidunt leo. Aenean rhoncus nisl porttitor, semper orci sed, eleifend ante. Aenean maximus tortor vel lectus varius aliquam. Phasellus accumsan tristique dictum. Praesent ut consequat tellus. Ut orci mi, viverra a iaculis nec, consectetur nec libero. In consectetur, lacus efficitur hendrerit ultrices, risus urna maximus velit, sit amet commodo tellus nibh et lorem. Praesent sollicitudin rutrum posuere. Nunc varius metus et nulla lobortis, luctus dapibus sapien rutrum. Donec vitae interdum massa, posuere euismod purus.


but if you are, i'm
quite alright hiding today.





header example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia elementum mauris, eu pharetra velit mattis et. Donec viverra nisi id dapibus semper. Cras sapien eros, condimentum id venenatis sed, commodo non eros. Nulla sapien odio, faucibus sit amet risus non, vehicula tincidunt neque. Pellentesque placerat neque vitae ipsum volutpat blandit. Ut condimentum mi nec lorem tincidunt ultricies. Curabitur consectetur tellus a imperdiet lacinia. Quisque at nulla accumsan, placerat nulla euismod, lobortis neque. Maecenas at nibh placerat, facilisis elit et, dignissim urna. Cras eu ex efficitur, vulputate nisl eu, scelerisque enim.

Fusce vulputate mi sed sem congue, quis suscipit lacus interdum. Sed pharetra, tellus nec vulputate fringilla, urna dolor tristique quam, vulputate finibus augue velit at leo. Nam lobortis placerat leo ut accumsan. Curabitur convallis odio et sollicitudin ultrices. Nunc quis leo ligula. Sed nec facilisis ipsum. Cras quis tincidunt leo. Aenean rhoncus nisl porttitor, semper orci sed, eleifend ante. Aenean maximus tortor vel lectus varius aliquam. Phasellus accumsan tristique dictum. Praesent ut consequat tellus. Ut orci mi, viverra a iaculis nec, consectetur nec libero. In consectetur, lacus efficitur hendrerit ultrices, risus urna maximus velit, sit amet commodo tellus nibh et lorem. Praesent sollicitudin rutrum posuere. Nunc varius metus et nulla lobortis, luctus dapibus sapien rutrum. Donec vitae interdum massa, posuere euismod purus.









header example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia elementum mauris, eu pharetra velit mattis et. Donec viverra nisi id dapibus semper. Cras sapien eros, condimentum id venenatis sed, commodo non eros. Nulla sapien odio, faucibus sit amet risus non, vehicula tincidunt neque. Pellentesque placerat neque vitae ipsum volutpat blandit. Ut condimentum mi nec lorem tincidunt ultricies. Curabitur consectetur tellus a imperdiet lacinia. Quisque at nulla accumsan, placerat nulla euismod, lobortis neque. Maecenas at nibh placerat, facilisis elit et, dignissim urna. Cras eu ex efficitur, vulputate nisl eu, scelerisque enim.

Fusce vulputate mi sed sem congue, quis suscipit lacus interdum. Sed pharetra, tellus nec vulputate fringilla, urna dolor tristique quam, vulputate finibus augue velit at leo. Nam lobortis placerat leo ut accumsan. Curabitur convallis odio et sollicitudin ultrices. Nunc quis leo ligula. Sed nec facilisis ipsum. Cras quis tincidunt leo. Aenean rhoncus nisl porttitor, semper orci sed, eleifend ante. Aenean maximus tortor vel lectus varius aliquam. Phasellus accumsan tristique dictum. Praesent ut consequat tellus. Ut orci mi, viverra a iaculis nec, consectetur nec libero. In consectetur, lacus efficitur hendrerit ultrices, risus urna maximus velit, sit amet commodo tellus nibh et lorem. Praesent sollicitudin rutrum posuere. Nunc varius metus et nulla lobortis, luctus dapibus sapien rutrum. Donec vitae interdum massa, posuere euismod purus.


Code:
[bg=transparent; margin: auto; height: 30px;][/bg][bg=transparent; margin: auto; height: 400px; width: 500px; padding: 0px;][row][column=span4][comment]


** top left pic goes over here


[/comment][bg=transparent; height: 170px; width: 210px; border-width: 5px; border-style: solid; border-color: #B0BEA5; background: url('https://i.ibb.co/P45LyKb/imageedit-2-4678246202.jpg'); background-size: cover; position: relative; left: 5px; overflow: hidden;][bg=transparent; width: 230px; height: 150px; position: relative; right: 10px; overflow-y: scroll; overflow-x: hidden;]







[border=0px; display: inline-block; background-color: #B0BEA5; text-align: justify; font-size: 12px;]
[comment]


** this is an example of the header in the top left text
- you can insert multiple in one, just make sure to leave a space between the header and the text


[/comment][center][border=0px; display: inline; background-color: #758568; color: white; text-align: center;]header example.[/border][/center]

[color=#2B3126][comment]


** top left text starts over here


[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia elementum mauris, eu pharetra velit mattis et. Donec viverra nisi id dapibus semper. Cras sapien eros, condimentum id venenatis sed, commodo non eros. Nulla sapien odio, faucibus sit amet risus non, vehicula tincidunt neque. Pellentesque placerat neque vitae ipsum volutpat blandit. Ut condimentum mi nec lorem tincidunt ultricies. Curabitur consectetur tellus a imperdiet lacinia. Quisque at nulla accumsan, placerat nulla euismod, lobortis neque. Maecenas at nibh placerat, facilisis elit et, dignissim urna. Cras eu ex efficitur, vulputate nisl eu, scelerisque enim.

Fusce vulputate mi sed sem congue, quis suscipit lacus interdum. Sed pharetra, tellus nec vulputate fringilla, urna dolor tristique quam, vulputate finibus augue velit at leo. Nam lobortis placerat leo ut accumsan. Curabitur convallis odio et sollicitudin ultrices. Nunc quis leo ligula. Sed nec facilisis ipsum. Cras quis tincidunt leo. Aenean rhoncus nisl porttitor, semper orci sed, eleifend ante. Aenean maximus tortor vel lectus varius aliquam. Phasellus accumsan tristique dictum. Praesent ut consequat tellus. Ut orci mi, viverra a iaculis nec, consectetur nec libero. In consectetur, lacus efficitur hendrerit ultrices, risus urna maximus velit, sit amet commodo tellus nibh et lorem. Praesent sollicitudin rutrum posuere. Nunc varius metus et nulla lobortis, luctus dapibus sapien rutrum. Donec vitae interdum massa, posuere euismod purus.[/color][/border][/bg][/bg][/column][column=span4][bg=transparent; height: 180px; width: 220px; background-color: #758568; position: relative; right: 5px; overflow: hidden;][bg=transparent; width: 240px; height: 150px; position: relative; right: 10px; top: 5px; overflow-y: scroll; overflow-x: hidden;]

[bg=transparent; text-align: center; margin: auto; font-size: 12px; color: white; position: relative; bottom: 10px;][comment]


** top right quote starts here!
- try to stay at two lines, unless you're comfortable with adjusting the position and all


[/comment]i'll [b][color=#CBE0BC]know[/color][/b] the way back
if you know the [b][color=#CBE0BC]way[/color][/b],[/bg]



[border=2px; display: inline-block; background-color: #B0BEA5; text-align: justify; font-size: 12px;]
[center][border=0px; display: inline; background-color: #758568; color: white; text-align: center;][comment]


** top right header example


[/comment]header example.[/border][/center]

[color=#2B3126][comment]


top right text starts here


[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia elementum mauris, eu pharetra velit mattis et. Donec viverra nisi id dapibus semper. Cras sapien eros, condimentum id venenatis sed, commodo non eros. Nulla sapien odio, faucibus sit amet risus non, vehicula tincidunt neque. Pellentesque placerat neque vitae ipsum volutpat blandit. Ut condimentum mi nec lorem tincidunt ultricies. Curabitur consectetur tellus a imperdiet lacinia. Quisque at nulla accumsan, placerat nulla euismod, lobortis neque. Maecenas at nibh placerat, facilisis elit et, dignissim urna. Cras eu ex efficitur, vulputate nisl eu, scelerisque enim.

Fusce vulputate mi sed sem congue, quis suscipit lacus interdum. Sed pharetra, tellus nec vulputate fringilla, urna dolor tristique quam, vulputate finibus augue velit at leo. Nam lobortis placerat leo ut accumsan. Curabitur convallis odio et sollicitudin ultrices. Nunc quis leo ligula. Sed nec facilisis ipsum. Cras quis tincidunt leo. Aenean rhoncus nisl porttitor, semper orci sed, eleifend ante. Aenean maximus tortor vel lectus varius aliquam. Phasellus accumsan tristique dictum. Praesent ut consequat tellus. Ut orci mi, viverra a iaculis nec, consectetur nec libero. In consectetur, lacus efficitur hendrerit ultrices, risus urna maximus velit, sit amet commodo tellus nibh et lorem. Praesent sollicitudin rutrum posuere. Nunc varius metus et nulla lobortis, luctus dapibus sapien rutrum. Donec vitae interdum massa, posuere euismod purus.[/color][/border][/bg][/bg][/column][/row][row][column=span4][bg=transparent; height: 180px; width: 220px; background-color: #758568; position: relative; left: 5px;][bg=transparent; width: 240px; height: 150px; position: relative; right: 10px; top: 5px; overflow-y: scroll; overflow-x: hidden;]

[bg=transparent; text-align: center; margin: auto; font-size: 12px; color: white; position: relative; bottom: 10px;][comment]


** bottom left quote starts here
- same as before, try to keep at 2 lines unless you are ok with adjusting the position


[/comment]but if you are, i'm
quite alright hiding [b][color=#CBE0BC]today[/color][/b].[/bg]



[border=0px; display: inline-block; background-color: #B0BEA5; text-align: justify; font-size: 12px;]
[center][border=0px; display: inline; background-color: #758568; color: white; text-align: center;][comment]


** bottom left header over here


[/comment]header example.[/border][/center]

[color=#2B3126][comment]


** bottom left text


[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia elementum mauris, eu pharetra velit mattis et. Donec viverra nisi id dapibus semper. Cras sapien eros, condimentum id venenatis sed, commodo non eros. Nulla sapien odio, faucibus sit amet risus non, vehicula tincidunt neque. Pellentesque placerat neque vitae ipsum volutpat blandit. Ut condimentum mi nec lorem tincidunt ultricies. Curabitur consectetur tellus a imperdiet lacinia. Quisque at nulla accumsan, placerat nulla euismod, lobortis neque. Maecenas at nibh placerat, facilisis elit et, dignissim urna. Cras eu ex efficitur, vulputate nisl eu, scelerisque enim.

Fusce vulputate mi sed sem congue, quis suscipit lacus interdum. Sed pharetra, tellus nec vulputate fringilla, urna dolor tristique quam, vulputate finibus augue velit at leo. Nam lobortis placerat leo ut accumsan. Curabitur convallis odio et sollicitudin ultrices. Nunc quis leo ligula. Sed nec facilisis ipsum. Cras quis tincidunt leo. Aenean rhoncus nisl porttitor, semper orci sed, eleifend ante. Aenean maximus tortor vel lectus varius aliquam. Phasellus accumsan tristique dictum. Praesent ut consequat tellus. Ut orci mi, viverra a iaculis nec, consectetur nec libero. In consectetur, lacus efficitur hendrerit ultrices, risus urna maximus velit, sit amet commodo tellus nibh et lorem. Praesent sollicitudin rutrum posuere. Nunc varius metus et nulla lobortis, luctus dapibus sapien rutrum. Donec vitae interdum massa, posuere euismod purus.[/color][/border][/bg][/bg][/column][column=span4][comment]


** bottom right background image over here! replace [URL]https://i.ibb.co/bKhrvXS/imageedit-5-5325819954.png[/URL]


[/comment][bg=transparent; height: 170px; width: 210px; border-width: 5px; border-style: solid; border-color: #B0BEA5; background: url('https://i.ibb.co/bKhrvXS/imageedit-5-5325819954.png'); background-size: cover; position: relative; right: 5px; overflow: hidden;][bg=transparent; width: 230px; height: 150px; position: relative; right: 10px; overflow-y: scroll; overflow-x: hidden;]







[border=0px; display: inline-block; background-color: #B0BEA5; text-align: justify; font-size: 12px;]
[center][border=0px; display: inline; background-color: #758568; color: white; text-align: center;][comment]


** bottom right header over here


[/comment]header example.[/border][/center]

[color=#2B3126][comment]


** bottom right text over here


[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia elementum mauris, eu pharetra velit mattis et. Donec viverra nisi id dapibus semper. Cras sapien eros, condimentum id venenatis sed, commodo non eros. Nulla sapien odio, faucibus sit amet risus non, vehicula tincidunt neque. Pellentesque placerat neque vitae ipsum volutpat blandit. Ut condimentum mi nec lorem tincidunt ultricies. Curabitur consectetur tellus a imperdiet lacinia. Quisque at nulla accumsan, placerat nulla euismod, lobortis neque. Maecenas at nibh placerat, facilisis elit et, dignissim urna. Cras eu ex efficitur, vulputate nisl eu, scelerisque enim.

Fusce vulputate mi sed sem congue, quis suscipit lacus interdum. Sed pharetra, tellus nec vulputate fringilla, urna dolor tristique quam, vulputate finibus augue velit at leo. Nam lobortis placerat leo ut accumsan. Curabitur convallis odio et sollicitudin ultrices. Nunc quis leo ligula. Sed nec facilisis ipsum. Cras quis tincidunt leo. Aenean rhoncus nisl porttitor, semper orci sed, eleifend ante. Aenean maximus tortor vel lectus varius aliquam. Phasellus accumsan tristique dictum. Praesent ut consequat tellus. Ut orci mi, viverra a iaculis nec, consectetur nec libero. In consectetur, lacus efficitur hendrerit ultrices, risus urna maximus velit, sit amet commodo tellus nibh et lorem. Praesent sollicitudin rutrum posuere. Nunc varius metus et nulla lobortis, luctus dapibus sapien rutrum. Donec vitae interdum massa, posuere euismod purus.[/color][/border][/bg][/bg][/column][/row][row][/row][/bg]
[bg=transparent; margin: auto; height: 30px;][/bg]
 
Last edited:
colors used:

quote bold text: #CBE0BC

borders + text bg: #B0BEA5

header bg + top right and bottom left bg: #758568

main text color: #2B3126

i used this website to gather the colors from the pics
 

character post no. 4
i havent coded in a hot minute but here's another character post inspired by tumblr lol. picture on the left has a hidden scroll for the main text and the character info on the right is scrollable

colors used below, bg pic creds to babybeecraft on tumblr


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec nisl ut ligula consectetur tristique quis non quam. Cras facilisis mattis lectus ut interdum. Nam euismod massa risus, ac maximus ligula sodales a. Fusce eget tempus tellus. Nam convallis, augue nec tristique ullamcorper, ipsum nulla semper mi, non egestas enim felis quis metus. Ut euismod, nibh ut egestas scelerisque, metus odio fermentum metus, dapibus ornare quam turpis nec enim. Praesent eget elementum massa, ac vehicula ipsum. Ut varius lectus enim, in tristique nisl fermentum vitae. Fusce sit amet facilisis risus, eget aliquam urna. Etiam sit amet volutpat massa, at volutpat odio.

Aenean eu turpis turpis. Morbi eu suscipit augue. Donec eget iaculis purus, facilisis convallis purus. In lorem orci, tincidunt id nisl at, sodales bibendum ex. Aliquam et pulvinar tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent maximus ornare est ut pharetra. In arcu quam, accumsan aliquam neque rutrum, bibendum euismod metus. Ut et ante vehicula, laoreet lorem quis, interdum nunc. Fusce rhoncus leo vel consectetur venenatis. Nam eget massa non quam tempus vehicula. Cras sodales pretium ligula vitae hendrerit.


your mom
"mom mom mom mom."
this thing? scrollable.
location? idk.
outfit? idk.
interactions? idk.
any last words? screw u mom.
coded by incandescent


Code:
[bg=transparent; height: 40px;][/bg]
[bg=transparent; margin: auto; height: 400px; width: 600px;][row][column=span4][comment]


left pic goes here!


[/comment][bg=transparent; height: 380px; width: 100%; background: url(https://s.yimg.com/ny/api/res/1.2/tjje6Qy16GHoj1KFxsLwHw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTk2MA--/https://media.zenfs.com/en/who_what_wear_581/9a5d621235736998d35704264f44bd6d); background-size: cover; position: relative; border-radius: 20px 0px 0px 20px; overflow: hidden;][bg=transparent; width: 110%; height: 380px; position: relative; right: 10px; bottom: 10px; border-radius: 20px 0px 0px 20px; overflow-y: scroll; overflow-x; hidden;]
[bg=transparent; height: 380px;][/bg][border=0px; background-color: #EDEDED; display: inline-block; width: 74%; position: relative; left: 20px; border-radius: 10px;][bg=transparent; color: #949494; text-align: justify; font-size: 13px; position: relative; padding: 20px;][comment]


main text on the left goes here!! adjusts to your text


[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec nisl ut ligula consectetur tristique quis non quam. Cras facilisis mattis lectus ut interdum. Nam euismod massa risus, ac maximus ligula sodales a. Fusce eget tempus tellus. Nam convallis, augue nec tristique ullamcorper, ipsum nulla semper mi, non egestas enim felis quis metus. Ut euismod, nibh ut egestas scelerisque, metus odio fermentum metus, dapibus ornare quam turpis nec enim. Praesent eget elementum massa, ac vehicula ipsum. Ut varius lectus enim, in tristique nisl fermentum vitae. Fusce sit amet facilisis risus, eget aliquam urna. Etiam sit amet volutpat massa, at volutpat odio.

Aenean eu turpis turpis. Morbi eu suscipit augue. Donec eget iaculis purus, facilisis convallis purus. In lorem orci, tincidunt id nisl at, sodales bibendum ex. Aliquam et pulvinar tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent maximus ornare est ut pharetra. In arcu quam, accumsan aliquam neque rutrum, bibendum euismod metus. Ut et ante vehicula, laoreet lorem quis, interdum nunc. Fusce rhoncus leo vel consectetur venenatis. Nam eget massa non quam tempus vehicula. Cras sodales pretium ligula vitae hendrerit.[/bg][/border]

[/bg][/bg][/column][column=span4][bg=transparent; height: 380px; width: 90%; background-color: #EDEDED; position: relative; border-radius: 0px 20px 20px 0px;][bg=transparent; width: 90%; background-color: #D8D8D8; height: 15px; border-radius: 5px 5px 0px 0px; position: relative; left: 3px;][comment]


top name on the right goes here!! lower the letter spacing if the name overflows


[/comment][bg=transparent; color: #949494; text-align: center; letter-spacing: 7px; text-transform: uppercase; position: relative; bottom: 13px; font-weight: bold;]your mom[/bg][/bg][comment]


right sidebar pic goes here!!


[/comment][bg=transparent; width: 90%; background: url(https://media.vogue.co.uk/photos/5ed0eb76c0f25dae41f9842a/16:9/w_1920,c_limit/001-DianaSilvers-Vogueglobal-26May20-Credit_Alex-Hainer.jpg); background-size: cover; height: 130px; position: relative; left: 3px;][/bg][bg=transparent; width: 90%; background-color: #949494; background-size: cover; height: 5px; position: relative; left: 3px; text-align: center;][comment]


quote below the pic goes here!! lower/get rid of the letter spacing if the quote overflows
not scrollable


[/comment][bg=transparent; color: #EDEDED; position: relative; bottom: 16px; font-size: 12px; letter-spacing: 2px;]"mom mom mom mom."[/bg][/bg][bg=transparent; width: 90%; background-color: #D8D8D8; background-size: cover; height: 150px; border-radius: 0px 0px 5px 5px; position: relative; left: 3px; overflow: hidden;][bg=transparent; width: 110%; height: 150px; position: relative; bottom: 10px; right: 10px; overflow-y: scroll; overflow-x: hidden; letter-spacing: 1px; color: #949494; font-size: 12px; line-height: 30px;][comment]


character info on the right goes here!!


[/comment][b]this thing?[/b] scrollable.
[b]location?[/b] idk.
[b]outfit?[/b] idk.
[b]interactions?[/b] idk.
[b]any last words?[/b] screw u mom.[/bg][/bg][/bg][/column][/row][/bg]
[comment]


credits here! you can change the color but pls dont remove the creds


[/comment][bg=transparent; letter-spacing: 1px; color: #8F8F8F; font-size: 12px; text-align: center;;]coded by incandescent[/bg]
[bg=transparent; height: 40px;][/bg]
 
colors used:

main bg colors + quote text: #EDEDED

name + character info bg: #D8D8D8

all text except the quote: #949494

 

character sheet no. 1
i wanted to figure out how to make my own character sheets and all so here's one that i managed to make this morning. it's the first 'successful' code that i've made and it's pretty basic but i'm proud of it hehe

i'm including the colors in the post below for ease, feel free to change them with ctrl + f, and lmk if there are any problems that need fixing or if you need help using it. p.s., bg pic creds to pumpkin-stem on tumblr



name.

basics.
title : info.
title : info.
title : info.
title : info.
title : info.
title : info.
title : info.
visage.
title : info.
title : info.
title : info.
title : info.
title : info.
title : info.
title : info.
persona.
- positive traits :
trait
: description.
trait : description.
trait : description.
- negative traits :
trait
: description.
trait : description.
trait : description.
- likes : info.
- dislikes : info.
archive.
title : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium ligula enim, vel finibus lorem interdum quis. Suspendisse viverra lectus tortor. Nam dui orci, hendrerit quis risus quis, placerat mattis augue. Phasellus in felis orci. Donec in ligula nisl. Sed at consectetur velit, ut placerat velit. Sed tristique interdum dui, sit amet euismod nunc mollis vel. Nulla facilisi. Praesent a elit neque. Vivamus in scelerisque metus. Maecenas in libero bibendum, feugiat leo in, auctor metus. Morbi vulputate libero sit amet ligula feugiat, non facilisis eros tempus. Fusce blandit risus enim, in consequat libero commodo nec. Proin pretium velit vitae lorem scelerisque mollis. Etiam eleifend scelerisque nunc a scelerisque. Nulla ipsum diam, lobortis in ipsum et, ullamcorper interdum magna.

coded by incandescent

Code:
[bg=transparent; margin: auto; background-color: #cda77d; width: 700px; height: 400px; border-radius: 5px; border-style: solid; border-color:#ba8950; border-width: 5px;][row][column=span3][comment]

(づ ◕‿◕ )づ  sidebar image below!

[/comment][bg=transparent; margin: auto; background: url('https://i.pinimg.com/originals/62/dd/52/62dd520fb09a28deb4cc9309fea9dab6.jpg'); height: 380px; background-size: cover; border-radius: 5px;][/bg][/column][column=span5][bg=transparent; margin: auto; border-radius: 5px; border-color: #ba8950; border-size: 10px; border-style: solid; background-color: #ba8950; height: 40px; font-family: Karla;][bg=transparent; margin: auto; color: #75492f; letter-spacing: 2px; text-transform: uppercase;][comment]

(つ≧▽≦)つ    name goes here!

[/comment][B]name.[/B][/bg][/bg]
[bg=transparent; background-color: #ba8950; margin: auto; height: 288px; border-radius: 5px;  overflow-y: scroll; overflow-x: hidden;][bg=transparent; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]

(⊃。•́‿•̀。)⊃     first section starts here!

[/comment][B]basics.[/B][/bg][bg=transparent; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.[/bg][bg=transparent; position: sticky; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]

(づ ◕‿◕ )づ  second section starts here!

[/comment][B]visage.[/B][/bg][bg=transparent; position: sticky; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.[/bg][bg=transparent; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]

(っಠ‿ಠ)っ   third section starts here!

[/comment][B]persona.[/B][/bg][bg=transparent; position: sticky; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B]- positive traits :
[I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B]- negative traits :
[I]trait[/I][/B] : description.
[B][I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B][I]- likes[/I][/B]  :  info.
[B][I]- dislikes[/I][/B]  :  info.[/bg][bg=transparent; position: sticky; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px; text-align: justify; text-justify: inter-word;][comment]

(づ◡﹏◡)づ    fourth section starts here!

[/comment][B]archive.[/B][/bg][bg=transparent; position: sticky; margin: auto; font-family: Karla; color: #75492f;][B][I]title[/I][/B]  :  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium ligula enim, vel finibus lorem interdum quis. Suspendisse viverra lectus tortor. Nam dui orci, hendrerit quis risus quis, placerat mattis augue. Phasellus in felis orci. Donec in ligula nisl. Sed at consectetur velit, ut placerat velit. Sed tristique interdum dui, sit amet euismod nunc mollis vel. Nulla facilisi. Praesent a elit neque. Vivamus in scelerisque metus. Maecenas in libero bibendum, feugiat leo in, auctor metus. Morbi vulputate libero sit amet ligula feugiat, non facilisis eros tempus. Fusce blandit risus enim, in consequat libero commodo nec. Proin pretium velit vitae lorem scelerisque mollis. Etiam eleifend scelerisque nunc a scelerisque. Nulla ipsum diam, lobortis in ipsum et, ullamcorper interdum magna.[/bg][/bg][/column][/row][/bg]

[center][bg=transparent; margin: auto; color: #75492f; font-family: Karla; text-transform: uppercase; border-radius: 5px; font-size: 9px;][B]coded by incandescent[/B][/bg][/center]
Code:
[bg=transparent; margin: auto; background-color: #cda77d; width: 700px; height: 400px; border-radius: 5px; border-style: solid; border-color:#ba8950; border-width: 5px;][row][column=span3][comment]

(づ ◕‿◕ )づ  sidebar image below!

[/comment][bg=transparent; margin: auto; background: url('https://i.pinimg.com/originals/62/dd/52/62dd520fb09a28deb4cc9309fea9dab6.jpg'); height: 380px; background-size: cover; border-radius: 5px;][/bg][/column][column=span5][bg=transparent; margin: auto; border-radius: 5px; border-color: #ba8950; border-size: 10px; border-style: solid; background-color: #ba8950; height: 40px; font-family: Karla;][bg=transparent; margin: auto; color: #75492f; letter-spacing: 2px; text-transform: uppercase;][comment]

(つ≧▽≦)つ    name goes here!

[/comment][B]name.[/B][/bg][/bg]
[bg=transparent; background-color: #ba8950; margin: auto; height: 288px; border-radius: 5px;  overflow: hidden;][bg=transparent; width: 105%; height: 288px; position: relative; bottom: 10px; right: 11px; overflow-y: scroll; overflow-x: hidden;][bg=transparent; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]

(⊃。•́‿•̀。)⊃     first section starts here!

[/comment][B]basics.[/B][/bg][bg=transparent; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.[/bg][bg=transparent; position: sticky; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]

(づ ◕‿◕ )づ  second section starts here!

[/comment][B]visage.[/B][/bg][bg=transparent; position: sticky; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.
[B][I]title[/I][/B]  :  info.[/bg][bg=transparent; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px;][comment]

(っಠ‿ಠ)っ   third section starts here!

[/comment][B]persona.[/B][/bg][bg=transparent; position: sticky; margin: auto; font-family: Karla; color: #75492f; text-align: justify;][B]- positive traits :
[I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B]- negative traits :
[I]trait[/I][/B] : description.
[B][I]trait[/I][/B]  :  description.
[B][I]trait[/I][/B]  :  description.
[B][I]- likes[/I][/B]  :  info.
[B][I]- dislikes[/I][/B]  :  info.[/bg][bg=transparent; position: sticky; margin: auto; background-color: #75492f; color: #ba8950; font-family: Karla; text-transform: uppercase; border-radius: 5px; letter-spacing: 8px; text-align: justify; text-justify: inter-word;][comment]

(づ◡﹏◡)づ    fourth section starts here!

[/comment][B]archive.[/B][/bg][bg=transparent; position: sticky; margin: auto; font-family: Karla; color: #75492f;][B][I]title[/I][/B]  :  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium ligula enim, vel finibus lorem interdum quis. Suspendisse viverra lectus tortor. Nam dui orci, hendrerit quis risus quis, placerat mattis augue. Phasellus in felis orci. Donec in ligula nisl. Sed at consectetur velit, ut placerat velit. Sed tristique interdum dui, sit amet euismod nunc mollis vel. Nulla facilisi. Praesent a elit neque. Vivamus in scelerisque metus. Maecenas in libero bibendum, feugiat leo in, auctor metus. Morbi vulputate libero sit amet ligula feugiat, non facilisis eros tempus. Fusce blandit risus enim, in consequat libero commodo nec. Proin pretium velit vitae lorem scelerisque mollis. Etiam eleifend scelerisque nunc a scelerisque. Nulla ipsum diam, lobortis in ipsum et, ullamcorper interdum magna.[/bg][/bg][/bg][/column][/row][/bg]

[center][bg=transparent; margin: auto; color: #75492f; font-family: Karla; text-transform: uppercase; border-radius: 5px; font-size: 9px;][B]coded by incandescent[/B][/bg][/center]

Hello there. Would you mind if I used this wonderful code of yours?
 

Users who are viewing this thread

Back
Top