What's new
  • 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 • ғᴀᴄsɪᴍɪʟᴇ • 𝚍𝚒𝚝𝚝𝚘'𝚜 𝚌𝚘𝚍𝚒𝚗𝚐 𝚠𝚘𝚛𝚔𝚜𝚑𝚘𝚙: 𝚝𝚑𝚎 𝚜𝚚𝚞𝚎𝚊𝚔𝚚𝚞𝚎𝚕 •

Ditto

ʟɪᴠɪɴ' ʟɪᴋᴇ ʟᴀʀʀʏ






welcome!




Hello, y'all! Ditto here! Welcome to my new coding thread!

Upon the notification from several people that many of my codes suffered from issues with the hidden scrolls (and my "many of my codes", I mean all of them), I decided to completely ditch my old thread and start afresh. Here, you'll find updated versions of some of my old codes as well as all of my new codes going forward! (Scroll down on this code to find a link to my old thread, if you'd like it.)

Thank you for checking this out!

- ditto​

Click here for my first coding thread!

º º code by ditto º º
 
Last edited:

Ditto

ʟɪᴠɪɴ' ʟɪᴋᴇ ʟᴀʀʀʏ






updated:


star boi


. in-character code .




. Fixed code from my old thread

. In-character code!

. Mobile-friendly!

. Features hidden scrolls and a music player!

. If you see any issues or have any questions, please let me know!
º º code by ditto º º








character name
bottom words


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut tortor sit amet risus vehicula consequat. Praesent tempus magna nec ex congue, eget tincidunt libero viverra. In commodo orci ut rutrum tristique. Aenean egestas quis erat in blandit. Praesent at aliquam lorem, eget vulputate est. Phasellus elementum non enim in blandit. Sed sit amet feugiat tellus. Donec imperdiet dolor vehicula ultricies ultrices. Vivamus eget vehicula libero. Sed in velit semper, vestibulum felis iaculis, tristique justo. Sed dapibus viverra felis quis pellentesque. Sed id dapibus odio.

Sed hendrerit, eros et ullamcorper maximus, velit urna laoreet orci, sit amet sagittis magna erat id erat. Vestibulum ac diam consequat, tempus enim et, tempus mi. Pellentesque non ante sapien. Nunc molestie at erat non hendrerit. Aliquam erat volutpat. Fusce in semper ipsum. Aliquam sed volutpat enim.

In hac habitasse platea dictumst. Integer luctus lobortis diam, vitae sagittis ligula egestas ac. Mauris elementum tellus ac volutpat feugiat. Vestibulum consequat laoreet urna luctus eleifend. Mauris cursus venenatis ex vel dapibus. Aliquam interdum, lacus quis laoreet commodo, ex ex elementum urna, eget efficitur metus turpis in enim. Suspendisse interdum volutpat quam, sed ornare augue. In nunc justo, mollis in rhoncus id, pellentesque a felis.

Nulla a erat arcu. Aliquam cursus eros erat, at semper diam volutpat eget. Integer vel scelerisque felis. Aliquam sed tortor et felis ullamcorper cursus non ac nisi. Nunc lobortis ex nibh, ut ultricies purus accumsan id. Duis in consequat metus. Maecenas iaculis sit amet tellus vitae vulputate. Curabitur sed elit dui. Mauris vitae nisl fringilla, tempus nulla eget, ultrices libero. Sed tempor sem quam, at efficitur arcu pharetra non. Nulla nec sagittis est, id sagittis erat. In lacinia pharetra diam id vestibulum. Proin tincidunt enim in augue condimentum, quis faucibus risus lobortis. Vivamus sit amet neque sit amet orci lobortis commodo.

Mauris commodo a erat non dictum. Vivamus sodales, quam ac fermentum auctor, felis metus vulputate ex, sed blandit sapien libero vel ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut vel ante sit amet metus fringilla malesuada vel sit amet metus. Vestibulum viverra felis eget diam ultrices, eu vehicula arcu dignissim. Curabitur varius lectus eu venenatis lacinia. Curabitur leo mauris, vulputate posuere mi nec, viverra commodo leo. Sed hendrerit mattis egestas. Sed vitae est at velit fermentum ultrices in varius urna.





mood
mood mood mood

location
location location location

outfit
outfit outfit outfit





playing...
song
by artist​



mentions
mentions mentions mentions

interactions
interactions interactions interactions

tags
tags tags tags


º º code by ditto º º


Code:
[comment]

Variables go in this border! The names should be relatively self-explanatory.

If any image 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;

--toppic: url(https://thumbs.gfycat.com/BeautifulCheerfulIndianabat-size_restricted.gif) 80% 25%;
--namecolor: #E59A9A;
--symbolcolor: #E59A9A;
--nameshadowcolor: #362020;
--symbolshadowcolor: #362020;
--mainbgcolor: #FFF1F1;
--maintextcolor: #E59A9A;
--moodetcbackground: #FFF1F1;
--moodetccolor: #E59A9A;
--playbutton: #E59A9A;
--bottomleft: url(https://i.pinimg.com/564x/61/87/6d/61876d3593fd9e79ec2e21998141f325.jpg) 0% 30%;
--bottommiddle: url(https://i.pinimg.com/236x/7b/b0/08/7bb008a69acd674861bb4d56bcb1bc96.jpg) 0% 50%; 
--bottomright: url(https://i.pinimg.com/564x/f7/2a/50/f72a50c63615e89528dcafb73db3a8ab.jpg) 0% 30%;
--toppicborder: #E59A9A;
--mainbgborder: #E59A9A;
--bottomboxesborder: #E59A9A;

box-sizing: border-box; padding: 0; max-width: 350px; min-height: 500px; position: relative; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;][border= 0; box-sizing: border-box; padding: 0px; width: 350px; height: 500px; background: transparent; display: flex; flex-direction: column; margin: auto; hidden; justify-content: center; align-items: center;]

[border=0;box-sizing: border-box; width:350px; height:180px; background: var(--toppic); background-size:cover; position: absolute; top: 20px; left: 0px; border: 2px solid var(--toppicborder);][/border]

[border=0;box-sizing: border-box; width:350px; height:200px; background: var(--mainbgcolor); background-size:cover; position: absolute; top: 200px; left: 0px; border-left: 2px solid var(--mainbgborder); border-right: 2px solid var(--mainbgborder);][/border]

[border=0;box-sizing: border-box; width:350px; height:25px; top: 0px; left: 0px; background-size:cover; position: absolute; color: var(--namecolor); line-height: 10px; text-align: center; font-family: Cedarville Cursive; font-size: 28px; text-align: left; text-shadow: 0px 2px 4px var(--nameshadowcolor); letter-spacing: 2px;][comment]

The name at the top goes here! 

If you'd like to change the font, just type the font you'd like after the "[font=" after this comment! All fonts can be found at fonts.google.com.

[/comment][font=Cedarville Cursive]character name[/font] [/border][border=0;box-sizing: border-box; width: 350px; height:25px; top: -5px; left: 0px; background-size:cover; position: absolute; color: var(--symbolcolor); line-height: 10px; font-family: Viaoda Libre; font-size: 28px; text-align: right; text-shadow: 0px 2px 4px var(--symbolshadowcolor); letter-spacing: 2px;][comment]

The symbols at the top go here! I added three, but you can add less-- or more, if you're into that. These are fa icons, and the whole catalog of them can be found at fontawesome.com/icons.

[/comment][fa]fas fa-cloud-rainbow[/fa][fa]fas fa-cloud-rainbow[/fa][fa]fas fa-cloud-rainbow[/fa][/border][border=0;box-sizing: border-box; width:350px; height:25px; top: 180px; left: 0px; background-size:cover; position: absolute; color: var(--namecolor); line-height: 10px; text-align: center; font-family: Viaoda Libre; font-size: 28px; text-shadow: 0px -2px 4px var(--nameshadowcolor); text-align: right; letter-spacing: 2px;][comment]

The name at the bottom goes here! 

If you'd like to change the font, just type the font you'd like after the "[font=" after this comment! All fonts can be found at fonts.google.com.

[/comment][font=Cedarville Cursive]bottom words[/font] [/border] [border=0;box-sizing: border-box; width: 350px; height:25px; top: 175px; left: 0px; background-size:cover; position: absolute; color: var(--symbolcolor); line-height: 10px; font-family: Viaoda Libre; font-size: 28px; text-align: left; text-shadow: 0px -2px 4px var(--symbolshadowcolor); letter-spacing: 2px;][comment]

The symbols at the bottom go here! I added three, but you can add less-- or more, if you're into that. These are fa icons, and the whole catalog of them can be found at fontawesome.com/icons.

[/comment][fa]fas fa-cloud-rainbow[/fa][fa]fas fa-cloud-rainbow[/fa][fa]fas fa-cloud-rainbow[/fa][/border]

[border=0px; position: absolute; height: 180px; width: 335px; border-radius: 0px; line-height:15px; top: 200px; overflow: hidden; display: flex; flex-direction: column;][border=0px; padding: 0px; height: calc(100% - 10px); width: 200%; overflow-y: scroll; overflow-x: hidden; margin-top: 5px;][border=0; height: auto; width: 50%; box-sizing: border-box; color: var(--maintextcolor); font-size: 9px; text-align: justify;][comment]

Post text starts here!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut tortor sit amet risus vehicula consequat. Praesent tempus magna nec ex congue, eget tincidunt libero viverra. In commodo orci ut rutrum tristique. Aenean egestas quis erat in blandit. Praesent at aliquam lorem, eget vulputate est. Phasellus elementum non enim in blandit. Sed sit amet feugiat tellus. Donec imperdiet dolor vehicula ultricies ultrices. Vivamus eget vehicula libero. Sed in velit semper, vestibulum felis iaculis, tristique justo. Sed dapibus viverra felis quis pellentesque. Sed id dapibus odio.

Sed hendrerit, eros et ullamcorper maximus, velit urna laoreet orci, sit amet sagittis magna erat id erat. Vestibulum ac diam consequat, tempus enim et, tempus mi. Pellentesque non ante sapien. Nunc molestie at erat non hendrerit. Aliquam erat volutpat. Fusce in semper ipsum. Aliquam sed volutpat enim.

In hac habitasse platea dictumst. Integer luctus lobortis diam, vitae sagittis ligula egestas ac. Mauris elementum tellus ac volutpat feugiat. Vestibulum consequat laoreet urna luctus eleifend. Mauris cursus venenatis ex vel dapibus. Aliquam interdum, lacus quis laoreet commodo, ex ex elementum urna, eget efficitur metus turpis in enim. Suspendisse interdum volutpat quam, sed ornare augue. In nunc justo, mollis in rhoncus id, pellentesque a felis.

Nulla a erat arcu. Aliquam cursus eros erat, at semper diam volutpat eget. Integer vel scelerisque felis. Aliquam sed tortor et felis ullamcorper cursus non ac nisi. Nunc lobortis ex nibh, ut ultricies purus accumsan id. Duis in consequat metus. Maecenas iaculis sit amet tellus vitae vulputate. Curabitur sed elit dui. Mauris vitae nisl fringilla, tempus nulla eget, ultrices libero. Sed tempor sem quam, at efficitur arcu pharetra non. Nulla nec sagittis est, id sagittis erat. In lacinia pharetra diam id vestibulum. Proin tincidunt enim in augue condimentum, quis faucibus risus lobortis. Vivamus sit amet neque sit amet orci lobortis commodo.

Mauris commodo a erat non dictum. Vivamus sodales, quam ac fermentum auctor, felis metus vulputate ex, sed blandit sapien libero vel ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut vel ante sit amet metus fringilla malesuada vel sit amet metus. Vestibulum viverra felis eget diam ultrices, eu vehicula arcu dignissim. Curabitur varius lectus eu venenatis lacinia. Curabitur leo mauris, vulputate posuere mi nec, viverra commodo leo. Sed hendrerit mattis egestas. Sed vitae est at velit fermentum ultrices in varius urna.

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

[border=0;box-sizing: border-box; width:116px; height:100px; background: var(--bottomleft); background-size:cover; position: absolute; top: 400px; left: 0px; overflow: hidden; border-top: 2px solid var(--bottomboxesborder); border-left: 2px solid var(--bottomboxesborder); border-bottom: 2px solid var(--bottomboxesborder); margin: auto;][/border]

[border=0px; position: absolute; background: transparent; top: 395px; height: 90px; width: 105px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: hidden;  overflow-x: hidden; font-size:12px; left: -5px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; position: relative; background: transparent; height: 100px; width: 115px; border-radius: 0px;][/border][border=0; box-sizing: border-box; padding: 10px; width: 50%; color: var(--moodetccolor); font-size: 11px; line-height: 11px; background: var(--moodetcbackground); opacity: 95%;][comment]

Here goes your mood and stuff. It's the scrolly at the bottom left image, if you're wondering where it is.

If you'd like to change the fonts, just change the things after the "[font="! All fonts can be found at fonts.google.com. The font right after this comment is for the main text, while the headers are the ones with "Cedarville Cursive".

[/comment][font=Montserrat][font=Cedarville Cursive]mood[/font]
mood mood mood

[font=Cedarville Cursive]location[/font]
location location location

[font=Cedarville Cursive]outfit[/font]
outfit outfit outfit[/font][/border][/border][/border]

[border=0;box-sizing: border-box; width:117px; height:100px; background: var(--bottommiddle); background-size:cover; position: absolute; top: 400px; left: 116px; border-top: 2px solid var(--bottomboxesborder); border-bottom: 2px solid var(--bottomboxesborder); overflow: hidden;][/border]

[border=0px; position: absolute; background: transparent; top: 395px; height: 85px; width: 97px; border-radius:0px; line-height:150%; text: justify; color: var(--maintextcolor); overflow-y: hidden; overflow-x: hidden; font-size:12px; left: 111px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto; overflow-x: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; position: relative; background: transparent; height: 100px; width: 115px; border-radius: 0px;][/border][border=0; box-sizing: border-box; padding: 10px; width: 50%; color: var(--moodetccolor); font-size: 11px; line-height: 11px; height: 150%; background: var(--moodetcbackground); opacity: 95%;][border=transparent; height:20px; width:20px; padding:0; overflow:hidden; position:relative; left: 36px; opacity: 0%][border=transparent; height:80px; width:180px; overflow-x: hidden; 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/user-550356652/apple-pie-the-scary-jokes[/media][/border][/border][border=0;box-sizing: border-box; width: fit-content; height:25px; top: -25px; left: 25px; background-size:cover; position: relative; color: var(--playbutton); line-height: 10px; font-size: 20px; text-align: left; letter-spacing: 2px; pointer-events: none;][fa]fas fa-play[/fa][/border]
[border=0;box-sizing: border-box; width: 95px; height:20px; top: -35px; background-size:cover; position: relative; color: var(--moodetccolor); line-height: 12px; font-size: 10px; text-align: left; letter-spacing: 2px; pointer-events: none;][comment]

Here goes your song! This is the center scrolly image.

If you'd like to change the fonts, just change the things after the "[font="! All fonts can be found at fonts.google.com. The font right after this comment is the name of the song, while the "Cedarville Cursive"s are the fonts for the "playing..." and "by [artist]".

[/comment][font=Montserrat][font=Cedarville Cursive]playing...[/font]
song
[font=Cedarville Cursive][right]by artist[/right][/font][/font][/border][/border][/border][/border][/border]

[border=0;box-sizing: border-box; width:117px; height:100px; background: var(--bottomright); background-size:cover; position: absolute; top: 400px; left: 233px; overflow: hidden; border-top: 2px solid var(--bottomboxesborder); border-bottom: 2px solid var(--bottomboxesborder); border-right: 2px solid var(--bottomboxesborder);][/border]

[border=0px; position: absolute; background: transparent; top: 395px; height: 90px; width: 106px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: hidden; overflow-x: hidden; font-size:12px; left: 228px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; position: relative; background: transparent; height: 100px; width: 115px; border-radius: 0px;][/border][border=0; box-sizing: border-box; padding: 10px; width: 50%; color: var(--moodetccolor); font-size: 11px; line-height: 11px; background: var(--moodetcbackground); opacity: 95%;][comment]

Here go your interactions and stuff. It's the scrolly at the bottom right image, if you're wondering where it is.

If you'd like to change the fonts, just change the things after the "[font="! All fonts can be found at fonts.google.com. The font right after this comment is for the main text, while the headers are the ones with "Cedarville Cursive".

[/comment][font=Quicksand][font=Cedarville Cursive]mentions[/font]
mentions mentions mentions

[font=Cedarville Cursive]interactions[/font]
interactions interactions interactions

[font=Cedarville Cursive]tags[/font]
tags tags tags [/font][/border][/border][/border]

[/border][comment]

Please do not remove credit!

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

Ditto

ʟɪᴠɪɴ' ʟɪᴋᴇ ʟᴀʀʀʏ






new code:


cloud nine


. collab post code .




. By "new code", I just mean that I slightly tweaked the code above, but.

. Collab post code! I've been meaning to make a mobile-friendly collab post code for a bit, and I finally got around to it.

. Mobile-friendly! Yay!

. Features hidden scrolls and a music player!

. If you see any issues or have any questions, please let me know!
º º code by ditto º º








  • name 1 & name 2


    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.





    playing...
    song
    by singer​



    this post was made in collaboration with
    tag collaborators




    mentions
    mentions mentions mentions


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

Variables go in this border! The names should be relatively self-explanatory.

If any image 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.

If you would like the boxes at the bottom to be colors instead of images, then take out the "url()" and put the hex code of whatever color you'd like there instead!
Ex:
--bottomleft: #FFF9F9;
instead of 
--bottomleft: url([URL]https://64.media.tumblr.com/6fdbb56b8c1a51b3fe2286d5be95388f/tumblr_pj4vxmcvCR1ukk143_1280.jpg[/URL]) 0% 0%;
Be sure to keep the semicolon!

If you would not like to have a border around things, you can just remove the variables that have the word "border" in them (toppicborder, bottomboxesborder, mainbgborder).

[/comment][border= 0;

--toppic: url(https://cdn.discordapp.com/attachments/743201121694253127/848785933690994718/Untitled-1.gif) 70% 50%;
--namecolor: #FFC9B9;
--nameshadowcolor: #6C4235;
--mainbgcolor: #FFC9B9;
--maintextcolor: #6C4235;
--moodetcbackground: #FFC9B9;
--moodetccolor: #6C4235;
--bottomleft: url(https://nayturr.com/wp-content/uploads/2020/09/why-are-some-clouds-pink-Sept82020-1-min.jpg) 0% 50%;
--bottommiddle: url(https://eudaimoniahomes.com/wp-content/uploads/2019/02/what-is-pink-cloud.jpg) 0% 50%; 
--bottomright: url(https://media.istockphoto.com/photos/sky-cloud-pink-love-sweet-love-color-tone-for-wedding-card-background-picture-id1180184210?k=6&m=1180184210&s=612x612&w=0&h=unt2jUcCdeUL6-TzpNeKk7QYzBqbUpEfABehH5GUQYY=) 0% 50%;

box-sizing: border-box; padding: 0; max-width: 350px; min-height: 500px; position: relative; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;][border= 0; box-sizing: border-box; padding: 0px; width: 350px; height: 500px; background: transparent; display: flex; flex-direction: column; margin: auto; hidden; justify-content: center; align-items: center;]

[border=0;box-sizing: border-box; width:350px; height:178px; background: var(--toppic); background-size:cover; position: absolute; top: 20px; left: 0px;][/border]

[border=0;box-sizing: border-box; width:350px; height:198px; background: var(--mainbgcolor); background-size:cover; position: absolute; top: 200px; left: 0px;][/border]

[border=0;box-sizing: border-box; width:350px; height:25px; top: 0px; left: 0px; background-size:cover; position: absolute; color: var(--namecolor); line-height: 10px; text-align: center; font-family: Viaoda Libre; font-size: 28px; text-align: center; text-shadow: 0px 2px 4px var(--nameshadowcolor); letter-spacing: 2px;][comment]

The names at the top goes here! 

If you'd like to change the font, just type the font you'd like after the "[font=" after this comment! All fonts can be found at fonts.google.com.

[/comment][font=Cedarville Cursive]name 1 & name 2[/font] [/border]

[border=0px; position: absolute; height: 180px; width: 335px; border-radius: 0px; line-height:15px; top: 200px; overflow: hidden; display: flex; flex-direction: column;][border=0px; padding: 0px; height: calc(100% - 10px); width: 200%; overflow-y: scroll; overflow-x: hidden; margin-top: 5px;][border=0; height: auto; width: 50%; box-sizing: border-box; color: var(--maintextcolor); font-size: 9px; text-align: justify; margin-top: -5px; margin-left: 1px;][comment]

Post text starts here!

[/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=0;box-sizing: border-box; width:115px; height:100px; background: var(--bottomleft); background-size:cover; position: absolute; top: 400px; left: 0px; overflow: hidden; margin: auto;][/border]

[border=0px; position: absolute; background: transparent; top: 395px; height: 90px; width: 95px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: hidden; overflow-x: hidden; font-size:12px; left: -5px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto; overflow-x: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; position: relative; background: transparent; height: 100px; width: 115px; border-radius: 0px;][/border][border=0; box-sizing: border-box; padding: 10px; width: 50%; color: var(--moodetccolor); font-size: 11px; line-height: 11px; height: 150%; background: var(--moodetcbackground); opacity: 95%;][border=transparent; height:20px; width:20px; padding:0; overflow:hidden; position:relative; left: 36px; opacity: 0%][border=transparent; height:80px; width:180px; overflow-x: hidden; 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/989wclz/snow-patrol-chasing-cars[/media][/border][/border][border=0;box-sizing: border-box; width: fit-content; height:25px; top: -25px; left: 25px; background-size:cover; position: relative; color: var(--playercolor); line-height: 10px; font-size: 20px; text-align: left; letter-spacing: 2px; pointer-events: none;][fa]fas fa-play[/fa][/border]
[border=0;box-sizing: border-box; width: 95px; height:20px; top: -35px; background-size:cover; position: relative; color: var(--playercolor); line-height: 12px; font-size: 10px; text-align: left; letter-spacing: 2px; pointer-events: none;][comment]

Here goes your song! This is the center scrolly image.

If you'd like to change the fonts, just change the things after the "[font="! All fonts can be found at fonts.google.com. The font right after this comment is the name of the song, while the "Cedarville Cursive"s are the fonts for the "playing..." and "by [artist]".

[/comment][font=Montserrat][font=Cedarville Cursive]playing...[/font]
song
[font=Cedarville Cursive][right]by singer[/right][/font][/font][/border][/border][/border][/border][/border]

[border=0;box-sizing: border-box; width:114px; height:100px; background: var(--bottommiddle); background-size:cover; position: absolute; top: 400px; left: 117px;][/border]

[border=0px; position: absolute; background: transparent; top: 395px; height: 90px; width: 105px; border-radius:0px; line-height:150%; text: justify; color: var(--maintextcolor); overflow-y: hidden; overflow-x: hidden; font-size:12px; left: 111px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; position: relative; background: transparent; height: 100px; width: 115px; border-radius: 0px;][/border][border=0; box-sizing: border-box; padding: 10px; width: 50%; color: var(--moodetccolor); font-size: 11px; line-height: 11px; background: var(--moodetcbackground); opacity: 95%; text-align: center;][comment]

Here goes the name of your collaborator(s). It's the scrolly at the bottom center image, if you're wondering where it is.

If you'd like to change the fonts, just change the things after the "[font="! All fonts can be found at fonts.google.com. The font right after this comment is for the main text, while the headers are the ones with "Cedarville Cursive".

[/comment][font=Quicksand][font=Cedarville Cursive]this post was made in collaboration with[/font]
tag collaborators[/font][/border][/border][/border]

[border=0;box-sizing: border-box; width:117px; height:100px; background: var(--bottomright); background-size:cover; position: absolute; top: 400px; left: 233px; overflow: auto;][/border]

[border=0px; position: absolute; background: transparent; top: 395px; height: 90px; width: 105px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: hidden; overflow-x: hidden; font-size:12px; left: 228px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; position: relative; background: transparent; height: 100px; width: 115px; border-radius: 0px;][/border][border=0; box-sizing: border-box; padding: 10px; width: 50%; color: var(--moodetccolor); font-size: 11px; line-height: 11px; background: var(--moodetcbackground); opacity: 95%;][comment]

Here go your interactions and stuff. It's the scrolly at the bottom right image, if you're wondering where it is.

If you'd like to change the fonts, just change the things after the "[font="! All fonts can be found at fonts.google.com. The font right after this comment is for the main text, while the headers are the ones with "Cedarville Cursive".

[/comment][font=Quicksand][font=Cedarville Cursive]mentions[/font]
mentions mentions mentions[/font][/border][/border][/border]

[/border][font=Quicksand][comment]

Please do not remove credit!

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

Variables go in this border! The names should be relatively self-explanatory.

If any image 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.

If you would like the boxes at the bottom to be colors instead of images, then take out the "url()" and put the hex code of whatever color you'd like there instead!
Ex:
--bottomleft: #FFF9F9;
instead of 
--bottomleft: url([URL]https://64.media.tumblr.com/6fdbb56b8c1a51b3fe2286d5be95388f/tumblr_pj4vxmcvCR1ukk143_1280.jpg[/URL]) 0% 0%;
Be sure to keep the semicolon!

If you would not like to have a border around things, you can just remove the variables that have the word "border" in them (toppicborder, bottomboxesborder, mainbgborder).

[/comment][border= 0;

--leftpic: url(https://64.media.tumblr.com/3172f31acd1826db2391ba99501b2b95/tumblr_o8jp3gtQ4M1qazm8bo2_250.gifv) 50% 50%;
--rightpic: url(https://data.whicdn.com/images/324750935/original.gif) 70% 50%;
--namecolor: #FFC9B9;
--nameshadowcolor: #6C4235;
--mainbgcolor: #FFC9B9;
--maintextcolor: #6C4235;
--moodetcbackground: #FFC9B9;
--moodetccolor: #6C4235;
--bottomleft: url(https://nayturr.com/wp-content/uploads/2020/09/why-are-some-clouds-pink-Sept82020-1-min.jpg) 0% 50%;
--bottommiddle: url(https://eudaimoniahomes.com/wp-content/uploads/2019/02/what-is-pink-cloud.jpg) 0% 50%; 
--bottomright: url(https://media.istockphoto.com/photos/sky-cloud-pink-love-sweet-love-color-tone-for-wedding-card-background-picture-id1180184210?k=6&m=1180184210&s=612x612&w=0&h=unt2jUcCdeUL6-TzpNeKk7QYzBqbUpEfABehH5GUQYY=) 0% 50%;

box-sizing: border-box; padding: 0; max-width: 350px; min-height: 500px; position: relative; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;][border= 0; box-sizing: border-box; padding: 0px; width: 350px; height: 500px; background: transparent; display: flex; flex-direction: column; margin: auto; hidden; justify-content: center; align-items: center;]

[border=0;box-sizing: border-box; width:174px; height:178px; background: var(--leftpic); background-size:cover; position: absolute; top: 20px; left: 0px;][/border]

[border=0;box-sizing: border-box; width:174px; height:178px; left: 176px; background: var(--rightpic); background-size:cover; position: absolute; top: 20px;][/border]

[border=0;box-sizing: border-box; width:350px; height:198px; background: var(--mainbgcolor); background-size:cover; position: absolute; top: 200px; left: 0px;][/border]

[border=0;box-sizing: border-box; width:350px; height:25px; top: 0px; left: 0px; background-size:cover; position: absolute; color: var(--namecolor); line-height: 10px; text-align: center; font-family: Viaoda Libre; font-size: 28px; text-align: center; text-shadow: 0px 2px 4px var(--nameshadowcolor); letter-spacing: 2px;][comment]

The names at the top goes here! 

If you'd like to change the font, just type the font you'd like after the "[font=" after this comment! All fonts can be found at fonts.google.com.

[/comment][font=Cedarville Cursive]name 1 & name 2[/font] [/border]

[border=0px; position: absolute; height: 180px; width: 335px; border-radius: 0px; line-height:15px; top: 200px; overflow: hidden; display: flex; flex-direction: column;][border=0px; padding: 0px; height: calc(100% - 10px); width: 200%; overflow-y: scroll; overflow-x: hidden; margin-top: 5px;][border=0; height: auto; width: 50%; box-sizing: border-box; color: var(--maintextcolor); font-size: 9px; text-align: justify; margin-top: -5px; margin-left: 1px;][comment]

Post text starts here!

[/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=0;box-sizing: border-box; width:115px; height:100px; background: var(--bottomleft); background-size:cover; position: absolute; top: 400px; left: 0px; overflow: hidden; margin: auto;][/border]

[border=0px; position: absolute; background: transparent; top: 395px; height: 90px; width: 95px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: hidden; overflow-x: hidden; font-size:12px; left: -5px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto; overflow-x: hidden;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; position: relative; background: transparent; height: 100px; width: 115px; border-radius: 0px;][/border][border=0; box-sizing: border-box; padding: 10px; width: 50%; color: var(--moodetccolor); font-size: 11px; line-height: 11px; height: 150%; background: var(--moodetcbackground); opacity: 95%;][border=transparent; height:20px; width:20px; padding:0; overflow:hidden; position:relative; left: 36px; opacity: 0%][border=transparent; height:80px; width:180px; overflow-x: hidden; 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/989wclz/snow-patrol-chasing-cars[/media][/border][/border][border=0;box-sizing: border-box; width: fit-content; height:25px; top: -25px; left: 25px; background-size:cover; position: relative; color: var(--playercolor); line-height: 10px; font-size: 20px; text-align: left; letter-spacing: 2px; pointer-events: none;][fa]fas fa-play[/fa][/border]
[border=0;box-sizing: border-box; width: 95px; height:20px; top: -35px; background-size:cover; position: relative; color: var(--playercolor); line-height: 12px; font-size: 10px; text-align: left; letter-spacing: 2px; pointer-events: none;][comment]

Here goes your song! This is the center scrolly image.

If you'd like to change the fonts, just change the things after the "[font="! All fonts can be found at fonts.google.com. The font right after this comment is the name of the song, while the "Cedarville Cursive"s are the fonts for the "playing..." and "by [artist]".

[/comment][font=Montserrat][font=Cedarville Cursive]playing...[/font]
song
[font=Cedarville Cursive][right]by singer[/right][/font][/font][/border][/border][/border][/border][/border]

[border=0;box-sizing: border-box; width:114px; height:100px; background: var(--bottommiddle); background-size:cover; position: absolute; top: 400px; left: 117px;][/border]

[border=0px; position: absolute; background: transparent; top: 395px; height: 90px; width: 105px; border-radius:0px; line-height:150%; text: justify; color: var(--maintextcolor); overflow-y: hidden; overflow-x: hidden; font-size:12px; left: 111px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; position: relative; background: transparent; height: 100px; width: 115px; border-radius: 0px;][/border][border=0; box-sizing: border-box; padding: 10px; width: 50%; color: var(--moodetccolor); font-size: 11px; line-height: 11px; background: var(--moodetcbackground); opacity: 95%; text-align: center;][comment]

Here goes the name of your collaborator(s). It's the scrolly at the bottom center image, if you're wondering where it is.

If you'd like to change the fonts, just change the things after the "[font="! All fonts can be found at fonts.google.com. The font right after this comment is for the main text, while the headers are the ones with "Cedarville Cursive".

[/comment][font=Quicksand][font=Cedarville Cursive]this post was made in collaboration with[/font]
tag collaborators[/font][/border][/border][/border]

[border=0;box-sizing: border-box; width:117px; height:100px; background: var(--bottomright); background-size:cover; position: absolute; top: 400px; left: 233px; overflow: auto;][/border]

[border=0px; position: absolute; background: transparent; top: 395px; height: 90px; width: 105px; border-radius:0px; line-height:15px; text: justify; color: var(--maintextcolor); overflow-y: hidden; overflow-x: hidden; font-size:12px; left: 228px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; position: relative; background: transparent; height: 100px; width: 115px; border-radius: 0px;][/border][border=0; box-sizing: border-box; padding: 10px; width: 50%; color: var(--moodetccolor); font-size: 11px; line-height: 11px; background: var(--moodetcbackground); opacity: 95%;][comment]

Here go your interactions and stuff. It's the scrolly at the bottom right image, if you're wondering where it is.

If you'd like to change the fonts, just change the things after the "[font="! All fonts can be found at fonts.google.com. The font right after this comment is for the main text, while the headers are the ones with "Cedarville Cursive".

[/comment][font=Quicksand][font=Cedarville Cursive]mentions[/font]
mentions mentions mentions[/font][/border][/border][/border]

[/border][font=Quicksand][comment]

Please do not remove credit!

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

Ditto

ʟɪᴠɪɴ' ʟɪᴋᴇ ʟᴀʀʀʏ






new code:


. in-character code .


walk of fame




. I keep reusing the same layout for codes, but.

. In-character code!

. This one looks kinda weird in the preview. Sorry about that.

. Mobile-friendly!

. Features hidden scrolls and a music player!

. If you see any issues or have any questions, please let me know!
º º code by ditto º º








CHARACTER NAME




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit vehicula sapien, at accumsan velit. Phasellus faucibus finibus nibh eget tincidunt. Vivamus ut tempor dui. Vestibulum vehicula et turpis nec egestas. Aenean ipsum nulla, dictum ac mattis non, ornare ac mauris. Aliquam a sem quis metus varius consectetur. Curabitur ac nibh tempus, ultricies velit ut, porttitor orci. Cras tempus sapien leo, at suscipit turpis volutpat elementum. Donec nibh dolor, pellentesque ut fermentum a, facilisis a nisi.

Nullam dapibus facilisis pellentesque. Sed tempus orci et sapien vehicula pellentesque. Quisque commodo ex sit amet rhoncus sagittis. Nulla facilisi. Cras semper leo quis massa ultrices feugiat. Morbi eleifend, turpis ac venenatis placerat, risus metus dignissim massa, nec rutrum nisi diam rhoncus nisi. Pellentesque malesuada augue et interdum condimentum. Phasellus at laoreet leo. Nullam tempus iaculis nunc, tempus condimentum dolor dapibus ac. Suspendisse efficitur sed tellus a elementum. Vivamus tempor pellentesque nulla ac blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus ac dolor elementum, tempor arcu non, maximus neque. Suspendisse vehicula quis lectus non elementum. In et feugiat dolor, ut luctus sapien.

Vestibulum vel arcu tellus. Nullam vitae eleifend turpis. Mauris ornare mattis ante, non volutpat sem dictum placerat. Nulla eu nisl risus. Aliquam rhoncus leo at lacus volutpat varius. Sed vestibulum sem id risus vestibulum feugiat. Curabitur at vestibulum arcu, at iaculis arcu. Nunc lorem enim, dignissim et aliquam sed, accumsan sit amet nisi. Donec mattis ligula non lacinia condimentum. Suspendisse dapibus, metus vel tempus sodales, nulla felis volutpat elit, eu hendrerit ex purus eget leo. Donec elit odio, commodo id nibh vel, bibendum aliquet mauris. Mauris id dapibus odio. Praesent vel tincidunt lectus.

Etiam eget ultrices dui, non mattis ipsum. Duis imperdiet, purus a bibendum ultrices, nibh est mollis massa, ut iaculis metus turpis et massa. In varius porta enim, et blandit tortor gravida et. Nulla in lorem et tellus lacinia cursus a non nisi. In hac habitasse platea dictumst. Vivamus convallis at erat quis fringilla. Praesent a vehicula tortor, et lobortis mi.

Suspendisse posuere posuere velit, vel pretium turpis eleifend a. Cras tortor tellus, finibus id elit sed, consectetur commodo dolor. Nunc tincidunt suscipit dictum. Aenean tincidunt ac purus ut rutrum. Pellentesque elementum, tellus sed malesuada ultrices, elit risus imperdiet purus, nec commodo velit arcu sit amet elit. Suspendisse potenti. In id convallis velit, vitae dapibus nulla. Morbi quis tortor mattis, venenatis justo tincidunt, dapibus orci. Quisque maximus nisl a dolor lacinia, et faucibus magna euismod. In varius sem ac justo vehicula, nec fermentum dolor maximus.




now playing...









mood: mood mood mood

location: location

outfit: outfit

mentions: mentions

interactions: interactions

tags: tags


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

Variables go in this border! The names should be relatively self-explanatory.

If any image 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.

If you would not like to have a border around things, you can just remove the variables that have the word "border" in them (toppicborder, bottomboxesborder, mainbgborder).

[/comment][border= 0;

--toppic: url(https://64.media.tumblr.com/d4914f21f6b0a6c5664d866ef58423f3/tumblr_inline_pb8naow6QA1uxnbj0_400.gifv) 80% 10%;
--toppicborder: #45683C;
--namecolor: #DAFFD0;
--symbolscolor: #5F984F;
--mainbgcolor: #DAFFD0;
--mainbgborder: #5F984F;
--maintextcolor: #225215;
--bottombg: #A2CC96;
--bottomborder: #5F984F;
--nowplaying: #5F984F;
--bottomtextcolor: #225215;
--linecolor1: #DAFFD0;
--linecolor2: #5F984F;
--playercircle: #DAFFD0;
--playbutton: #225215;

box-sizing: border-box; padding: 0; max-width: 350px; min-height: 500px; position: relative; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;][border= 0; box-sizing: border-box; padding: 0px; width: 350px; height: 500px; background: transparent; display: flex; flex-direction: column; margin: auto; hidden; justify-content: center; align-items: center;]

[border=0;box-sizing: border-box; width:350px; height:180px; background: var(--toppic); background-size:cover; position: absolute; top: 20px; left: 0px; border: 4px solid var(--toppicborder);][/border]

[border=0;box-sizing: border-box; width:350px; height:200px; background: var(--mainbgcolor); background-size:cover; position: absolute; top: 200px; left: 0px; border-left: 4px solid var(--mainbgborder); border-right: 4px solid var(--mainbgborder);][/border]

[border=0;box-sizing: border-box; width:350px; height:40px; top: 174px; left: 5px; background-size:cover; position: absolute; color: var(--namecolor); line-height: 10px; font-family: Viaoda Libre; font-size: 35px; text-align: right; letter-spacing: 2px;][comment]

Character name here! 

If you'd like to change the font, just change the things after the "[font="! All fonts can be found at fonts.google.com.

[/comment][font=Bebas Neue]CHARACTER NAME[/font] [/border]

[border=0;box-sizing: border-box; top: -2px; left: -25px; background-size:cover; position: absolute; color: var(--symbolscolor); line-height: 10px; font-family: Viaoda Libre; font-size: 30px; text-align: right; letter-spacing: 2px; transform: rotate(340deg);][comment]

Here's a symbol. If you'd like it to just be the outline, make it "fal" instead of "fas".

[/comment][fa]fas fa-meh[/fa][/border][border=0;box-sizing: border-box; top: -2px; left: 10px; background-size:cover; position: absolute; color: var(--symbolscolor); line-height: 10px; font-family: Viaoda Libre; font-size: 18px; text-align: right; letter-spacing: 2px; transform: rotate(300deg);][comment]

Here's a symbol. If you'd like it to be solid, make it "fas" instead of "fal".

[/comment][fa]fal fa-frown[/fa][/border][border=0;box-sizing: border-box; top: 35px; left: -20px; background-size:cover; position: absolute; color: var(--symbolscolor); line-height: 10px; font-family: Viaoda Libre; font-size: 18px; text-align: right; letter-spacing: 2px; transform: rotate(20deg);][comment]

Here's a symbol. If you'd like it to be solid, make it "fas" instead of "fal".

[/comment][fa]fal fa-frown[/fa][/border]

[border=0px; position: absolute; height: 180px; width: 335px; border-radius: 0px; line-height:15px; top: 200px; overflow: hidden; display: flex; flex-direction: column;][border=0px; padding: 0px; height: calc(100% - 10px); width: 200%; overflow-y: scroll; overflow-x: hidden; margin-top: 5px;][border=0; height: auto; width: 50%; box-sizing: border-box; color: var(--maintextcolor); font-size: 9px; text-align: justify; margin-top: -5px;][comment]

Post text starts here!

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit vehicula sapien, at accumsan velit. Phasellus faucibus finibus nibh eget tincidunt. Vivamus ut tempor dui. Vestibulum vehicula et turpis nec egestas. Aenean ipsum nulla, dictum ac mattis non, ornare ac mauris. Aliquam a sem quis metus varius consectetur. Curabitur ac nibh tempus, ultricies velit ut, porttitor orci. Cras tempus sapien leo, at suscipit turpis volutpat elementum. Donec nibh dolor, pellentesque ut fermentum a, facilisis a nisi.

Nullam dapibus facilisis pellentesque. Sed tempus orci et sapien vehicula pellentesque. Quisque commodo ex sit amet rhoncus sagittis. Nulla facilisi. Cras semper leo quis massa ultrices feugiat. Morbi eleifend, turpis ac venenatis placerat, risus metus dignissim massa, nec rutrum nisi diam rhoncus nisi. Pellentesque malesuada augue et interdum condimentum. Phasellus at laoreet leo. Nullam tempus iaculis nunc, tempus condimentum dolor dapibus ac. Suspendisse efficitur sed tellus a elementum. Vivamus tempor pellentesque nulla ac blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus ac dolor elementum, tempor arcu non, maximus neque. Suspendisse vehicula quis lectus non elementum. In et feugiat dolor, ut luctus sapien.

Vestibulum vel arcu tellus. Nullam vitae eleifend turpis. Mauris ornare mattis ante, non volutpat sem dictum placerat. Nulla eu nisl risus. Aliquam rhoncus leo at lacus volutpat varius. Sed vestibulum sem id risus vestibulum feugiat. Curabitur at vestibulum arcu, at iaculis arcu. Nunc lorem enim, dignissim et aliquam sed, accumsan sit amet nisi. Donec mattis ligula non lacinia condimentum. Suspendisse dapibus, metus vel tempus sodales, nulla felis volutpat elit, eu hendrerit ex purus eget leo. Donec elit odio, commodo id nibh vel, bibendum aliquet mauris. Mauris id dapibus odio. Praesent vel tincidunt lectus.

Etiam eget ultrices dui, non mattis ipsum. Duis imperdiet, purus a bibendum ultrices, nibh est mollis massa, ut iaculis metus turpis et massa. In varius porta enim, et blandit tortor gravida et. Nulla in lorem et tellus lacinia cursus a non nisi. In hac habitasse platea dictumst. Vivamus convallis at erat quis fringilla. Praesent a vehicula tortor, et lobortis mi.

Suspendisse posuere posuere velit, vel pretium turpis eleifend a. Cras tortor tellus, finibus id elit sed, consectetur commodo dolor. Nunc tincidunt suscipit dictum. Aenean tincidunt ac purus ut rutrum. Pellentesque elementum, tellus sed malesuada ultrices, elit risus imperdiet purus, nec commodo velit arcu sit amet elit. Suspendisse potenti. In id convallis velit, vitae dapibus nulla. Morbi quis tortor mattis, venenatis justo tincidunt, dapibus orci. Quisque maximus nisl a dolor lacinia, et faucibus magna euismod. In varius sem ac justo vehicula, nec fermentum dolor maximus.[/border][/border][/border]

[border=0;box-sizing: border-box; width:350px; height:100px; background: var(--bottombg); background-size:cover; position: absolute; top: 400px; left: 0px; overflow: hidden; border: 4px solid var(--bottomborder); margin: auto;][/border]

[border=0;box-sizing: border-box; width:210px; height:25px; top: 410px; background-size:cover; position: absolute; color: var(--nowplaying); line-height: 10px; font-family: Viaoda Libre; font-size: 15px; text-align: left; letter-spacing: 2px; pointer-events: none;][font=cedarville cursive][i]now playing...[/i][/font] [/border]

[border=0;box-sizing: border-box; width:260px; height:54px; background-size:cover; position: absolute; top: 425px; left: 70px; overflow: auto; border-radius: 15px;][border=transparent; height:1px; width:90%; padding:0; border-radius:5px; background: var(--linecolor1); display:flex; align-items:center; top: 40px; left: 10px; position: absolute;][border=transparent; height:3px; padding:0; border-radius:5px; background: var(--linecolor2); width:74%;][/border][/border][/border]

[border=transparent; height:48px; width:40px; padding:0; overflow:hidden; position:absolute; left: 20px; top: 420px; opacity: 0%][border=transparent; height:80px; width:180px; overflow-x: hidden; 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/dj-naash/dj-khaled-all-i-do-is-win-feat[/media][/border][/border]

[border=0;box-sizing: border-box; width:50px; height:50px; background: var(--playercircle); background-size:cover; position: absolute; top: 425px; left: 15px; overflow: hidden; margin: auto; border-radius: 100%; pointer-events: none;][/border]

[border=0;box-sizing: border-box; width: fit-content; height:50px; top: 425px; left: 19px; background-size:cover; position: absolute; color: var(--playbutton); line-height: 10px; font-size: 30px; text-align: left; letter-spacing: 2px; pointer-events: none;][fa]fas fa-play[/fa][/border]

[border=0px; position: absolute; background: transparent; top: 430px; height: 15px; width: 250px; border-radius:0px; line-height:15px; text: justify; overflow-y: hidden; overflow-x: hidden; font-size:12px; left: 62px;][border=0; box-sizing: border-box; padding: 0; width: 200%; height: 100%; overflow: auto;][border=0; box-sizing: border-box; padding: 0 10px 0px 10px; width: 50%; color: var(--bottomtextcolor); font-size: 11px; line-height: 14px; text-align: justify;][comment]

Here goes your mood and stuff. It's the scrolly at the bottom left image, if you're wondering where it is.

If you'd like to change the fonts, just change the things after the "[font="! All fonts can be found at fonts.google.com. The font right after this comment is for the main text, and the headers are "Bebas Neue".

[/comment][font=Montserrat][font=Bebas Neue]mood:[/font] mood mood mood

[font=Bebas Neue]location:[/font] location

[font=Bebas Neue]outfit:[/font] outfit

[font=Bebas Neue]mentions:[/font] mentions

[font=Bebas Neue]interactions:[/font] interactions

[font=Bebas Neue]tags:[/font] tags[/font][/border][/border][/border]

[/border][comment]

Please do not remove credit!

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

Users who are viewing this thread

Top