• 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 • an attempt was made • ditto's workshop •









LOGGED IN


mobile-friendly!
in-character post
hidden scrolls!
MUSIC PLAYERS!



º º code by ditto º º



  • CHARACTER NAME
    @characterusername has set their status to:
    mood here

    @characterusername has set their outfit to:
    outfit here

    @characterusername has set their location to:
    location here

    @characterusername has mentioned:
    mentions here

    @characterusername has mentioned:
    tags here
    •••••••••••
    •••••••••••
    •••••••••••
    •••••••••••
    •••••••••••
    •••••••••••
    •••••••••••
    •••••••••••
    •••••••••••
    •••••••••••
    •••••••••••
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

    Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

    Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.
    º º code by ditto º º

Code:
[comment]

Variables are in the first box! Their names should be relatively self-explanatory.

If the image is not in the position that you would like, change the percentages to its right-- the first percentage is the x-value, and the second percentage is the y-value. The larger the first percentage, the further to the right the image will go; the larger the second percentage is, the lower the image will go.

[/comment][border= 0;

--leftbgcolor: #FFCDAC;
--rightbgcolor: #FFE6D6;
--maintextcolor: #814824;
--pic: url(https://64.media.tumblr.com/1fc1ee6fbc376ee8f2992eab5c134803/tumblr_inline_psm0xgQHYE1sirbdm_250.gifv) 50% 10%;
--namecolor: #814824;
--nameshadowcolor: #E08349;
--littlewordscolor: #FFE6D6;
--lilleftboxcolor: #FFE6D6;
--imageborder: #FFE6D6;

box-sizing: border-box; padding: 0; max-width: 700px; min-height: 450px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][comment]

Don't mess with this. It's the left box.

[/comment][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--leftbgcolor); display: flex; flex-direction: column; overflow: hidden; align-items:center;][comment]

Pic is here! If you'd like to change the saturation, change the number in the parentheses after "filter: grayscale". 0.0 will make it have no filter, while 1.0 will put it in full grayscale.

You can change it to "filter: sepia" as well, if you'd like it to be in sepia.

If you wouldn't like a border on your image, get rid of the "border: 2px solid var(--imageborder);" variable.

[/comment][border= 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 5px; justify-content:center; align-items:center;][border=0; box-sizing: border-box; padding: 0; background: var(--pic); background-size: cover; filter: grayscale(0.4); height:150px; width:150px; border-radius: 100%; position:absolute; border: 2px solid var(--imageborder);][/border][comment]

Here goes your character name. If the name/words in place of the name that you want doesn't fit, you can change the "font-size" variable below.

Also, if you want a shadow further to the right of your character's name, change the "-2px" after text-shadow to any other amount. If you would like the shadow to move left, make the first number negative. If you'd like it to be further down from your character's name, change the "2px" to any other amount. If you would like the shadow to move up, make the second number negative. If you don't want a shadow, change both to 0.

[/comment][border=0px; position: absolute; width: 100%; top: 135px; font-size: 30px; color: var(--namecolor); background: transparent; text-align: center; text-shadow: -2px 2px var(--nameshadowcolor); line-height:13px; left:-10px;][font=Oswald]
CHARACTER NAME[/font][/border][border=0px; position: absolute; background: var(--lilleftboxcolor); top: 195px; height: 176px; width: 190px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: scroll; font-size:12px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 11px;][comment]

Here start the little status thingies. If you want to change the text, feel free.

[/comment][size=8px][i]@[u]characterusername[/u] has set their status to:[/i][/size]
[b]mood here[/b]

[size=8px][i]@[u]characterusername[/u] has set their outfit to:[/i][/size]
[b]outfit here[/b]

[size=8px][i]@[u]characterusername[/u] has set their location to:[/i][/size]
[b]location here[/b]

[size=8px][i]@[u]characterusername[/u] has mentioned:[/i][/size]
[b]mentions here[/b]

[size=8px][i]@[u]characterusername[/u] has mentioned:[/i][/size]
[b]tags here[/b][/border][/border][/border][comment]

In all of these borders go your little aesthetic words behind the pic. If you don't want them, delete from the comment that says "start deleting here" to the comment that says "stop deleting here".

[/comment][comment]

Start deleting here if you don't want the aesthetic words.

[/comment][border=0px; width:7px; color: var(--littlewordscolor);]•••••••••••[/border][border=0px; width:7px; color: var(--littlewordscolor);]•••••••••••[/border][border=0px; width:7px; color: var(--littlewordscolor);]•••••••••••[/border][border=0px; width:7px; color: var(--littlewordscolor);]•••••••••••[/border][border=0px; width:7px; color: var(--littlewordscolor);]•••••••••••[/border][border=0px; width:7px; color: var(--littlewordscolor);]•••••••••••[/border][border=0px; width:7px; color: var(--littlewordscolor);]•••••••••••[/border][border=0px; width:7px; color: var(--littlewordscolor);]•••••••••••[/border][border=0px; width:7px; color: var(--littlewordscolor);]•••••••••••[/border][border=0px; width:7px; color: var(--littlewordscolor);]•••••••••••[/border][border=0px; width:7px; color: var(--littlewordscolor);]•••••••••••[/border][comment]

Stop deleting here if you don't want the aesthetic words.

[/comment][/border][/border][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--rightbgcolor); display: flex; flex-direction: column; overflow: hidden;][border=
0; box-sizing: border-box; padding: 0; flex: 1; position: relative; text-align: justify; overflow: auto; color: var(--maintextcolor); width: 200%;][border= 0; box-sizing: border-box; padding: 0; width: 50%; font-size: 12px; line-height: 14px;][comment]

Here starts your post!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.[/border][/border][/border][comment]

Please don't delete the credit!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;] º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º code by ditto º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º [/border][/border]
Code:
[comment]

Variables are in the first box! Their names should be relatively self-explanatory.

If the image is not in the position that you would like, change the percentages to its right-- the first percentage is the x-value, and the second percentage is the y-value. The larger the first percentage, the further to the right the image will go; the larger the second percentage is, the lower the image will go.

[/comment][border= 0;

--leftbgcolor: url(https://i.pinimg.com/originals/8f/cd/02/8fcd023531889cb5114bdf643e830aa4.jpg);
--rightbgcolor: #f9f0ef;
--maintextcolor: #e28c9b;
--pic: url(https://64.media.tumblr.com/4ec0c9f1b23dd33ddc48bae8173af4d8/tumblr_inline_p7qqnua9zP1sccn28_250.gifv) 60% 0%;
--namecolor: #fdfefa;
--coloredmessagecolor: #4387D9;
--coloredmessagetextcolor: #ffffff;
--uncoloredmessagecolor: #F6F6F6;
--uncoloredmessagetextcolor: #000000;
--nameshadowcolor: #e26a89; 
--lilleftboxcolor: #f9f0ef;
--imageborder: #f9f0ef;

box-sizing: border-box; padding: 0; max-width: 700px; min-height: 450px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][comment]

Don't mess with this. It's the left box.

[/comment][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--leftbgcolor); display: flex; flex-direction: column; overflow: hidden; align-items:center; background-size: cover;][comment]

Pic is here! If you'd like to change the saturation, change the number in the parentheses after "filter: grayscale". 0.0 will make it have no filter, while 1.0 will put it in full grayscale.

You can change it to "filter: sepia" as well, if you'd like it to be in sepia.

If you wouldn't like a border on your image, get rid of the "border: 2px solid var(--imageborder);" variable.

[/comment][border= 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 5px; justify-content:center; align-items:center;][border=0; box-sizing: border-box; padding: 0; background: var(--pic); background-size: cover; filter: grayscale(0.4); height:150px; width:150px; border-radius: 100%; position:absolute; border: 2px solid var(--imageborder);][/border][comment]

Here goes your character name. If the name/words in place of the name that you want doesn't fit, you can change the "font-size" variable below.

Also, if you want a shadow further to the right of your character's name, change the "0px" after text-shadow to any other amount. If you would like the shadow to move left, make the first number negative. If you'd like it to be further down from your character's name, change the "2px" to any other amount. If you would like the shadow to move up, make the second number negative. If you don't want a shadow, change both to 0.

[/comment][border=0px; position: absolute; width: 100%; top: 135px; font-size: 34px; color: var(--namecolor); background: transparent; text-align: center; text-shadow: 0px 2px var(--nameshadowcolor); line-height:13px; left:-10px;][font=Yeseva One]
character name[/font][/border][border=0px; position: absolute; background: var(--lilleftboxcolor); top: 195px; height: 176px; width: 190px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: scroll; font-size:12px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 11px;][comment]

Here start the little status thingies. If you want to change the text, feel free.

[/comment][size=8px][border=transparent; height:fit-content; border-radius:10px 10px 10px 0px; padding:4px 8px; box-sizing:border-box; line-height:120%; font-size:12px; background: var(--uncoloredmessagecolor); margin:10px 10px 10px 0px; color: var(--uncoloredmessagetextcolor); width: 100%;]How are you feeling?[/border][border=transparent; height:fit-content; width:100%; border-radius:10px 10px 0px 10px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; color: var(--coloredmessagetextcolor); background: var(--coloredmessagecolor); margin:10px 10px 10px 0px;]Mood here[/border][border=transparent; height:fit-content; border-radius:10px 10px 10px 0px; padding:4px 8px; box-sizing:border-box; line-height:120%; font-size:12px; background: var(--uncoloredmessagecolor); margin:10px 10px 10px 0px; color: var(--uncoloredmessagetextcolor); width: 100%;]What are you wearing?[/border][border=transparent; height:fit-content; width:100%; border-radius:10px 10px 0px 10px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; color: var(--coloredmessagetextcolor); background: var(--coloredmessagecolor); margin:10px 10px 10px 0px;]Outfit here[/border][border=transparent; height:fit-content; border-radius:10px 10px 10px 0px; padding:4px 8px; box-sizing:border-box; line-height:120%; font-size:12px; background: var(--uncoloredmessagecolor); margin:10px 10px 10px 0px; color: var(--uncoloredmessagetextcolor); width: 100%;]Where are you?[/border][border=transparent; height:fit-content; width:100%; border-radius:10px 10px 0px 10px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; color: var(--coloredmessagetextcolor); background: var(--coloredmessagecolor); margin:10px 10px 10px 0px;]Location here[/border][border=transparent; height:fit-content; border-radius:10px 10px 10px 0px; padding:4px 8px; box-sizing:border-box; line-height:120%; font-size:12px; background: var(--uncoloredmessagecolor); margin:10px 10px 10px 0px; color: var(--uncoloredmessagetextcolor); width: 100%;]Did you mention anyone?[/border][border=transparent; height:fit-content; width:100%; border-radius:10px 10px 0px 10px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; color: var(--coloredmessagetextcolor); background: var(--coloredmessagecolor); margin:10px 10px 10px 0px;]Mentions here[/border][border=transparent; height:fit-content; border-radius:10px 10px 10px 0px; padding:4px 8px; box-sizing:border-box; line-height:120%; font-size:12px; background: var(--uncoloredmessagecolor); margin:10px 10px 10px 0px; color: #000000; width: 100%;]Who are you talking to?[/border][border=transparent; height:fit-content; width:100%; border-radius:10px 10px 0px 10px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; color: var(--coloredmessagetextcolor); background: var(--coloredmessagecolor); margin:10px 10px 10px 0px;]Mood here[/border][border=transparent; height:fit-content; border-radius:10px 10px 10px 0px; padding:4px 8px; box-sizing:border-box; line-height:120%; font-size:12px; background: var(--uncoloredmessagecolor); margin:10px 10px 10px 0px; color: var(--uncoloredmessagetextcolor); width: 100%;]And, like, tagging?[/border][border=transparent; height:fit-content; width:100%; border-radius:10px 10px 0px 10px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; color: var(--coloredmessagetextcolor); background: var(--coloredmessagecolor); margin:10px 10px 10px 0px;]Tags here[/border][/size][/border][size=8px][/size][/border][size=8px][/size][/border][size=8px][/size][/border][size=8px][/size][/border][size=8px][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--rightbgcolor); display: flex; flex-direction: column; overflow: hidden;][border=
0; box-sizing: border-box; padding: 0; flex: 1; position: relative; text-align: justify; overflow: auto; color: var(--maintextcolor); width: 200%;][border= 0; box-sizing: border-box; padding: 0; width: 50%; font-size: 12px; line-height: 14px;][comment]

Here starts your post!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.[/border][/border][/border][/size][/border][size=8px][comment]

Please don't delete the credit!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;][center] º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º code by ditto º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º [/center][/border][/size]
Code:
[comment]

Variables are in the first box! Their names should be relatively self-explanatory.

If the image is not in the position that you would like, change the percentages to its right-- the first percentage is the x-value, and the second percentage is the y-value. The larger the first percentage, the further to the right the image will go; the larger the second percentage is, the lower the image will go.

[/comment][border= 0;

--leftbgcolor: url(https://i.pinimg.com/originals/8f/cd/02/8fcd023531889cb5114bdf643e830aa4.jpg);
--rightbgcolor: #f9f0ef;
--maintextcolor: #e28c9b;
--pic: url(https://64.media.tumblr.com/4ec0c9f1b23dd33ddc48bae8173af4d8/tumblr_inline_p7qqnua9zP1sccn28_250.gifv) 60% 0%;
--namecolor: #fdfefa;
--coloredmessagecolor: #4387D9;
--coloredmessagetextcolor: #ffffff;
--uncoloredmessagecolor: #F6F6F6;
--uncoloredmessagetextcolor: #000000;
--nameshadowcolor: #e26a89; 
--lilleftboxcolor: #f9f0ef;
--imageborder: #f9f0ef;

box-sizing: border-box; padding: 0; max-width: 700px; min-height: 450px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][comment]

Don't mess with this. It's the left box.

[/comment][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--leftbgcolor); display: flex; flex-direction: column; overflow: hidden; align-items:center; background-size: cover;][comment]

Pic is here! If you'd like to change the saturation, change the number in the parentheses after "filter: grayscale". 0.0 will make it have no filter, while 1.0 will put it in full grayscale.

You can change it to "filter: sepia" as well, if you'd like it to be in sepia.

If you wouldn't like a border on your image, get rid of the "border: 2px solid var(--imageborder);" variable.

[/comment][border= 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 5px; justify-content:center; align-items:center;][border=0; box-sizing: border-box; padding: 0; background: var(--pic); background-size: cover; filter: grayscale(0.4); height:150px; width:150px; border-radius: 100%; position:absolute; border: 2px solid var(--imageborder);][/border][comment]

Here goes your character name. If the name/words in place of the name that you want doesn't fit, you can change the "font-size" variable below.

Also, if you want a shadow further to the right of your character's name, change the "-2px" after text-shadow to any other amount. If you would like the shadow to move left, make the first number negative. If you'd like it to be further down from your character's name, change the "2px" to any other amount. If you would like the shadow to move up, make the second number negative. If you don't want a shadow, change both to 0.

A short quote goes where it says "short quote". If you'd rather not have it, don't put anything.

[/comment][border=0px; position: absolute; width: 85%; top: 147px; font-size: 30px; color: var(--namecolor); background: transparent; text-align: center; text-shadow: 0px 2px var(--nameshadowcolor); line-height:16px; left:-8px;][font=Viaoda Libre]character name
[size=14px][RIGHT]short quote.[/RIGHT][/size][/font][/border][border=0px; position: absolute; background: var(--lilleftboxcolor); top: 195px; height: 176px; width: 190px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: scroll; font-size:12px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 11px;][comment]

Here start the little status thingies. If you want to change the text, feel free.

[/comment][size=8px][border=transparent; height:fit-content; border-radius:10px 10px 10px 0px; padding:4px 8px; box-sizing:border-box; line-height:120%; font-size:12px; background: var(--uncoloredmessagecolor); margin:10px 10px 10px 0px; color: var(--uncoloredmessagetextcolor); width: 100%;]How are you feeling?[/border][border=transparent; height:fit-content; width:100%; border-radius:10px 10px 0px 10px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; color: var(--coloredmessagetextcolor); background: var(--coloredmessagecolor); margin:10px 10px 10px 0px;]Mood here[/border][border=transparent; height:fit-content; border-radius:10px 10px 10px 0px; padding:4px 8px; box-sizing:border-box; line-height:120%; font-size:12px; background: var(--uncoloredmessagecolor); margin:10px 10px 10px 0px; color: var(--uncoloredmessagetextcolor); width: 100%;]What are you wearing?[/border][border=transparent; height:fit-content; width:100%; border-radius:10px 10px 0px 10px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; color: var(--coloredmessagetextcolor); background: var(--coloredmessagecolor); margin:10px 10px 10px 0px;]Outfit here[/border][border=transparent; height:fit-content; border-radius:10px 10px 10px 0px; padding:4px 8px; box-sizing:border-box; line-height:120%; font-size:12px; background: var(--uncoloredmessagecolor); margin:10px 10px 10px 0px; color: var(--uncoloredmessagetextcolor); width: 100%;]Where are you?[/border][border=transparent; height:fit-content; width:100%; border-radius:10px 10px 0px 10px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; color: var(--coloredmessagetextcolor); background: var(--coloredmessagecolor); margin:10px 10px 10px 0px;]Location here[/border][border=transparent; height:fit-content; border-radius:10px 10px 10px 0px; padding:4px 8px; box-sizing:border-box; line-height:120%; font-size:12px; background: var(--uncoloredmessagecolor); margin:10px 10px 10px 0px; color: var(--uncoloredmessagetextcolor); width: 100%;]Did you mention anyone?[/border][border=transparent; height:fit-content; width:100%; border-radius:10px 10px 0px 10px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; color: var(--coloredmessagetextcolor); background: var(--coloredmessagecolor); margin:10px 10px 10px 0px;]Mentions here[/border][border=transparent; height:fit-content; border-radius:10px 10px 10px 0px; padding:4px 8px; box-sizing:border-box; line-height:120%; font-size:12px; background: var(--uncoloredmessagecolor); margin:10px 10px 10px 0px; color: #000000; width: 100%;]Who are you talking to?[/border][border=transparent; height:fit-content; width:100%; border-radius:10px 10px 0px 10px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; color: var(--coloredmessagetextcolor); background: var(--coloredmessagecolor); margin:10px 10px 10px 0px;]Mood here[/border][border=transparent; height:fit-content; border-radius:10px 10px 10px 0px; padding:4px 8px; box-sizing:border-box; line-height:120%; font-size:12px; background: var(--uncoloredmessagecolor); margin:10px 10px 10px 0px; color: var(--uncoloredmessagetextcolor); width: 100%;]And, like, tagging?[/border][border=transparent; height:fit-content; width:100%; border-radius:10px 10px 0px 10px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; color: var(--coloredmessagetextcolor); background: var(--coloredmessagecolor); margin:10px 10px 10px 0px;]Tags here[/border][/size][/border][size=8px][/size][/border][size=8px][/size][/border][size=8px][/size][/border][size=8px][/size][/border][size=8px][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--rightbgcolor); display: flex; flex-direction: column; overflow: hidden;][border=
0; box-sizing: border-box; padding: 0; flex: 1; position: relative; text-align: justify; overflow: auto; color: var(--maintextcolor); width: 200%;][border= 0; box-sizing: border-box; padding: 0; width: 50%; font-size: 12px; line-height: 14px;][comment]

Here starts your post!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.[/border][/border][/border][/size][/border][size=8px][comment]

Please don't delete the credit!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;][center] º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º code by ditto º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º [/center][/border][/size]
Code:
[comment]

Variables are in the first box! Their names should be relatively self-explanatory.

If the image is not in the position that you would like, change the percentages to its right-- the first percentage is the x-value, and the second percentage is the y-value. The larger the first percentage, the further to the right the image will go; the larger the second percentage is, the lower the image will go.

[/comment][border= 0;

--leftbgcolor: #3C0000;
--rightbgcolor: #FFE6E6;
--maintextcolor: #3C0000;
--pic: url(https://i.pinimg.com/originals/40/cd/ec/40cdec944851a3453c2304f1213b92a6.gif) 45% 50%;
--namecolor: #FFE6E6;
--nameshadowcolor: #890707; 
--littlewordscolor: #890707;
--lilleftboxcolor: #FFE6E6;
--imageborder: #FFE6E6;

box-sizing: border-box; padding: 0; max-width: 700px; min-height: 450px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][comment]

Don't mess with this. It's the left box.

[/comment][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--leftbgcolor); display: flex; flex-direction: column; overflow: hidden; align-items:center;][comment]

Pic is here! If you'd like to change the saturation, change the number in the parentheses after "filter: grayscale". 0.0 will make it have no filter, while 1.0 will put it in full grayscale.

You can change it to "filter: sepia" as well, if you'd like it to be in sepia.

If you wouldn't like a border on your image, get rid of the "border: 2px solid var(--imageborder);" variable.

[/comment][border= 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 5px; justify-content:center; align-items:center;][border=0; box-sizing: border-box; padding: 0; background: var(--pic); background-size: cover; filter: grayscale(0.4); height:150px; width:150px; border-radius: 100%; position:absolute; border: 2px solid var(--imageborder);][/border][comment]

Here go your "welcome back" and your character name. If the name/words in place of the name that you want doesn't fit, you can change the "font-size" variable below. If you would rather not have the "welcome back", put a space where the words are. If you would like to have different words there, just feel free to change the words.

[/comment][border=0px; position: absolute; width: 100%; top: 130px; font-size: 27px; color: var(--namecolor); background: transparent; text-align: center; text-shadow: -2px 2px var(--nameshadowcolor); line-height:17px; left:-10px;][font=Francois One][i][size=10px]"quote from that here..."[/size][/i]
character name[/font][/border][border=0px; position: absolute; background: var(--lilleftboxcolor); top: 195px; height: 176px; width: 190px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: scroll; font-size:12px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 11px;][comment]

Here start the little status thingies. If you want to change the text, feel free.

[/comment][size=8px][i]@[u]username[/u] has set their status to:[/i][/size]
[b]mood here[/b]

[size=8px][i]@[u]username[/u] has set their outfit to:[/i][/size]
[b]outfit here[/b]

[size=8px][i]@[u]username[/u] has set their location to:[/i][/size]
[b]location here[/b]

[size=8px][i]@[u]username[/u] has mentioned:[/i][/size]
[b]mentions here[/b]

[size=8px][i]@[u]username[/u] has mentioned:[/i][/size]
[b]tags here[/b][/border][/border][/border][comment]

In all of these borders go your little aesthetic words behind the pic. If you don't want them, delete from the comment that says "start deleting here" to the comment that says "stop deleting here".

[/comment][comment]

Start deleting here if you don't want the aesthetic words.

[/comment][border=0px; width:7px; color: var(--littlewordscolor);]♡♡♡♡♡♡♡♡♡♡♡♡♡[/border][border=0px; width:7px; color: var(--littlewordscolor);]♡♡♡♡♡♡♡♡♡♡♡♡♡[/border][border=0px; width:7px; color: var(--littlewordscolor);]♡♡♡♡♡♡♡♡♡♡♡♡♡[/border][border=0px; width:7px; color: var(--littlewordscolor);]♡♡♡♡♡♡♡♡♡♡♡♡♡[/border][border=0px; width:7px; color: var(--littlewordscolor);]♡♡♡♡♡♡♡♡♡♡♡♡♡[/border][border=0px; width:7px; color: var(--littlewordscolor);]♡♡♡♡♡♡♡♡♡♡♡♡♡[/border][border=0px; width:7px; color: var(--littlewordscolor);]♡♡♡♡♡♡♡♡♡♡♡♡♡[/border][border=0px; width:7px; color: var(--littlewordscolor);]♡♡♡♡♡♡♡♡♡♡♡♡♡[/border][border=0px; width:7px; color: var(--littlewordscolor);]♡♡♡♡♡♡♡♡♡♡♡♡♡[/border][border=0px; width:7px; color: var(--littlewordscolor);]♡♡♡♡♡♡♡♡♡♡♡♡♡[/border][border=0px; width:7px; color: var(--littlewordscolor);]♡♡♡♡♡♡♡♡♡♡♡♡♡[/border][comment]

Stop deleting here if you don't want the aesthetic words.

[/comment][/border][/border][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--rightbgcolor); display: flex; flex-direction: column; overflow: hidden;][border=
0; box-sizing: border-box; padding: 0; flex: 1; position: relative; text-align: justify; overflow: auto; color: var(--maintextcolor); width: 200%;][border= 0; box-sizing: border-box; padding: 0; width: 50%; font-size: 12px; line-height: 14px;][comment]

Here starts your post!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.[/border][/border][/border][comment]

Please don't delete the credit!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;] º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º code by ditto º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º [/border][/border]
Code:
[comment]

Variables are in the first box! Their names should be relatively self-explanatory.

If the image is not in the position that you would like, change the percentages to its right-- the first percentage is the x-value, and the second percentage is the y-value. The larger the first percentage, the further to the right the image will go; the larger the second percentage is, the lower the image will go.

[/comment][border= 0;

--leftbgcolor: #A82929;
--rightbgcolor: #F3BBBB;
--maintextcolor: #660F0F;
--pic: url(https://64.media.tumblr.com/7fd94437903ac0a7823bbbeb732755f8/tumblr_ottjc8dmWj1s2widjo1_250.gif) 50% 40%;
--namecolor: #F3BBBB;
--nameshadowcolor: #660F0F; 
--littlewordscolor: #8D2121;
--lilleftboxcolor: #F3BBBB;
--imageborder: #F3BBBB;

box-sizing: border-box; padding: 0; max-width: 700px; min-height: 450px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][comment]

Don't mess with this. It's the left box.

[/comment][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--leftbgcolor); display: flex; flex-direction: column; overflow: hidden; align-items:center;][comment]

Pic is here! If you'd like to change the saturation, change the number in the parentheses after "filter: grayscale". 0.0 will make it have no filter, while 1.0 will put it in full grayscale.

You can change it to "filter: sepia" as well, if you'd like it to be in sepia.

If you wouldn't like a border on your image, get rid of the "border: 2px solid var(--imageborder);" variable.

[/comment][border= 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 5px; justify-content:center; align-items:center;][border=0; box-sizing: border-box; padding: 0; background: var(--pic); background-size: cover; filter: grayscale(0.4); height:150px; width:150px; border-radius: 100%; position:absolute; border: 2px solid var(--imageborder);][/border][comment]

Here goes your quote and your character name. If the name/words in place of the name that you want doesn't fit, you can change the "font-size" variable below. If you would rather not have the quote, put a space where the words are. If you would like to have different words there, just feel free to change the words.

[/comment][border=0px; position: absolute; width: 100%; top: 143px; font-size: 27px; color: var(--namecolor); background: transparent; text-align: center; text-shadow: -2px 2px var(--nameshadowcolor); line-height:13px; left:-10px;][font=Oswald]CHARACTER NAME
[i][size=15px]"quote here lmao"[/size][/i][/font][/border][border=0px; position: absolute; background: var(--lilleftboxcolor); top: 195px; height: 176px; width: 190px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: scroll; font-size:12px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 11px;][comment]

Here start the little status thingies. If you want to change the text, feel free.

[/comment][size=8px][i]@[u]username[/u] has set their status to:[/i][/size]
[b]mood here[/b]

[size=8px][i]@[u]username[/u] has set their outfit to:[/i][/size]
[b]outfit here[/b]

[size=8px][i]@[u]username[/u] has set their location to:[/i][/size]
[b]location here[/b]

[size=8px][i]@[u]username[/u] has mentioned:[/i][/size]
[b]mentions here[/b]

[size=8px][i]@[u]username[/u] has mentioned:[/i][/size]
[b]tags here[/b][/border][/border][/border][comment]

In all of these borders go your little aesthetic words behind the pic. If you don't want them, delete from the comment that says "start deleting here" to the comment that says "stop deleting here".

[/comment][comment]

Start deleting here if you don't want the aesthetic words.

[/comment][border=0px; width:7px; color: var(--littlewordscolor);]♬♫♪♩♪♫♬♫♬♫♪♩♪♫♬♫[/border][border=0px; width:7px; color: var(--littlewordscolor);]♫♪♩♪♫♬♫♬♫♪♩♪♫♬♫♬[/border][border=0px; width:7px; color: var(--littlewordscolor);]♪♩♪♫♬♫♬♫♪♩♪♫♬♫♬♫[/border][border=0px; width:7px; color: var(--littlewordscolor);]♩♪♫♬♫♬♫♪♩♪♫♬♫♬♫♪[/border][border=0px; width:7px; color: var(--littlewordscolor);]♪♫♬♫♬♫♪♩♪♫♬♫♬♫♪♩[/border][border=0px; width:7px; color: var(--littlewordscolor);]♫♬♫♬♫♪♩♪♫♬♫♬♫♪♩♪[/border][border=0px; width:7px; color: var(--littlewordscolor);]♬♫♬♫♪♩♪♫♬♫♬♫♪♩♪♫[/border][border=0px; width:7px; color: var(--littlewordscolor);]♫♬♫♪♩♪♫♬♫♬♫♪♩♪♫♬[/border][border=0px; width:7px; color: var(--littlewordscolor);]♬♫♪♩♪♫♬♫♬♫♪♩♪♫♬♫[/border][border=0px; width:7px; color: var(--littlewordscolor);]♫♪♩♪♫♬♫♬♫♪♩♪♫♬♫♬[/border][border=0px; width:7px; color: var(--littlewordscolor);]♪♩♪♫♬♫♬♫♪♩♪♫♬♫♬♫[/border][comment]

Stop deleting here if you don't want the aesthetic words.

[/comment][/border][/border][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--rightbgcolor); display: flex; flex-direction: column; overflow: hidden;][border=
0; box-sizing: border-box; padding: 0; flex: 1; position: relative; text-align: justify; overflow: auto; color: var(--maintextcolor); width: 200%;][border= 0; box-sizing: border-box; padding: 0; width: 50%; font-size: 12px; line-height: 14px;][comment]

Here starts your post!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.[/border][/border][/border][comment]

Please don't delete the credit!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;] º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º code by ditto º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º [/border][/border]
Code:
[comment]

Variables are in the first box! Their names should be relatively self-explanatory.

If the image is not in the position that you would like, change the percentages to its right-- the first percentage is the x-value, and the second percentage is the y-value. The larger the first percentage, the further to the right the image will go; the larger the second percentage is, the lower the image will go.

[/comment][border= 0;

--leftbgcolor: #6F5E53;
--rightbgcolor: #C3A995;
--maintextcolor: #593D3B;
--pic: url(https://64.media.tumblr.com/dba13068c966a2a7968261d32e9825e4/d84c6f11e93fa370-47/s400x600/117367fbe5834c99f6084332ab3d8a19da821cad.gifv) 25% 0%;
--namecolor: #C3A995;
--nameshadowcolor: #593D3B;
--littlewordscolor: #C3A995;
--lilleftboxcolor: #C3A995;
--imageborder: #C3A995;

box-sizing: border-box; padding: 0; max-width: 700px; min-height: 450px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][comment]

Don't mess with this. It's the left box.

[/comment][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--leftbgcolor); display: flex; flex-direction: column; overflow: hidden; align-items:center; background-size: cover;][comment]

Pic is here! If you'd like to change the saturation, change the number in the parentheses after "filter: grayscale". 0.0 will make it have no filter, while 1.0 will put it in full grayscale.

You can change it to "filter: sepia" as well, if you'd like it to be in sepia.

If you wouldn't like a border on your image, get rid of the "border: 2px solid var(--imageborder);" variable.

[/comment][border= 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 5px; justify-content:center; align-items:center;][border=0; box-sizing: border-box; padding: 0; background: var(--pic); background-size:cover; filter: grayscale(0.4); height:150px; width:150px; border-radius: 100%; position:absolute; border: 2px solid var(--imageborder);][/border][comment]

Here go your "welcome back" and your character name. If the name/words in place of the name that you want doesn't fit, you can change the "font-size" variable below. If you would rather not have the "welcome back", put a space where the words are. If you would like to have different words there, just feel free to change the words.

[/comment][border=0px; position: absolute; width: 100%; top: 145px; font-size: 27px; color: var(--namecolor); background: transparent; text-align: center; text-shadow: -1px 1px 2px var(--nameshadowcolor); line-height:12px; left:-10px;][font=Contrail One]CHARACTER NAME
[I][SIZE=2]"short quote here"[/SIZE][/I][/font][/border][border=0px; position: absolute; background: var(--lilleftboxcolor); top: 195px; height: 176px; width: 190px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: scroll; font-size:12px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 11px;][comment]

Here start the little status thingies. If you want to change the text, feel free.

[/comment][SIZE=8px][I]@[U]username[/U] has set their status to:[/I][/SIZE]
[B] Mood [/B]

[SIZE=8px][I]@[U]username[/U] has set their outfit to:[/I][/SIZE]
[B] Outfit [/B]

[SIZE=8px][I]@[U]username[/U] has set their location to:[/I][/SIZE]
[B] Location [/B]

[SIZE=8px][I]@[U]username[/U] has mentioned:[/I][/SIZE]
[B] Mentions [/B]

[SIZE=8px][I]@[U]username[/U] has interacted with:[/I][/SIZE]
[B] Interactions [/B]

[SIZE=8px][I]@[U]username[/U] has tagged:[/I][/SIZE]
[B] Tags [/B][/border][/border][/border][comment]

In all of these borders go your little aesthetic words behind the pic. If you don't want them, delete from the comment that says "start deleting here" to the comment that says "stop deleting here".

[/comment][comment]

Start deleting here if you don't want the aesthetic words.

[/comment][border=0px; width:7px; color: var(--littlewordscolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordscolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordscolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordscolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordscolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordscolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordscolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordscolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordscolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordscolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordscolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][comment]

Stop deleting here if you don't want the aesthetic words.

[/comment][/border][/border][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--rightbgcolor); display: flex; flex-direction: column; overflow: hidden; point-events: none;][border=transparent; height:20px; width:20px; padding:0; overflow:hidden; position:relative; top:385px; left:285px;][border=transparent; height:80px; width:180px; padding:0; margin-top:-2px; margin-left:-10px; top:-40px;][comment]

Put whatever (SoundCloud) song you'd like as the link between the media brackets!

[/comment][media=soundcloud]https://soundcloud.com/lilpump/lil-pump-gucci-gang-prod-bighead-gnealz[/media][/border][/border][border=transparent; height:25px; width:25px; padding:0; overflow:hidden; position:relative; top:364px; left:285px; background: var(--rightbgcolor); pointer-events: none; color: var(--maintextcolor);][fa]fas fa-play[/fa][/border][border=
0; box-sizing: border-box; padding: 0; flex: 1; position: relative; text-align: justify; overflow: auto; color: var(--maintextcolor); width: 200%; top: -25px;][border= 0; box-sizing: border-box; padding: 0; width: 50%; font-size: 12px; line-height: 14px; text-align: justify;][comment]

Here starts your post!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet nec justo sit amet pretium. Donec scelerisque, orci nec dapibus cursus, purus risus efficitur felis, eget luctus orci eros eu sem. Donec lobortis arcu nec velit egestas scelerisque. Quisque neque dui, elementum eget lacus a, ullamcorper rhoncus mauris. Cras consectetur nisl eget quam auctor bibendum. Mauris imperdiet maximus lacus, quis imperdiet ante bibendum et. Sed pretium ligula at nibh pretium, quis commodo nibh tempor. Integer sem dolor, varius ac efficitur a, mollis nec risus. Nullam porta vel justo id tincidunt. Nam blandit nec sem ut dignissim. Integer volutpat, est in accumsan commodo, eros est vestibulum elit, nec pellentesque dui ligula sit amet turpis. Etiam eu dapibus urna, fringilla mattis nisi. Curabitur dapibus quam et consectetur efficitur. Morbi venenatis molestie vestibulum. Morbi ullamcorper ultrices odio eget rutrum.

Curabitur ante lectus, feugiat eu iaculis convallis, porta volutpat elit. Vivamus vel dolor feugiat, molestie nisl auctor, sodales velit. Donec egestas eu dolor laoreet tristique. Nulla facilisi. Aliquam erat volutpat. Phasellus posuere volutpat sapien, sagittis consectetur lectus convallis non. Nam sagittis hendrerit consequat. Proin malesuada, eros a ullamcorper porta, erat nisl aliquet augue, et blandit purus mauris non dolor. Etiam quis odio sit amet turpis imperdiet ornare eget blandit mi. Praesent mattis leo ante, at viverra magna consequat ac. Nam sodales quam sed diam tincidunt aliquam. Curabitur a cursus nibh, vitae interdum nulla. Praesent blandit vel elit quis porta. Ut non dictum orci.

Nulla pellentesque mauris ex, eu commodo eros ultricies in. Donec semper in urna a consectetur. Nulla efficitur cursus tempus. Nullam aliquam sapien eget felis iaculis, ut aliquam leo luctus. Proin ornare, nunc non mattis egestas, justo ligula sodales arcu, quis placerat sapien lacus vel elit. Ut et aliquet ante, at consectetur dolor. Nulla facilisi. Donec efficitur placerat metus, a pellentesque ante ultricies id. In justo ipsum, scelerisque sed orci sed, pellentesque lobortis erat. Phasellus placerat nec eros rhoncus ultricies. Integer fringilla, nisl ut euismod vestibulum, justo tellus aliquam nibh, eget lacinia risus felis sed lectus.

Proin quis pellentesque libero, non tempor nisi. Ut pellentesque a neque congue laoreet. Nulla convallis mattis quam sed venenatis. Phasellus sit amet consectetur nisl, quis pellentesque eros. Curabitur rhoncus dictum nunc ut vehicula. Nunc vehicula tortor dignissim augue porttitor dictum. Maecenas posuere sem nisl, eu laoreet ante facilisis id. Ut elementum accumsan turpis nec ultrices. Nullam non lectus diam. In hac habitasse platea dictumst. Donec dapibus eros eget lacinia ultricies. Nulla ullamcorper lacus id varius dapibus. Maecenas fringilla blandit nunc in hendrerit. Pellentesque facilisis scelerisque tortor id condimentum. Proin lobortis pharetra semper. Vestibulum mollis varius erat ut aliquet.

Nullam ultrices ex non ante condimentum, ullamcorper commodo erat fermentum. Vivamus a lectus quis velit porttitor posuere eu quis ante. Integer gravida finibus rutrum. Maecenas congue euismod fringilla. Vestibulum vel tortor non quam vulputate tristique. Quisque et aliquet dui, non feugiat purus. Nullam eget euismod eros. Cras et turpis ac lorem venenatis semper nec sit amet purus. Ut maximus, enim vel dictum pellentesque, enim turpis aliquam lacus, eu iaculis urna odio a urna. Cras efficitur leo eget leo pellentesque tempor.

[/border][/border][/border][comment]

Please don't delete the credit!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;] º [URL='https://www.rpnation.com/members/ditto.83850/'][COLOR=#878787][fa]fas fa-heart[/fa][/COLOR][/URL] º code by ditto º [URL='https://www.rpnation.com/members/ditto.83850/'][COLOR=#878787][fa]fas fa-heart[/fa][/COLOR][/URL] º [/border][/border]
 
Last edited:








LOGGED IN


mobile-friendly!
character sheet
hidden scrolls!



º º code by ditto º º


"quote here."
♔ CHARACTER NAME ♔
"quote here."
✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁
✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁
✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁
✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁
✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁
✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁
✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁
✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁
✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁
✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁
✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁
BASICS
@username has set their name to:
name here

@username has set their nicknames to:
nicknames here

@username has set their age to:
age here

@username has set their birthday to:
birthday here

@username has set their grade to:
grade here

@username has set their gender to:
gender here

@username has set their sexuality to:
sexuality here
PHYSICAL
@username has set their hair color to:
hair color here

@username has set their eye color to:
eye color here

@username has set their body mods to:
body mods here

@username has set their distinctive features to:
distinctive features here

@username has set their height to:
height here

@username has set their build to:
build here

@username has set their typical hair style to:
typical hair style here

@username has set their typical clothing style to:
clothing style here

@username has set their face claim to:
face claim here
PERSONA
@username has updated their personality summary:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.


@username has updated their virtues:








@username has updated their vices:









@username has updated their likes:








@username has updated their dislikes:








BACKGROUND
@username has updated their background:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.
FAMILY
@username has updated their family information:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.



º º code by ditto º º
Code:
[comment]

Variables are in the first box! Their names should be relatively self-explanatory.

If an image is not in the position that you would like, change the percentages to its right-- the first percentage is the x-value, and the second percentage is the y-value. The larger the first percentage, the further to the right the image will go; the larger the second percentage is, the lower the image will go.

[/comment][border= 0;

--leftbgcolor: #E2E2E2;
--rightbgcolor: #F5F6F6;

--textinsidebannercolor: #DAAA71;
--maintextcolor: #B0B0B0;
--headerscolor: #51A0EC;

--littlewordsonleftsidecolor: #ECEAEA;
--namecolor: #F5F6F6;
--nameshadowcolor: #51A0EC; 

--imageborder: #DBDBDB;

--leftbannerpictop: url(https://64.media.tumblr.com/52356569216e9ccd82f69480ddbb97ff/tumblr_ppwo6ogkNS1y9khiuo1_400.gifv) 0% 60%;
--leftbannerpicbottom: url(https://i.pinimg.com/originals/83/db/b9/83dbb9532e887a79164873af25cf865f.gif) 0% 20%;

--firstfourtopleft: url(https://64.media.tumblr.com/39e85f3a4d5f8556b05aeaa4546d4304/tumblr_pq9p5vhVYM1v3pieu_1280.jpg) 50% 10%;
--firstfourtopright: url(https://64.media.tumblr.com/3bcca6951edaa743e5b94204ea17dc1a/e71adcda646d994b-dc/s400x600/4cf0b15334b257a686ec4dfd0fcb8d198cffec01.png) 0% 10%;
--firstfourbottomleft: url(https://64.media.tumblr.com/387ebba3e9d16e92f739c2b46e1de04e/tumblr_pq9p5sQi741v3pieu_1280.jpg);
--firstfourbottomright: url(https://64.media.tumblr.com/203e83ba687be67a1632b7ed6c8b7ed4/e71adcda646d994b-0b/s400x600/735134abfb4991799d8268a1019a5c7985bc8b79.png);
--picbeneathfirstfour: url(https://64.media.tumblr.com/00278cdb4c67cf9b9da4e010e004985c/d349e4bbd348a43c-8c/s400x600/7b223d6fef63bc1016625498689c2b57894bbc96.gifv) 0% 20%;

--basicspic: url(https://wallpaperaccess.com/full/2621976.jpg) 50% 50%;
--physicalpic: url(https://data.whicdn.com/images/341278931/original.jpg) 50% 50%;
--picabovepersona: url(https://i.pinimg.com/736x/4f/04/e8/4f04e850a6c887c87f59dc0ff2041d07.jpg) 0% 45%;
--firstpicbelowpersona: url(https://64.media.tumblr.com/dba13068c966a2a7968261d32e9825e4/d84c6f11e93fa370-47/s400x600/117367fbe5834c99f6084332ab3d8a19da821cad.gifv);
--secondpicbelowpersona: url(https://64.media.tumblr.com/04798605d23eefb608ab5f21743b1059/cfa0198ca3d10df9-65/s400x600/9d743d193c46cb1da565102624ea132ba0d61159.gifv);
--picbelowbackground: url(https://i.pinimg.com/originals/04/77/da/0477dab36714ab4f8f0acc2d1466aa84.jpg) 0% 42%;
--picbelowfamily: url(https://www.j-14.com/wp-content/uploads/2020/06/gavin-leatherwood-love-life02.jpg?resize=1080%2C1080) 0 35%;

box-sizing: border-box; padding: 0; max-width: 700px; min-height: 450px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--leftbgcolor); display: flex; flex-direction: column; overflow: hidden; align-items:center;][border= 0; box-sizing: border-box; padding: 0; width: 100%; height: 137px; position: relative; display: flex; margin-bottom: 5px; justify-content:center; align-items:center;][comment]

Your left pics are here. If you don't want them to be in grayscale, change the number in the parentheses after the "filter: grayscale" to any number between 0.0 and 1.0.

[/comment][border=0; box-sizing: border-box; padding: 0; background: var(--leftbannerpictop); background-size: cover; filter: grayscale(1.0); height:150px; width:100%; border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left:0px;][/border][border=0; box-sizing: border-box; padding: 0; background: var(--leftbannerpicbottom); background-size: cover; filter: grayscale(1.0); height:150px; width:100%; border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left:0px; top: 250px;][/border][comment]

Your character name and quotes go here! If you'd like to change the position of the shadow, change the numbers after the "text-shadow:" to any numbers you'd like. The first number moves the shadow left and right, and the second moves it up and down. If the first number is negative, the shadow is moved to the left. If the second number is negative, the shadow is moved upward,

[/comment][border=0px; position: absolute; width: 100%; top: 145px; font-size: 27px; color: var(--namecolor); background: transparent; text-align: center; text-shadow: -2px 2px var(--nameshadowcolor); line-height:20px; left:-10px;][font=Contrail One][i][size=10px]"quote here."[/size][/i]
♔ CHARACTER NAME ♔
[i][size=10px]"quote here."[/size][/i][/font][/border][comment]

In all of these borders go your little aesthetic words/symbols behind the pic. If you don't want them, delete from the comment that says "start deleting here" to the comment that says "stop deleting here".

[/comment][comment]

Start deleting here if you don't want the aesthetic words.

[/comment][border=0px; width:7px; color: var(--littlewordsonleftsidecolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordsonleftsidecolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordsonleftsidecolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordsonleftsidecolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordsonleftsidecolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordsonleftsidecolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordsonleftsidecolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordsonleftsidecolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordsonleftsidecolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordsonleftsidecolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][border=0px; width:7px; color: var(--littlewordsonleftsidecolor);]✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁✁[/border][comment]

Stop deleting here if you don't want the aesthetic words.

[/comment][/border][/border][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 450px; background: var(--rightbgcolor); display: flex; flex-direction: column; overflow: hidden;][border=
0; box-sizing: border-box; padding: 0; flex: 1; position: relative; text-align: justify; overflow: auto; color: var(--maintextcolor); width: 200%;][border= 0; box-sizing: border-box; padding: 0; width: 50%; font-size: 12px; line-height: 14px;][border=0; box-sizing: border-box; padding: 0; background: var(--firstfourtopleft); background-size: cover; filter: grayscale(0.0); height:150px; width:150px; border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left:0px; top:0px;][/border][border=0; box-sizing: border-box; padding: 0; background: var(--firstfourtopright); background-size: cover; filter: grayscale(0.0); height:150px; width:150px; border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left:150px; top:0px;][/border][border=0; box-sizing: border-box; padding: 0; background: var(--firstfourbottomright); background-size: cover; filter: grayscale(0.0); height:150px; width:150px; border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left:150px; top:150px;][/border][border=0; box-sizing: border-box; padding: 0; background: var(--firstfourbottomleft); background-size: cover; filter: grayscale(0.0); height:150px; width:150px; border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left:0px; top:150px;][/border][border=0; box-sizing: border-box; padding: 0; background: var(--picbeneathfirstfour); background-size: cover; filter: grayscale(0.0); height:90px; width:300px; border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left:0px; top:300px;][/border] [border=0px; top:400px; height: 200px; width:70px; box-sizing: border-box; padding: 0; background: var(--basicspic); background-size: cover; filter: grayscale(0.0); border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left: 225px;][/border][border=0px; position: absolute; background: var(--rightbgcolor); top: 400px; height: 176px; width: 200px; border-radius:0px; line-height:15px; text: justify; color: var(--headerscolor); overflow-y: scroll; font-size:12px;][comment]

Basics header.

[/comment][size=40px][b][i]BASICS[/I][/b][/size][border=0px; box-sizing:border-box; padding:0; width:200px;][/border][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 90%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 11px;][comment]

Basics start here.

[/comment][b][size=8px][i]@[u]username[/u] has set their name to:[/i][/b][/size]
name here

[size=8px][b][i]@[u]username[/u] has set their nicknames to:[/i][/b][/size]
nicknames here

[size=8px][b][i]@[u]username[/u] has set their age to:[/i][/b][/size]
age here

[size=8px][b][i]@[u]username[/u] has set their birthday to:[/i][/b][/size]
birthday here

[size=8px][b][i]@[u]username[/u] has set their grade to:[/i][/b][/size]
grade here

[size=8px][b][i]@[u]username[/u] has set their gender to:[/i][/b][/size]
gender here

[size=8px][i]@[u]username[/u] has set their sexuality to:[/i][/size]
sexuality here[/border][/border][/border][/border][border=0px; top:610px; height: 200px; width:70px; box-sizing: border-box; padding: 0; background: var(--physicalpic); background-size: cover; filter: grayscale(0.0); border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); ][/border] [border=0px; position: absolute; background: var(--rightbgcolor); top: 610px; height: 176px; width: 200px; border-radius:0px; line-height:15px; text: justify; color: var(--headerscolor); overflow-y: scroll; font-size:12px; left:75px;][comment]

Physical header.

[/comment][size=40px][b][i]PHYSICAL[/I][/b][/size][border=0px; box-sizing:border-box; padding:0; width:200px;][/border][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 90%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 11px;][comment]

Physical starts here.

[/comment] [size=8px][b][i]@[u]username[/u] has set their hair color to:[/i][/b][/size]
hair color here

[size=8px][b][i]@[u]username[/u] has set their eye color to:[/i][/b][/size]
eye color here

[size=8px][b][i]@[u]username[/u] has set their body mods to:[/i][/b][/size]
body mods here

[size=8px][b][i]@[u]username[/u] has set their distinctive features to:[/i][/b][/size]
distinctive features here

 [size=8px][b][i]@[u]username[/u] has set their height to:[/i][/b][/size]
height here

[size=8px][b][i]@[u]username[/u] has set their build to:[/i][/b][/size]
build here

[size=8px][b][i]@[u]username[/u] has set their typical hair style to:[/i][/b][/size]
typical hair style here

[size=8px][i]@[u]username[/u] has set their typical clothing style to:[/i][/size]
clothing style here

[size=8px][i]@[u]username[/u] has set their face claim to:[/i][/size]
face claim here[/border][/border][/border] [border=0; box-sizing: border-box; padding: 0; background: var(--picabovepersona); background-size: cover; filter: grayscale(0.0); height:200px; width:300px; border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left:0px; top:825px;][/border][border=0px; position: absolute; background: var(--rightbgcolor); top: 1035px; height: 176px; width: 300px; border-radius:0px; line-height:15px; text: justify; color: var(--headerscolor); overflow-y: scroll; font-size:12px; left:0px;][comment]

Persona header.

[/comment][size=40px][b][i]PERSONA[/I][/b][/size][border=0px; box-sizing:border-box; padding:0; width:200%; left:-15px;][/border][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 90%; overflow: auto; left:-15px;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 48%; color: var(--maintextcolor); font-size: 11px; line-height: 11px;][comment]

Persona starts here. Don't delete the little "[center] [/center]"s. They're important for keeping the spacing.

[/comment][size=8px][b][i]@[u]username[/u] has updated their personality summary:[/i][/b][/size]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

[center] [/center]

[b][i]@[u]username[/u] has updated their virtues:[/i][/b]

☆
☆
☆
☆
☆

[center] [/center]

[b][i]@[u]username[/u] has updated their vices:[/i][/b]

★
★
★
★
★

[center] [/center]


[b][i]@[u]username[/u] has updated their likes:[/i][/b]

♡
♡
♡
♡
♡

[center] [/center]

[b][i]@[u]username[/u] has updated their dislikes:[/i][/b]

❯
❯
❯
❯
❯

[center] [/center]

[/border][/border][/border][border=0; box-sizing: border-box; padding: 0; background: var(--firstpicbelowpersona); background-size: cover; filter: grayscale(0.0); height:185px; width:300px; border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left:0px; top:1245px;][/border][border=0; box-sizing: border-box; padding: 0; background: var(--secondpicbelowpersona); background-size: cover; filter: grayscale(0.0); height:185px; width:300px; border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left:0px; top:1445px;][/border][border=0px; position: absolute; background: var(--rightbgcolor); top: 1635px; height: 176px; width: 300px; border-radius:0px; line-height:15px; text: justify; color: var(--headerscolor); overflow-y: scroll; font-size:12px; left:0px;][comment]

Background header.

[/comment][size=40px][b][i]BACKGROUND[/I][/b][/size][border=0px; box-sizing:border-box; padding:0; width:200%; left:-15px;][/border][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 90%; overflow: auto; left:-15px;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 48%; color: var(--maintextcolor); font-size: 11px; line-height: 11px;][comment]

Background starts here.

[/comment][size=8px][b][i]@[u]username[/u] has updated their background:[/i][/b][/size]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.[/border][/border][/border][border=0; box-sizing: border-box; padding: 0; background: var(--picbelowbackground); background-size: cover; filter: grayscale(0.0); height:85px; width:300px; border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left:0px; top:1835px;][/border][border=0px; position: absolute; background: var(--rightbgcolor); top: 1935px; height: 176px; width: 300px; border-radius:0px; line-height:15px; text: justify; color: var(--headerscolor); overflow-y: scroll; font-size:12px; left:0px;][comment]

Family header.

[/comment][size=40px][b][i]FAMILY[/I][/b][/size][border=0px; box-sizing:border-box; padding:0; width:200%; left:-15px;][/border][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 90%; overflow: auto; left:-15px;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 48%; color: var(--maintextcolor); font-size: 11px; line-height: 11px;][comment]

Family starts here.

[/comment][size=8px][b][i]@[u]username[/u] has updated their family information:[/i][/b][/size]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie consequat arcu. Vivamus venenatis nibh risus, ac semper velit molestie vel. Morbi mattis lacus mollis fringilla dignissim. In non quam tellus. Cras sit amet risus ipsum. Vivamus sit amet scelerisque libero, sed ultrices ipsum. Integer cursus arcu tortor, quis venenatis est bibendum sit amet. Sed aliquet ligula quis dolor sagittis vulputate non ut mauris. Sed sed euismod mauris. Maecenas quis ipsum tempus, dictum urna quis, scelerisque magna. Suspendisse iaculis sed ante sit amet iaculis. Maecenas magna risus, volutpat sit amet ipsum vel, semper tincidunt enim. Sed in justo vel justo cursus porta. Sed aliquam eleifend mi, at auctor nisl rhoncus quis. Morbi pretium mi vitae lacus gravida, ac varius purus feugiat.

Ut sit amet posuere nisl, eget ornare nisi. Nullam ut auctor dui. Integer vel magna dictum, ultrices eros a, dictum ex. Quisque gravida, arcu non pulvinar lacinia, libero velit tristique neque, sed rutrum ligula urna efficitur sem. Nullam sit amet justo consequat, dapibus nibh eget, convallis mauris. Vivamus sit amet quam sit amet erat semper dignissim quis ut ex. Proin ullamcorper at dolor vitae fermentum. Nulla malesuada odio ut libero posuere euismod. Proin vulputate, magna at mattis vehicula, nulla quam lacinia dolor, vel sodales justo nisl eget eros. Etiam imperdiet, lacus id eleifend egestas, risus mi pharetra nisi, quis varius odio metus id justo. Aenean vel congue ligula.[/border][/border][/border]
[border=0; box-sizing: border-box; padding: 0; background: var(--picbelowfamily); background-size: cover; filter: grayscale(0.0); height:130px; width:300px; border-radius: 0%; position:absolute; border: 2px solid var(--imageborder); left:0px; top:2145px;][/border]

[/border][/border][comment]

Please don't delete the credit!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;] º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º code by ditto º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º [/border][/border]
 
Last edited:
EqualShadyAphid-small.gif
 
Absolutely beautiful. Absolutely amazing. 10/10 codes. Gorgeous and easy to use, like.
A true master of code, Ditto.
 








YELLOW


mobile-friendly!
in-character post!
hidden scrolls!
MUSIC PLAYER!



º º code by ditto º º


i'm in love with an e-girl...
Char Name
subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat ante dignissim, pharetra lacus vel, suscipit justo. Integer dictum mauris sit amet tellus consequat, ut tristique est rhoncus. Nulla in maximus urna. Proin venenatis hendrerit quam at aliquam. Nam nec dolor urna. Nunc lacinia tincidunt tristique. Vestibulum mollis sem in leo scelerisque finibus. Sed elementum vestibulum hendrerit. Proin vestibulum quis felis vulputate venenatis. Proin ut felis a dui dictum auctor. Donec aliquam dui quis mauris feugiat iaculis.

Quisque pretium nibh vel ultricies rhoncus. Ut ut felis posuere, consequat dolor sit amet, posuere dolor. Donec vitae porttitor lectus. Cras sed ullamcorper eros. Vestibulum pretium enim nulla, at pharetra est hendrerit ac. Nunc metus felis, ornare eget erat nec, semper mattis risus. Curabitur sollicitudin elit quis metus commodo, id hendrerit mauris consectetur. Suspendisse semper lacinia purus id vulputate. Sed id nulla et eros faucibus sodales id ac diam. Suspendisse sagittis rhoncus odio, nec hendrerit turpis tristique id. Aliquam vel vestibulum magna. Quisque convallis neque et tristique vestibulum. Vestibulum aliquam vestibulum nunc ut lobortis. Cras in ornare quam. Curabitur massa magna, mattis in ligula sit amet, mollis placerat magna. Maecenas consectetur non tortor eget sollicitudin.

Nulla dictum enim diam, efficitur consequat ante tincidunt vel. Etiam vulputate bibendum augue, quis laoreet magna dignissim nec. Nunc tristique mi a felis laoreet, eget feugiat diam ultricies. Aliquam malesuada tortor in risus congue, non malesuada sapien pharetra. Morbi metus erat, tincidunt nec ultricies nec, imperdiet sit amet eros. Donec a lorem sapien. Vivamus bibendum, libero sit amet tempor efficitur, turpis odio mattis ante, eget tempor purus magna sit amet libero. Morbi id varius ante. Aliquam varius bibendum arcu, sit amet congue arcu rutrum sit amet. Nam quis vehicula nunc.

Sed pretium mauris finibus nibh placerat, non tristique dui blandit. Nullam vehicula molestie diam ut sollicitudin. Sed nec ante imperdiet, convallis ante ac, convallis nunc. Maecenas volutpat libero nulla, eu pharetra eros mattis ac. Cras luctus nisl nisi. Morbi eu erat tortor. Integer euismod ac metus eu posuere.

Duis gravida id ante nec euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum urna, sollicitudin sit amet mauris at, pharetra imperdiet ligula. Praesent laoreet aliquam commodo. Nam et tortor quis odio finibus sagittis ac eu ipsum. Nulla eleifend vel leo ac hendrerit. Curabitur et iaculis elit.
| mood: mood | outfit: outfit | location: location | mentions: mentions | interactions: interactions | tags: tags |
º º code by ditto º º
Code:
[border= 0;

--bgcolor: #ECE6D2;
--maintextcolor: #4E3600;
--pic: url(https://media1.tenor.com/images/dbf183a2bb59ad5bb8eee63da9a7d293/tenor.gif?itemid=13630034) 60% 0%;
--namecolor: #e28c9b;
--moodthingscolor: #fafafa;
--topbox: #DBC188; 
--textbackground: #DBC188;
--namecolor: #4E3600;
--subtitlecolor: #4E3600;
--topboxtextcolor: #4E3600;
--moodthingscolor: #4E3600;

box-sizing: border-box; padding: 0; max-width: 375px; min-height: 500px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][border= 0; box-sizing: border-box; padding: 0px; width: 375px; height: 500px; background: var(--bgcolor); display: flex; flex-direction: column; overflow:auto;][border=transparent; height:20px; width:20px; padding:0; overflow:hidden; position:absolute; top:10px; left:330px;][border=transparent; height:80px; width:180px; padding:0; margin-top:-2px; margin-left:-10px; top:-40px;][comment]

Put whatever (SoundCloud) song you'd like as the link between the media brackets!

[/comment][media=soundcloud]https://soundcloud.com/wilbur-soot/im-in-love-with-an-e-girl[/media][/border][/border][border=0; box-sizing: border-box; width:375px; height:50px; background: var(--topbox); color: var(--topboxtextcolor); text-align: right; pointer-events: none; position: absolute;][comment]

This is the box with the song. Click the play button to play the song!

The font is Quicksand, but feel free to change it!

[/comment] [font=quicksand] i'm in love with an e-girl... [/font] [fa] fas fa-play[/fa] [fa] fas fa-pause[/fa][/border][border=0; box-sizing: border-box; width:375px; height:150px; color: var(--namecolor); text-align: right; top:25px; position:absolute; font-size: 36px; padding: 25px; pointer-events: none; ][comment]

Character name goes here! If it doesn't fit, change the "font-size" of the border before this comment. Feel free to change the font in the brackets after this. If the name isn't placed how you'd like it, change the "top:25px" to any pixels.

[/comment][font=Quicksand] Char Name[/font][border=0; box-sizing: border-box; width:375px; height:150px; color: var(--subtitle); text-align: right; top:45px; left: -5px; position:absolute; font-size: 12px; padding: 25px; pointer-events: none; ][comment]

If you don't like where the words are placed, change the "top:45px" to any pixels. Feel free to change the font in the brackets after this.

[/comment][font=Quicksand]subtitle[/font][/border][/border][border=0px; position: absolute; background: var(--textbackground); top: 125px; height: 306px; width: 300px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: scroll; left:30px; font-size:12px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); text-align: justify; font-size: 11px; line-height: 15px;][comment]

Here starts your post!

[/comment]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer volutpat ante dignissim, pharetra lacus vel, suscipit justo. Integer dictum mauris sit amet tellus consequat, ut tristique est rhoncus. Nulla in maximus urna. Proin venenatis hendrerit quam at aliquam. Nam nec dolor urna. Nunc lacinia tincidunt tristique. Vestibulum mollis sem in leo scelerisque finibus. Sed elementum vestibulum hendrerit. Proin vestibulum quis felis vulputate venenatis. Proin ut felis a dui dictum auctor. Donec aliquam dui quis mauris feugiat iaculis.

Quisque pretium nibh vel ultricies rhoncus. Ut ut felis posuere, consequat dolor sit amet, posuere dolor. Donec vitae porttitor lectus. Cras sed ullamcorper eros. Vestibulum pretium enim nulla, at pharetra est hendrerit ac. Nunc metus felis, ornare eget erat nec, semper mattis risus. Curabitur sollicitudin elit quis metus commodo, id hendrerit mauris consectetur. Suspendisse semper lacinia purus id vulputate. Sed id nulla et eros faucibus sodales id ac diam. Suspendisse sagittis rhoncus odio, nec hendrerit turpis tristique id. Aliquam vel vestibulum magna. Quisque convallis neque et tristique vestibulum. Vestibulum aliquam vestibulum nunc ut lobortis. Cras in ornare quam. Curabitur massa magna, mattis in ligula sit amet, mollis placerat magna. Maecenas consectetur non tortor eget sollicitudin.

Nulla dictum enim diam, efficitur consequat ante tincidunt vel. Etiam vulputate bibendum augue, quis laoreet magna dignissim nec. Nunc tristique mi a felis laoreet, eget feugiat diam ultricies. Aliquam malesuada tortor in risus congue, non malesuada sapien pharetra. Morbi metus erat, tincidunt nec ultricies nec, imperdiet sit amet eros. Donec a lorem sapien. Vivamus bibendum, libero sit amet tempor efficitur, turpis odio mattis ante, eget tempor purus magna sit amet libero. Morbi id varius ante. Aliquam varius bibendum arcu, sit amet congue arcu rutrum sit amet. Nam quis vehicula nunc.

Sed pretium mauris finibus nibh placerat, non tristique dui blandit. Nullam vehicula molestie diam ut sollicitudin. Sed nec ante imperdiet, convallis ante ac, convallis nunc. Maecenas volutpat libero nulla, eu pharetra eros mattis ac. Cras luctus nisl nisi. Morbi eu erat tortor. Integer euismod ac metus eu posuere.

Duis gravida id ante nec euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum urna, sollicitudin sit amet mauris at, pharetra imperdiet ligula. Praesent laoreet aliquam commodo. Nam et tortor quis odio finibus sagittis ac eu ipsum. Nulla eleifend vel leo ac hendrerit. Curabitur et iaculis elit.[/border][/border][/border][border=0;box-sizing: border-box; width:150px; height:150px; background: var(--pic); top: 0px; left:0px; background-size:cover; position: absolute; border-radius: 100%; border: 5px solid var(--bgcolor);][/border][border=0px; position: absolute; height: 28px; width: 325px; border-radius:0px; line-height:15px; overflow-y: scroll; left:25px; top: 450px; font-size:12px; overflow:auto;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--moodthingscolor); font-size: 8px; line-height: 15px; text-align: center;][comment]

Here go your mood thingies! (Ooh, yes, the bottom words *scroll*!)

[/comment]| [b]mood:[/b] mood | [b]outfit:[/b] outfit | [b]location:[/b] location | [b]mentions:[/b] mentions | [b]interactions:[/b] interactions | [b]tags:[/b] tags |[/border][/border][/border][/border][comment]

Here's the credit-- please don't delete it!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;] º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º code by ditto º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º [/border][/border]
 
Last edited:








CACTUS


mobile-friendly!
in-character post!
hidden scrolls!



º º code by ditto º º


  • Char Name
    QUOTE HERE IN ALL CAPS
    JUST BECAUSE IT’S AESTHETICALLY
    PLEASING AND I LIKE HOW IT LOOKS
    WHEN IT HAS A QUOTE
    HERE
    SKIP NAME
    "in here goes another quote ooh ahh pretty"
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum scelerisque dolor, id auctor sem lobortis ut. Suspendisse potenti. Donec volutpat enim tortor, ut efficitur diam commodo eu. Curabitur sollicitudin, urna ac auctor molestie, lectus metus convallis metus, nec efficitur lorem lectus ac risus. Phasellus tristique enim nisi, nec mattis lacus vestibulum quis. Morbi eleifend, ante eu bibendum ornare, tellus arcu dignissim mi, nec porta nisl massa vitae mi. Vestibulum bibendum elementum eleifend. Etiam convallis feugiat odio id rhoncus. Duis pretium vestibulum mi sed cursus. Vivamus non laoreet felis. Nullam egestas ipsum eu egestas laoreet.

    Nam in volutpat felis, eu ullamcorper dui. Integer tincidunt nisi leo, quis ornare lacus gravida non. Nam sit amet ante ornare, placerat lacus eget, iaculis justo. Fusce et magna vulputate, ullamcorper sapien sed, volutpat tortor. Integer velit dolor, egestas sed placerat eget, luctus non eros. Integer id tellus ultricies, porta sem et, ultrices ex. Phasellus feugiat ligula eget dui blandit aliquet. Aenean pretium, ligula a viverra tristique, massa eros laoreet sapien, at rhoncus mi leo vel elit.

    Vestibulum ultrices ornare nibh at euismod. Nulla facilisi. Mauris dignissim tellus a accumsan fermentum. Proin id urna a orci consequat imperdiet. Donec ultricies odio vel magna rutrum volutpat. Donec facilisis diam a massa vehicula laoreet. Maecenas mattis ligula eget pulvinar semper. Etiam sed pretium nunc. Sed nulla urna, interdum eu elit non, dignissim dictum mauris. Quisque hendrerit ligula felis, iaculis viverra metus malesuada in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus posuere a ex vel posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras at malesuada ante. Duis sollicitudin dolor eget varius egestas. Sed et nulla neque.

    Nunc lacinia mauris nulla, quis condimentum risus elementum a. Nunc commodo leo nibh, a faucibus urna viverra at. Vivamus libero mauris, blandit sollicitudin feugiat bibendum, dapibus ut quam. Quisque id suscipit lectus, at aliquet dolor. Praesent ultrices, magna ut dapibus semper, risus magna molestie ex, volutpat dapibus ante est nec massa. Nullam iaculis dui quis libero pulvinar aliquet. Aenean pretium iaculis nisl quis tincidunt. Aliquam ut nisi purus.

    Aenean sed dictum nibh. Quisque porttitor libero ut sapien mattis, sed auctor lorem volutpat. Nulla auctor finibus ullamcorper. Cras eget lorem auctor, consectetur libero eu, sodales dolor. Phasellus pulvinar lectus placerat pulvinar tristique. Aenean vitae felis nisl. Fusce cursus non nisl sit amet euismod. Phasellus faucibus egestas tempus. Suspendisse blandit lobortis viverra. Vivamus at dictum metus.
    MOOD: mood | OUTFIT: outfit | LOCATION: location
    MENTIONS: mentions | INTERACTIONS: interactions
    TAGS: tags
    º º code by ditto º º
Code:
[border= 0;

--bgcolor: #74A0B0;
--maintextcolor: #002533;
--characterpic: url(https://media1.tenor.com/images/4f60cde059c0f86914d1949a98a27a29/tenor.gif?itemid=10838704) 60% 0%;
--namecolor: #fafafa;
--quotebesidepiccolor: #fafafa;
--moodthingscolor: #fafafa;
--skipnamecolor: #fafafa;
--smallquotecolor: #fafafa;
--imagebehindtext: url(https://i.pinimg.com/564x/3a/48/36/3a48368782ab5862ad354ca41cabab26.jpg); 
--textbackground: #fafafa;
--bottomtagthingcolor: #fafafa;
--imageborder: #fafafa;

box-sizing: border-box; padding: 0; max-width: 375px; min-height: 500px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][border= 0; box-sizing: border-box; padding: 0px; width: 375px; height: 500px; background: var(--bgcolor); display: flex; flex-direction: column; overflow:auto;][border=0; box-sizing: border-box; padding: 0px; position: absolute; background: var(--characterpic); background-size: cover; width: 179px; height:100px; border-radius: 15px; left: 11px; top: 25px; border: 1px solid var(--imageborder);][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: 345px; height: 56px; font-size: 51px; font-family: Bebas Neue; color: var(--namecolor); left: 0px; top: 93px; text-align: right;][comment]

Here goes your character name!

[/comment]Char Name[/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: fit-content; height: 53px; font-size: 8px; font-family: Helvetica Neue; color: var(--quotebesidepiccolor); left: 196px; top: 36px;][comment]

A longer quote and/or song lyric goes here! If you don't want this, you can just delete the text and leave it blank.

[/comment]QUOTE HERE IN ALL CAPS
JUST BECAUSE IT’S AESTHETICALLY
PLEASING AND I LIKE HOW IT LOOKS
WHEN IT HAS A QUOTE
HERE[/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: fit-content; height: 20px; font-size: 15px; font-family: Helvetica Neue; color: var(--quotebesidepiccolor); left: 19px; top: 128px;][comment]

Put the skip name here-- or anything else you'd like!

[/comment][b]SKIP NAME[/b][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: 238px; height: 15px; font-size: 10px; font-family: Helvetica Neue; color: var(--quotebesidepiccolor); left: 116px; top: 150px; text-align: right;][comment]

Here goes a (small) quote to go beneath the name!

[/comment][i]"in here goes another quote ooh ahh pretty"[/i][/border][border=0px; position: absolute; top: 175px; left: 19px; height: 264px; width: 300px; border-radius:0px; line-height:15px; text: justify; background: var(--imagebehindtext); background-size: cover; overflow-y: scroll; left:30px; font-size:12px;][/border][border=0px; position: absolute; top: 175px; left: 19px; height: 264px; width: 300px; border-radius:0px; line-height:15px; text: justify; background: var(--textbackground); overflow-y: scroll; left:30px; font-size:12px; opacity: 85%;][/border][border=0px; position: absolute; top: 175px; left: 19px; height: 264px; width: 300px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: scroll; left:30px; font-size:12px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 15px; letter-spacing: .5px; text-align: justify; font-family: Helvetica Neue;][comment]

Here starts your post!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum scelerisque dolor, id auctor sem lobortis ut. Suspendisse potenti. Donec volutpat enim tortor, ut efficitur diam commodo eu. Curabitur sollicitudin, urna ac auctor molestie, lectus metus convallis metus, nec efficitur lorem lectus ac risus. Phasellus tristique enim nisi, nec mattis lacus vestibulum quis. Morbi eleifend, ante eu bibendum ornare, tellus arcu dignissim mi, nec porta nisl massa vitae mi. Vestibulum bibendum elementum eleifend. Etiam convallis feugiat odio id rhoncus. Duis pretium vestibulum mi sed cursus. Vivamus non laoreet felis. Nullam egestas ipsum eu egestas laoreet.

Nam in volutpat felis, eu ullamcorper dui. Integer tincidunt nisi leo, quis ornare lacus gravida non. Nam sit amet ante ornare, placerat lacus eget, iaculis justo. Fusce et magna vulputate, ullamcorper sapien sed, volutpat tortor. Integer velit dolor, egestas sed placerat eget, luctus non eros. Integer id tellus ultricies, porta sem et, ultrices ex. Phasellus feugiat ligula eget dui blandit aliquet. Aenean pretium, ligula a viverra tristique, massa eros laoreet sapien, at rhoncus mi leo vel elit.

Vestibulum ultrices ornare nibh at euismod. Nulla facilisi. Mauris dignissim tellus a accumsan fermentum. Proin id urna a orci consequat imperdiet. Donec ultricies odio vel magna rutrum volutpat. Donec facilisis diam a massa vehicula laoreet. Maecenas mattis ligula eget pulvinar semper. Etiam sed pretium nunc. Sed nulla urna, interdum eu elit non, dignissim dictum mauris. Quisque hendrerit ligula felis, iaculis viverra metus malesuada in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus posuere a ex vel posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras at malesuada ante. Duis sollicitudin dolor eget varius egestas. Sed et nulla neque.

Nunc lacinia mauris nulla, quis condimentum risus elementum a. Nunc commodo leo nibh, a faucibus urna viverra at. Vivamus libero mauris, blandit sollicitudin feugiat bibendum, dapibus ut quam. Quisque id suscipit lectus, at aliquet dolor. Praesent ultrices, magna ut dapibus semper, risus magna molestie ex, volutpat dapibus ante est nec massa. Nullam iaculis dui quis libero pulvinar aliquet. Aenean pretium iaculis nisl quis tincidunt. Aliquam ut nisi purus.

Aenean sed dictum nibh. Quisque porttitor libero ut sapien mattis, sed auctor lorem volutpat. Nulla auctor finibus ullamcorper. Cras eget lorem auctor, consectetur libero eu, sodales dolor. Phasellus pulvinar lectus placerat pulvinar tristique. Aenean vitae felis nisl. Fusce cursus non nisl sit amet euismod. Phasellus faucibus egestas tempus. Suspendisse blandit lobortis viverra. Vivamus at dictum metus.[/border][/border][/border][border=0px; position: absolute; height: 28px; width: 325px; border-radius:0px; line-height:15px; overflow-y: scroll; left:20px; top: 455px; font-size:12px; overflow:auto;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--bottomtagthingcolor); font-size: 15px; line-height: 15px; font-family: Bebas Neue; text-align: center;][comment]

Here go your mood thingies! (Ooh, yes, the bottom words *scroll*!)

[/comment]MOOD: mood | OUTFIT: outfit | LOCATION: location 
MENTIONS: mentions | INTERACTIONS: interactions 
TAGS: tags[/border][/border][/border][/border][comment]

Please do not delete the credit!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;] º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º code by ditto º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º [/border][/border]
Code:
[border= 0;

--bgcolor: #74A0B0;
--maintextcolor: #002533;
--characterpic: url(https://media1.tenor.com/images/4f60cde059c0f86914d1949a98a27a29/tenor.gif?itemid=10838704) 60% 0%;
--namecolor: #fafafa;
--quotebesidepiccolor: #fafafa;
--moodthingscolor: #fafafa;
--skipnamecolor: #fafafa;
--smallquotecolor: #fafafa;
--textbackground: #fafafa;
--bottomtagthingcolor: #fafafa;
--imageborder: #fafafa;

box-sizing: border-box; padding: 0; max-width: 375px; min-height: 500px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][border= 0; box-sizing: border-box; padding: 0px; width: 375px; height: 500px; background: var(--bgcolor); display: flex; flex-direction: column; overflow:auto;][border=0; box-sizing: border-box; padding: 0px; position: absolute; background: var(--characterpic); background-size: cover; width: 179px; height:100px; border-radius: 15px; left: 11px; top: 25px; border: 1px solid var(--imageborder);][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: 345px; height: 56px; font-size: 51px; font-family: Bebas Neue; color: var(--namecolor); left: 0px; top: 93px; text-align: right;][comment]

Here goes your character name!

[/comment]Char Name[/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: fit-content; height: 53px; font-size: 8px; font-family: Helvetica Neue; color: var(--quotebesidepiccolor); left: 196px; top: 36px;][comment]

A longer quote and/or song lyric goes here! If you don't want this, you can just delete the text and leave it blank.

[/comment]QUOTE HERE IN ALL CAPS
JUST BECAUSE IT’S AESTHETICALLY
PLEASING AND I LIKE HOW IT LOOKS
WHEN IT HAS A QUOTE
HERE[/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: fit-content; height: 20px; font-size: 15px; font-family: Helvetica Neue; color: var(--quotebesidepiccolor); left: 19px; top: 128px;][comment]

Put the skip name here-- or anything else you'd like!

[/comment][b]SKIP NAME[/b][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: 238px; height: 15px; font-size: 10px; font-family: Helvetica Neue; color: var(--quotebesidepiccolor); left: 116px; top: 150px; text-align: right;][comment]

Here goes a (small) quote to go beneath the name!

[/comment][i]"in here goes another quote ooh ahh pretty"[/i][/border][border=0px; position: absolute; top: 175px; left: 19px; height: 264px; width: 300px; border-radius:0px; line-height:15px; text: justify; background: var(--textbackground); overflow-y: scroll; left:30px; font-size:12px; opacity: 85%;][/border][border=0px; position: absolute; top: 175px; left: 19px; height: 264px; width: 300px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: scroll; left:30px; font-size:12px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 15px; letter-spacing: .5px; text-align: justify; font-family: Helvetica Neue;][comment]

Here starts your post!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum scelerisque dolor, id auctor sem lobortis ut. Suspendisse potenti. Donec volutpat enim tortor, ut efficitur diam commodo eu. Curabitur sollicitudin, urna ac auctor molestie, lectus metus convallis metus, nec efficitur lorem lectus ac risus. Phasellus tristique enim nisi, nec mattis lacus vestibulum quis. Morbi eleifend, ante eu bibendum ornare, tellus arcu dignissim mi, nec porta nisl massa vitae mi. Vestibulum bibendum elementum eleifend. Etiam convallis feugiat odio id rhoncus. Duis pretium vestibulum mi sed cursus. Vivamus non laoreet felis. Nullam egestas ipsum eu egestas laoreet.

Nam in volutpat felis, eu ullamcorper dui. Integer tincidunt nisi leo, quis ornare lacus gravida non. Nam sit amet ante ornare, placerat lacus eget, iaculis justo. Fusce et magna vulputate, ullamcorper sapien sed, volutpat tortor. Integer velit dolor, egestas sed placerat eget, luctus non eros. Integer id tellus ultricies, porta sem et, ultrices ex. Phasellus feugiat ligula eget dui blandit aliquet. Aenean pretium, ligula a viverra tristique, massa eros laoreet sapien, at rhoncus mi leo vel elit.

Vestibulum ultrices ornare nibh at euismod. Nulla facilisi. Mauris dignissim tellus a accumsan fermentum. Proin id urna a orci consequat imperdiet. Donec ultricies odio vel magna rutrum volutpat. Donec facilisis diam a massa vehicula laoreet. Maecenas mattis ligula eget pulvinar semper. Etiam sed pretium nunc. Sed nulla urna, interdum eu elit non, dignissim dictum mauris. Quisque hendrerit ligula felis, iaculis viverra metus malesuada in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus posuere a ex vel posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras at malesuada ante. Duis sollicitudin dolor eget varius egestas. Sed et nulla neque.

Nunc lacinia mauris nulla, quis condimentum risus elementum a. Nunc commodo leo nibh, a faucibus urna viverra at. Vivamus libero mauris, blandit sollicitudin feugiat bibendum, dapibus ut quam. Quisque id suscipit lectus, at aliquet dolor. Praesent ultrices, magna ut dapibus semper, risus magna molestie ex, volutpat dapibus ante est nec massa. Nullam iaculis dui quis libero pulvinar aliquet. Aenean pretium iaculis nisl quis tincidunt. Aliquam ut nisi purus.

Aenean sed dictum nibh. Quisque porttitor libero ut sapien mattis, sed auctor lorem volutpat. Nulla auctor finibus ullamcorper. Cras eget lorem auctor, consectetur libero eu, sodales dolor. Phasellus pulvinar lectus placerat pulvinar tristique. Aenean vitae felis nisl. Fusce cursus non nisl sit amet euismod. Phasellus faucibus egestas tempus. Suspendisse blandit lobortis viverra. Vivamus at dictum metus.[/border][/border][/border][border=0px; position: absolute; height: 28px; width: 325px; border-radius:0px; line-height:15px; overflow-y: scroll; left:20px; top: 455px; font-size:12px; overflow:auto;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--bottomtagthingcolor); font-size: 15px; line-height: 15px; font-family: Bebas Neue; text-align: center;][comment]

Here go your mood thingies! (Ooh, yes, the bottom words *scroll*!)

[/comment]MOOD: mood | OUTFIT: outfit | LOCATION: location 
MENTIONS: mentions | INTERACTIONS: interactions 
TAGS: tags[/border][/border][/border][/border][comment]

Please do not delete the credit!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;] º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º code by ditto º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º [/border][/border]
Code:
[border= 0;

--bgcolor: #74A0B0;
--maintextcolor: #fafafa;
--characterpic: url(https://media1.tenor.com/images/4f60cde059c0f86914d1949a98a27a29/tenor.gif?itemid=10838704) 60% 0%;
--namecolor: #fafafa;
--quotebesidepiccolor: #fafafa;
--moodthingscolor: #fafafa;
--skipnamecolor: #fafafa;
--smallquotecolor: #fafafa;
--textbackground: #fafafa;
--bottomtagthingcolor: #fafafa;
--imageborder: #fafafa;

box-sizing: border-box; padding: 0; max-width: 375px; min-height: 500px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][border= 0; box-sizing: border-box; padding: 0px; width: 375px; height: 500px; background: var(--bgcolor); display: flex; flex-direction: column; overflow:auto;][border=0; box-sizing: border-box; padding: 0px; position: absolute; background: var(--characterpic); background-size: cover; width: 179px; height:100px; border-radius: 15px; left: 11px; top: 25px; border: 1px solid var(--imageborder);][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: 345px; height: 56px; font-size: 51px; font-family: Bebas Neue; color: var(--namecolor); left: 0px; top: 93px; text-align: right;][comment]

Here goes your character name!

[/comment]Char Name[/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: fit-content; height: 53px; font-size: 8px; font-family: Helvetica Neue; color: var(--quotebesidepiccolor); left: 196px; top: 36px;][comment]

A longer quote and/or song lyric goes here! If you don't want this, you can just delete the text and leave it blank.

[/comment]QUOTE HERE IN ALL CAPS
JUST BECAUSE IT’S AESTHETICALLY
PLEASING AND I LIKE HOW IT LOOKS
WHEN IT HAS A QUOTE
HERE[/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: fit-content; height: 20px; font-size: 15px; font-family: Helvetica Neue; color: var(--quotebesidepiccolor); left: 19px; top: 128px;][comment]

Put the skip name here-- or anything else you'd like!

[/comment][b]SKIP NAME[/b][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: 238px; height: 15px; font-size: 10px; font-family: Helvetica Neue; color: var(--quotebesidepiccolor); left: 116px; top: 150px; text-align: right;][comment]

Here goes a (small) quote to go beneath the name!

[/comment][i]"in here goes another quote ooh ahh pretty"[/i][/border][border=0px; position: absolute; top: 175px; left: 19px; height: 264px; width: 300px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: scroll; left:30px; font-size:12px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 15px; letter-spacing: .5px; text-align: justify; font-family: Helvetica Neue;][comment]

Here starts your post!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum scelerisque dolor, id auctor sem lobortis ut. Suspendisse potenti. Donec volutpat enim tortor, ut efficitur diam commodo eu. Curabitur sollicitudin, urna ac auctor molestie, lectus metus convallis metus, nec efficitur lorem lectus ac risus. Phasellus tristique enim nisi, nec mattis lacus vestibulum quis. Morbi eleifend, ante eu bibendum ornare, tellus arcu dignissim mi, nec porta nisl massa vitae mi. Vestibulum bibendum elementum eleifend. Etiam convallis feugiat odio id rhoncus. Duis pretium vestibulum mi sed cursus. Vivamus non laoreet felis. Nullam egestas ipsum eu egestas laoreet.

Nam in volutpat felis, eu ullamcorper dui. Integer tincidunt nisi leo, quis ornare lacus gravida non. Nam sit amet ante ornare, placerat lacus eget, iaculis justo. Fusce et magna vulputate, ullamcorper sapien sed, volutpat tortor. Integer velit dolor, egestas sed placerat eget, luctus non eros. Integer id tellus ultricies, porta sem et, ultrices ex. Phasellus feugiat ligula eget dui blandit aliquet. Aenean pretium, ligula a viverra tristique, massa eros laoreet sapien, at rhoncus mi leo vel elit.

Vestibulum ultrices ornare nibh at euismod. Nulla facilisi. Mauris dignissim tellus a accumsan fermentum. Proin id urna a orci consequat imperdiet. Donec ultricies odio vel magna rutrum volutpat. Donec facilisis diam a massa vehicula laoreet. Maecenas mattis ligula eget pulvinar semper. Etiam sed pretium nunc. Sed nulla urna, interdum eu elit non, dignissim dictum mauris. Quisque hendrerit ligula felis, iaculis viverra metus malesuada in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus posuere a ex vel posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras at malesuada ante. Duis sollicitudin dolor eget varius egestas. Sed et nulla neque.

Nunc lacinia mauris nulla, quis condimentum risus elementum a. Nunc commodo leo nibh, a faucibus urna viverra at. Vivamus libero mauris, blandit sollicitudin feugiat bibendum, dapibus ut quam. Quisque id suscipit lectus, at aliquet dolor. Praesent ultrices, magna ut dapibus semper, risus magna molestie ex, volutpat dapibus ante est nec massa. Nullam iaculis dui quis libero pulvinar aliquet. Aenean pretium iaculis nisl quis tincidunt. Aliquam ut nisi purus.

Aenean sed dictum nibh. Quisque porttitor libero ut sapien mattis, sed auctor lorem volutpat. Nulla auctor finibus ullamcorper. Cras eget lorem auctor, consectetur libero eu, sodales dolor. Phasellus pulvinar lectus placerat pulvinar tristique. Aenean vitae felis nisl. Fusce cursus non nisl sit amet euismod. Phasellus faucibus egestas tempus. Suspendisse blandit lobortis viverra. Vivamus at dictum metus.[/border][/border][/border][border=0px; position: absolute; height: 28px; width: 325px; border-radius:0px; line-height:15px; overflow-y: scroll; left:20px; top: 455px; font-size:12px; overflow:auto;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--bottomtagthingcolor); font-size: 15px; line-height: 15px; font-family: Bebas Neue; text-align: center;][comment]

Here go your mood thingies! (Ooh, yes, the bottom words *scroll*!)

[/comment]MOOD: mood | OUTFIT: outfit | LOCATION: location 
MENTIONS: mentions | INTERACTIONS: interactions 
TAGS: tags[/border][/border][/border][/border][comment]

Please do not delete the credit!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;] º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º code by ditto º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º [/border][/border]
Code:
[border= 0;

--bgcolor: #74A0B0;
--maintextcolor: #fafafa;
--characterpic: url(https://media1.tenor.com/images/4f60cde059c0f86914d1949a98a27a29/tenor.gif?itemid=10838704) 60% 0%;
--namecolor: #fafafa;
--quotebesidepiccolor: #fafafa;
--moodthingscolor: #fafafa;
--skipnamecolor: #fafafa;
--smallquotecolor: #fafafa;
--textbackground: #fafafa;
--bottomtagthingcolor: #fafafa;
--imageborder: #fafafa;
--textboxborder: #fafafa;

box-sizing: border-box; padding: 0; max-width: 375px; min-height: 500px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][border= 0; box-sizing: border-box; padding: 0px; width: 375px; height: 500px; background: var(--bgcolor); display: flex; flex-direction: column; overflow:auto;][border=0; box-sizing: border-box; padding: 0px; position: absolute; background: var(--characterpic); background-size: cover; width: 179px; height:100px; border-radius: 15px; left: 11px; top: 25px; border: 1px solid var(--imageborder);][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: 345px; height: 56px; font-size: 51px; font-family: Bebas Neue; color: var(--namecolor); left: 0px; top: 93px; text-align: right;][comment]

Here goes your character name!

[/comment]Char Name[/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: fit-content; height: 53px; font-size: 8px; font-family: Helvetica Neue; color: var(--quotebesidepiccolor); left: 196px; top: 36px;][comment]

A longer quote and/or song lyric goes here! If you don't want this, you can just delete the text and leave it blank.

[/comment]QUOTE HERE IN ALL CAPS
JUST BECAUSE IT’S AESTHETICALLY
PLEASING AND I LIKE HOW IT LOOKS
WHEN IT HAS A QUOTE
HERE[/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: fit-content; height: 20px; font-size: 15px; font-family: Helvetica Neue; color: var(--quotebesidepiccolor); left: 19px; top: 128px;][comment]

Put the skip name here-- or anything else you'd like!

[/comment][b]SKIP NAME[/b][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width: 238px; height: 15px; font-size: 10px; font-family: Helvetica Neue; color: var(--quotebesidepiccolor); left: 116px; top: 150px; text-align: right;][comment]

Here goes a (small) quote to go beneath the name!

[/comment][i]"in here goes another quote ooh ahh pretty"[/i][/border][border=0px; position: absolute; top: 175px; left: 19px; height: 260px; width: 300px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: scroll; left:30px; font-size:12px; border: 1px solid var(--textboxborder);][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 15px; letter-spacing: .5px; text-align: justify; font-family: Helvetica Neue;][comment]

Here starts your post!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum scelerisque dolor, id auctor sem lobortis ut. Suspendisse potenti. Donec volutpat enim tortor, ut efficitur diam commodo eu. Curabitur sollicitudin, urna ac auctor molestie, lectus metus convallis metus, nec efficitur lorem lectus ac risus. Phasellus tristique enim nisi, nec mattis lacus vestibulum quis. Morbi eleifend, ante eu bibendum ornare, tellus arcu dignissim mi, nec porta nisl massa vitae mi. Vestibulum bibendum elementum eleifend. Etiam convallis feugiat odio id rhoncus. Duis pretium vestibulum mi sed cursus. Vivamus non laoreet felis. Nullam egestas ipsum eu egestas laoreet.

Nam in volutpat felis, eu ullamcorper dui. Integer tincidunt nisi leo, quis ornare lacus gravida non. Nam sit amet ante ornare, placerat lacus eget, iaculis justo. Fusce et magna vulputate, ullamcorper sapien sed, volutpat tortor. Integer velit dolor, egestas sed placerat eget, luctus non eros. Integer id tellus ultricies, porta sem et, ultrices ex. Phasellus feugiat ligula eget dui blandit aliquet. Aenean pretium, ligula a viverra tristique, massa eros laoreet sapien, at rhoncus mi leo vel elit.

Vestibulum ultrices ornare nibh at euismod. Nulla facilisi. Mauris dignissim tellus a accumsan fermentum. Proin id urna a orci consequat imperdiet. Donec ultricies odio vel magna rutrum volutpat. Donec facilisis diam a massa vehicula laoreet. Maecenas mattis ligula eget pulvinar semper. Etiam sed pretium nunc. Sed nulla urna, interdum eu elit non, dignissim dictum mauris. Quisque hendrerit ligula felis, iaculis viverra metus malesuada in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus posuere a ex vel posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras at malesuada ante. Duis sollicitudin dolor eget varius egestas. Sed et nulla neque.

Nunc lacinia mauris nulla, quis condimentum risus elementum a. Nunc commodo leo nibh, a faucibus urna viverra at. Vivamus libero mauris, blandit sollicitudin feugiat bibendum, dapibus ut quam. Quisque id suscipit lectus, at aliquet dolor. Praesent ultrices, magna ut dapibus semper, risus magna molestie ex, volutpat dapibus ante est nec massa. Nullam iaculis dui quis libero pulvinar aliquet. Aenean pretium iaculis nisl quis tincidunt. Aliquam ut nisi purus.

Aenean sed dictum nibh. Quisque porttitor libero ut sapien mattis, sed auctor lorem volutpat. Nulla auctor finibus ullamcorper. Cras eget lorem auctor, consectetur libero eu, sodales dolor. Phasellus pulvinar lectus placerat pulvinar tristique. Aenean vitae felis nisl. Fusce cursus non nisl sit amet euismod. Phasellus faucibus egestas tempus. Suspendisse blandit lobortis viverra. Vivamus at dictum metus.[/border][/border][/border][border=0px; position: absolute; height: 28px; width: 325px; border-radius:0px; line-height:15px; overflow-y: scroll; left:20px; top: 455px; font-size:12px; overflow:auto;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--bottomtagthingcolor); font-size: 15px; line-height: 15px; font-family: Bebas Neue; text-align: center;][comment]

Here go your mood thingies! (Ooh, yes, the bottom words *scroll*!)

[/comment]MOOD: mood | OUTFIT: outfit | LOCATION: location 
MENTIONS: mentions | INTERACTIONS: interactions 
TAGS: tags[/border][/border][/border][/border][comment]

Please do not delete the credit!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;] º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º code by ditto º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º [/border][/border]
 
Last edited:
Amazing. Glorious. Impeccable. I've got no other compliments that I haven't already said. Just beautiful and amazing code.
 








PLAYER


mobile-friendly!
in-character post!
hidden scrolls!
MUSIC PLAYER!



º º code by ditto º º


Character Name
NOW PLAYING
gucci gang by lil pump
MOOD
mood
INTERACTIONS
interactions
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum scelerisque dolor, id auctor sem lobortis ut. Suspendisse potenti. Donec volutpat enim tortor, ut efficitur diam commodo eu. Curabitur sollicitudin, urna ac auctor molestie, lectus metus convallis metus, nec efficitur lorem lectus ac risus. Phasellus tristique enim nisi, nec mattis lacus vestibulum quis. Morbi eleifend, ante eu bibendum ornare, tellus arcu dignissim mi, nec porta nisl massa vitae mi. Vestibulum bibendum elementum eleifend. Etiam convallis feugiat odio id rhoncus. Duis pretium vestibulum mi sed cursus. Vivamus non laoreet felis. Nullam egestas ipsum eu egestas laoreet.

Nam in volutpat felis, eu ullamcorper dui. Integer tincidunt nisi leo, quis ornare lacus gravida non. Nam sit amet ante ornare, placerat lacus eget, iaculis justo. Fusce et magna vulputate, ullamcorper sapien sed, volutpat tortor. Integer velit dolor, egestas sed placerat eget, luctus non eros. Integer id tellus ultricies, porta sem et, ultrices ex. Phasellus feugiat ligula eget dui blandit aliquet. Aenean pretium, ligula a viverra tristique, massa eros laoreet sapien, at rhoncus mi leo vel elit.

Vestibulum ultrices ornare nibh at euismod. Nulla facilisi. Mauris dignissim tellus a accumsan fermentum. Proin id urna a orci consequat imperdiet. Donec ultricies odio vel magna rutrum volutpat. Donec facilisis diam a massa vehicula laoreet. Maecenas mattis ligula eget pulvinar semper. Etiam sed pretium nunc. Sed nulla urna, interdum eu elit non, dignissim dictum mauris. Quisque hendrerit ligula felis, iaculis viverra metus malesuada in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus posuere a ex vel posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras at malesuada ante. Duis sollicitudin dolor eget varius egestas. Sed et nulla neque.

Nunc lacinia mauris nulla, quis condimentum risus elementum a. Nunc commodo leo nibh, a faucibus urna viverra at. Vivamus libero mauris, blandit sollicitudin feugiat bibendum, dapibus ut quam. Quisque id suscipit lectus, at aliquet dolor. Praesent ultrices, magna ut dapibus semper, risus magna molestie ex, volutpat dapibus ante est nec massa. Nullam iaculis dui quis libero pulvinar aliquet. Aenean pretium iaculis nisl quis tincidunt. Aliquam ut nisi purus.

Aenean sed dictum nibh. Quisque porttitor libero ut sapien mattis, sed auctor lorem volutpat. Nulla auctor finibus ullamcorper. Cras eget lorem auctor, consectetur libero eu, sodales dolor. Phasellus pulvinar lectus placerat pulvinar tristique. Aenean vitae felis nisl. Fusce cursus non nisl sit amet euismod. Phasellus faucibus egestas tempus. Suspendisse blandit lobortis viverra. Vivamus at dictum metus.
º º code by ditto º º
Code:
[border= 0;

--bgcolor: #74A0B0;
--maintextcolor: #74A0B0;
--characterpic: url(https://media1.tenor.com/images/4f60cde059c0f86914d1949a98a27a29/tenor.gif?itemid=10838704) 50% 0%;
--namecolor: #fafafa;
--textbackground: #fafafa;
--notificationbackgroundcolor: #fafafa;
--imageborder: #fafafa;
--boxesborder: #fafafa;
--notificationheadercolor: #74A0B0;
--notificationtextcolor: #74A0B0;

box-sizing: border-box; padding: 0; max-width: 375px; min-height: 500px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black;][border= 0; box-sizing: border-box; padding: 0px; width: 375px; height: 500px; background: var(--bgcolor); display: flex; flex-direction: column; overflow:auto;][border=0; box-sizing: border-box; padding: 0px; position: absolute; width:325px; height:fit-content; left: 28px; top: 10px; font-family: Quicksand; color: var(--namecolor); font-size: 40px; text-align: center;][comment]

Character name here!

[/comment]Character Name[/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width:188px; height:45px; left: 171px; background: var(--notificationbackgroundcolor); background-size: cover; border: 1px solid var(--boxesborder); top:74px; border-radius: 14px;][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width:188px; height:45px; left: 171px; background: var(--notificationbackgroundcolor); background-size: cover; border: 1px solid var(--boxesborder); top:131px; border-radius: 14px;][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width:188px; height:45px; left: 171px; background: var(--notificationbackgroundcolor); background-size: cover; border: 1px solid var(--boxesborder); top:189px; border-radius: 14px;][/border][border=0px; position: absolute; border-radius:14px; line-height:15px; text: justify; background: var(--textbackground); overflow-y: scroll; left:19px; font-size:12px; opacity: 85%; top:253px; left:19px; border: 1px solid var(--boxesborder); width: 315px; height:200px;][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; font-size: 8px; font-family: Helvetica Neue; color: var(--notificationheadercolor); width:169px; height: 13px; left: 180px; top: 81px; text-align: left;][comment]

"NOW PLAYING" header.

[/comment][b]NOW PLAYING[/b][/border][border=transparent; height:20px; width:20px; padding:0; overflow:hidden; position:absolute; top:95px; left:190px;][border=transparent; height:80px; width:180px; padding:0; margin-top:-2px; margin-left:-10px; top:-40px;][comment]

Put whatever (SoundCloud) song you'd like as the link between the media brackets!

[/comment][media=soundcloud]https://soundcloud.com/lilpump/lil-pump-gucci-gang-prod-bighead-gnealz[/media][/border][/border][border=0; height:22px; width:40px; padding:0; overflow:hidden; position:absolute; top:95px; left:179px; pointer-events: none; background: var(--notificationbackgroundcolor);][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; font-size: 8px; font-family: Helvetica Neue; color: var(--notificationtextcolor); width:154px; height: 13px; left: 194px; top: 94px; text-align: center; pointer-events: none;][i]gucci gang by lil pump[/i][/border][border=0; height:20px; width:40px; padding:0; overflow:hidden; position:absolute; top:95px; left:179px; pointer-events: none; font-size: 10px; text-align: center; color: var(--notificationtextcolor);][comment]

Play button!

[/comment][fa]fas fa-play[/fa][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; font-size: 8px; font-family: Helvetica Neue; color: var(--notificationheadercolor); width:180px; height: 13px; left: 180px; top: 138px; text-align: left;][comment]

"MOOD" header.

[/comment][b]MOOD[/b][/border][border=0; height:20px; width:40px; padding:0; overflow:hidden; position:absolute; top:149px; left:180px; pointer-events: none; font-size: 10px; text-align: center; color: var(--notificationtextcolor);][comment]

Smiley face.

[/comment][fa]fas fa-smile[/fa][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; font-size: 8px; font-family: Helvetica Neue; color: var(--notificationtextcolor); width:154px; height: 13px; left: 194px; top: 151px; text-align: center; pointer-events: none;][comment]

Mood goes here!

[/comment][i]mood[/i][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; font-size: 8px; font-family: Helvetica Neue; color: var(--notificationheadercolor); width:180px; height: 13px; left: 180px; top: 195px; text-align: left;][comment]

"INTERACTIONS" header.

[/comment][b]INTERACTIONS[/b][/border][border=0; height:20px; width:40px; padding:0; overflow:hidden; position:absolute; top:206px; left:180px; pointer-events: none; font-size: 10px; text-align: center; color: var(--notificationtextcolor);][comment]

Address book icon.

[/comment][fa]fas fa-address-book[/fa][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; font-size: 8px; font-family: Helvetica Neue; color: var(--notificationtextcolor); width:154px; height: 13px; left: 194px; top: 208px; text-align: center; pointer-events: none;][comment]

Interactions here.

[/comment][i]interactions[/i][/border][border=0; box-sizing: border-box; padding: 0px; position: absolute; width:128px; height:165px; left: 17px; background: var(--characterpic); background-size: cover; border: 1px solid var(--imageborder); top:74px; border-radius: 14px;][/border][border=0px; position: absolute; top: 175px; left: 19px; height: 264px; width: 300px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: scroll; top:253px; left:19px; width: 315px; height:200px; font-size:12px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 5px 0 5px; width: 50%; color: var(--maintextcolor); font-size: 11px; line-height: 15px; letter-spacing: .5px; text-align: justify; font-family: Helvetica Neue;][comment]

Here starts your post!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum scelerisque dolor, id auctor sem lobortis ut. Suspendisse potenti. Donec volutpat enim tortor, ut efficitur diam commodo eu. Curabitur sollicitudin, urna ac auctor molestie, lectus metus convallis metus, nec efficitur lorem lectus ac risus. Phasellus tristique enim nisi, nec mattis lacus vestibulum quis. Morbi eleifend, ante eu bibendum ornare, tellus arcu dignissim mi, nec porta nisl massa vitae mi. Vestibulum bibendum elementum eleifend. Etiam convallis feugiat odio id rhoncus. Duis pretium vestibulum mi sed cursus. Vivamus non laoreet felis. Nullam egestas ipsum eu egestas laoreet.

Nam in volutpat felis, eu ullamcorper dui. Integer tincidunt nisi leo, quis ornare lacus gravida non. Nam sit amet ante ornare, placerat lacus eget, iaculis justo. Fusce et magna vulputate, ullamcorper sapien sed, volutpat tortor. Integer velit dolor, egestas sed placerat eget, luctus non eros. Integer id tellus ultricies, porta sem et, ultrices ex. Phasellus feugiat ligula eget dui blandit aliquet. Aenean pretium, ligula a viverra tristique, massa eros laoreet sapien, at rhoncus mi leo vel elit.

Vestibulum ultrices ornare nibh at euismod. Nulla facilisi. Mauris dignissim tellus a accumsan fermentum. Proin id urna a orci consequat imperdiet. Donec ultricies odio vel magna rutrum volutpat. Donec facilisis diam a massa vehicula laoreet. Maecenas mattis ligula eget pulvinar semper. Etiam sed pretium nunc. Sed nulla urna, interdum eu elit non, dignissim dictum mauris. Quisque hendrerit ligula felis, iaculis viverra metus malesuada in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus posuere a ex vel posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras at malesuada ante. Duis sollicitudin dolor eget varius egestas. Sed et nulla neque.

Nunc lacinia mauris nulla, quis condimentum risus elementum a. Nunc commodo leo nibh, a faucibus urna viverra at. Vivamus libero mauris, blandit sollicitudin feugiat bibendum, dapibus ut quam. Quisque id suscipit lectus, at aliquet dolor. Praesent ultrices, magna ut dapibus semper, risus magna molestie ex, volutpat dapibus ante est nec massa. Nullam iaculis dui quis libero pulvinar aliquet. Aenean pretium iaculis nisl quis tincidunt. Aliquam ut nisi purus.

Aenean sed dictum nibh. Quisque porttitor libero ut sapien mattis, sed auctor lorem volutpat. Nulla auctor finibus ullamcorper. Cras eget lorem auctor, consectetur libero eu, sodales dolor. Phasellus pulvinar lectus placerat pulvinar tristique. Aenean vitae felis nisl. Fusce cursus non nisl sit amet euismod. Phasellus faucibus egestas tempus. Suspendisse blandit lobortis viverra. Vivamus at dictum metus.[/border][/border][/border][/border][comment]

Please do not remove the credit!

[/comment][border=0; color: #878787; font-size: 8px; font-family: Quicksand;] º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º code by ditto º [url=https://www.rpnation.com/members/ditto.83850/][color=#878787][fa]fas fa-heart[/fa][/color][/url] º [/border][/border]
 
Last edited:
I love watching people grow with coding :3! keep up with the great work my dude! you can 100% see your progress and it's *chef kiss* amazing!
 

Users who are viewing this thread

Back
Top