ohdittoh
still kicking :)
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: #6E9470;
--rightbgcolor: #B8D9BA;
--maintextcolor: #193E1B;
*If the pic is too zoomed in/too zoomed out, command f search "var(--pic)" and change the "background-size: cover" in the border to any percentage;
--pic: url(https://i.ibb.co/m8TY7Rq/Untitled-3.gif) 50% 40%;
--namecolor: #B8D9BA;
--nameshadowcolor: #193E1B;
--littlewordscolor: #79A37B;
--lilleftboxcolor: #B8D9BA;
--imageborder: #B8D9BA;
--bgpicright: url(https://i.ibb.co/zfs4rxW/Trevor-Aesthetic.jpg);
--cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur);
box-sizing: border-box; padding: 0; max-width: 700px; min-height: 350px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black; cursor: var(--cursor), auto!important;]
[border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 350px; 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=0px; position: absolute; width: 100%; top: -15px; font-size: 27px; color: var(--namecolor); background: transparent; text-align: center; text-shadow: 0px 2px var(--nameshadowcolor); line-height:13px; left:-10px;][comment]
Character name goes here! Change the font as you'd like.
[/comment][font=Playfair Display]character name[/font][/border][border=transparent; height:20px; width:20px; padding:0; overflow:hidden; position:absolute; top:150px; left:-10px;][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/thisislany/sharing-you[/media][/border][/border][border=0; box-sizing: border-box; padding: 0; background: var(--pic); background-size: cover; filter: grayscale(0.4); height:150px; width:350px; border-radius: 0%; position:absolute; border-top: 4px solid var(--imageborder); border-bottom: 4px solid var(--imageborder); top: 35px; pointer-events: none;][/border][border=0; position: absolute; background: transparent; top: 148px; left: -10px; height: 40px; width: 40px; border-radius:0px; line-height:15px; text: justify; color: var(--leftbgcolor); overflow-y: scroll; font-size:15px; pointer-events: none; opacity: 50%;][fa]fas fa-play[/fa] [comment]
No, the pause button is not functional
[/comment][fa]fas fa-pause[/fa] [/border][border=0px; position: absolute; background: var(--lilleftboxcolor); top: 200px; height: 68px; 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: 10px; 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]Status here.[/b]
[size=8px][i]@[u]username[/u] has set their outfit to:[/i][/size]
[b][comment]
Put your character's outfit in place of the url after the "url="!
[/comment][url=https://i5.walmartimages.com/asr/dd1313f3-6f18-4358-8c33-7542294865c7_1.ef90caddebd85e46b753620019d733c3.jpeg][comment]
Put your main text color as the color in the following bracket!
[/comment][color=#193E1B]Link to outfit.[/color][/url][/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 interacted with:[/i][/size]
[b]Interactions here.[/b]
[size=8px][i]@[u]usernae[/u] has tagged:[/i][/size]
[b]Tags here.[/b]
[size=8px][i]@[u]username[/u] has written a tl;dr:[/i][/size]
[b]tl;dr here.[/b]
[/border][/border][/border][/border][/border][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 350px; background: var(--bgpicright); display: flex; flex-direction: column; overflow: hidden; background-size: cover; filter: saturate(0.4);][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; flex: 1; position: relative; text-align: justify; height:350px; width: 350px; background: transparent;][/border][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: 25%; font-size: 10px; line-height: 14px; background: var(--rightbgcolor); position: relative; left: 3px; padding: 15px; text-align: justify; filter: saturate(2.0);][comment]
Here starts your post!
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit ultricies sem, blandit suscipit justo sollicitudin sed. Phasellus elementum enim arcu, ac blandit ante sodales eget. Maecenas fringilla porta massa, semper pellentesque est mollis nec. Morbi lobortis nisl vel molestie laoreet. Aenean felis ex, condimentum tincidunt libero vel, gravida vehicula est. Donec et convallis nibh. Etiam nec nunc elementum, rhoncus dolor sit amet, semper quam. In cursus orci malesuada quam accumsan tristique. Curabitur interdum quam ac eros ornare pellentesque. Suspendisse a ex eleifend, aliquam odio eu, aliquam nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris dolor nulla, varius quis iaculis sit amet, euismod in diam. Nam volutpat posuere aliquet. Vivamus sodales pellentesque metus, id mollis mi tristique nec.
Sed nunc ex, convallis vitae fermentum at, condimentum ut sapien. Vestibulum commodo nisi vitae lobortis fermentum. Praesent aliquam ac eros id condimentum. Quisque neque libero, volutpat et quam non, scelerisque ultricies purus. Phasellus finibus risus erat, a tempor neque mattis nec. Cras vel nibh ut odio congue consequat at at massa. Morbi vestibulum tempus faucibus. Nunc eleifend sed erat in sodales.
Aliquam imperdiet est sed odio mattis tristique. Etiam sagittis lacus sem, sit amet lacinia purus consequat eget. Duis semper ornare ante ut blandit. Maecenas tincidunt in lectus eu laoreet. Ut iaculis tincidunt erat ut scelerisque. Vestibulum tempor lacus ullamcorper auctor suscipit. Morbi vitae nisl id risus efficitur malesuada. Aenean suscipit arcu et libero porta suscipit. Donec mattis mattis elit, id sollicitudin massa maximus quis. Nunc fringilla metus sit amet egestas tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam viverra leo eget hendrerit tincidunt. Duis at turpis tempor, maximus leo nec, tristique arcu. Quisque sodales felis nulla, id suscipit tellus viverra quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec quam vitae nisi dignissim vehicula.
Ut molestie nulla ut eros ultricies, at tempor libero laoreet. Proin gravida rutrum elit, in tincidunt arcu. Phasellus sed tincidunt lorem, sed varius felis. Proin nec elit a leo posuere euismod. Fusce vel mauris posuere ligula hendrerit condimentum ut in diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ac lacus et enim maximus congue. Pellentesque rhoncus ultricies ligula, nec tincidunt turpis pellentesque a. Vivamus pulvinar lacus sed nulla vulputate, ut sollicitudin nulla hendrerit. Nunc quis dui at nibh viverra varius vitae sed quam. Sed interdum lorem nec est dignissim, eu consectetur lacus aliquam.
Donec vulputate, dolor pharetra condimentum ultricies, velit turpis suscipit urna, non tristique sem dui et urna. Phasellus convallis vestibulum sapien, eget dapibus lectus volutpat placerat. Quisque rhoncus molestie est, vitae facilisis enim lacinia vel. Nam finibus condimentum congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin vestibulum a urna non commodo. Quisque iaculis semper quam ut tincidunt. Vivamus quis arcu nec sapien tempor pulvinar. Vivamus nec neque magna. Phasellus arcu libero, posuere id eros a, vehicula dignissim ex. Proin ornare ultricies dapibus. Proin sit amet venenatis dui, rhoncus dapibus tortor. Maecenas dictum ac quam sit amet aliquet.[/border][/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: #5989af;
--rightbgcolor: #0c89e8;
--maintextcolor: #15395A;
--pic: url(https://i.ibb.co/PjjsTNF/ezgif-com-gif-maker-27.gif) 50% 40%;
--namecolor: #345278;
--lilleftboxcolor: #345278;
--imageborder: #345278;
--bgpicright: url(https://i.ibb.co/Czs7fWK/Nickie-Aesthetic.jpg);
--cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur);
box-sizing: border-box; padding: 0; max-width: 700px; min-height: 350px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black; cursor: var(--cursor), auto!important;][comment]
Don't mess with this. It's the left box.
[/comment][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 350px; 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=0px; position: absolute; width: 100%; top: -15px; font-size: 30px; color: var(--namecolor); background: transparent; text-align: center; line-height:13px; left:-10px;][comment]
Character name goes here! Change the font as you'd like.
[/comment][font=Viaoda Libre]character name[/font][/border][border=transparent; height:20px; width:20px; padding:0; overflow:hidden; position:absolute; top:150px; left:-10px;][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/thisislany/sharing-you[/media][/border][/border][border=0; box-sizing: border-box; padding: 0; background: var(--pic); background-size: cover; filter: grayscale(0.4); height:150px; width:350px; border-radius: 0%; position:absolute; border-top: 4px solid var(--imageborder); border-bottom: 4px solid var(--imageborder); top: 35px; pointer-events: none;][/border][border=0; position: absolute; background: transparent; top: 148px; left: -10px; height: 40px; width: 40px; border-radius:0px; line-height:15px; text: justify; color: var(--leftbgcolor); overflow-y: scroll; font-size:15px; pointer-events: none; opacity: 50%;][fa]fas fa-play[/fa] [comment]
No, the pause button is not functional
[/comment][fa]fas fa-pause[/fa] [/border][border=0px; position: absolute; background: var(--lilleftboxcolor); top: 200px; height: 68px; 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: 10px; 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; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; 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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Mood[/border]
[border=transparent; height:fit-content; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; 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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Outfit[/border]
[border=transparent; height:fit-content; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; 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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Location.[/border]
[border=transparent; height:fit-content; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; 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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Mentions[/border]
[border=transparent; height:fit-content; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; width: 100%;]Who are you interacting with?[/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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Interactions.[/border]
[border=transparent; height:fit-content; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; width: 100%;]And, like, who are tagging, exactly?[/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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Tags[/border]
[border=transparent; height:fit-content; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; width: 100%;]Can I get a tl;dr?[/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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Tl;dr[/border][/size]
[/border][/border][/border][/border][/border][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 350px; background: var(--bgpicright); display: flex; flex-direction: column; overflow: hidden; background-size: cover; filter: saturate(0.4);][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; flex: 1; position: relative; text-align: justify; height:350px; width: 350px; background: transparent;][/border][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: 25%; font-size: 10px; line-height: 14px; background: var(--rightbgcolor); position: relative; left: 3px; padding: 15px; text-align: justify; filter: saturate(2.0);][comment]
Here starts your post!
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit ultricies sem, blandit suscipit justo sollicitudin sed. Phasellus elementum enim arcu, ac blandit ante sodales eget. Maecenas fringilla porta massa, semper pellentesque est mollis nec. Morbi lobortis nisl vel molestie laoreet. Aenean felis ex, condimentum tincidunt libero vel, gravida vehicula est. Donec et convallis nibh. Etiam nec nunc elementum, rhoncus dolor sit amet, semper quam. In cursus orci malesuada quam accumsan tristique. Curabitur interdum quam ac eros ornare pellentesque. Suspendisse a ex eleifend, aliquam odio eu, aliquam nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris dolor nulla, varius quis iaculis sit amet, euismod in diam. Nam volutpat posuere aliquet. Vivamus sodales pellentesque metus, id mollis mi tristique nec.
Sed nunc ex, convallis vitae fermentum at, condimentum ut sapien. Vestibulum commodo nisi vitae lobortis fermentum. Praesent aliquam ac eros id condimentum. Quisque neque libero, volutpat et quam non, scelerisque ultricies purus. Phasellus finibus risus erat, a tempor neque mattis nec. Cras vel nibh ut odio congue consequat at at massa. Morbi vestibulum tempus faucibus. Nunc eleifend sed erat in sodales.
Aliquam imperdiet est sed odio mattis tristique. Etiam sagittis lacus sem, sit amet lacinia purus consequat eget. Duis semper ornare ante ut blandit. Maecenas tincidunt in lectus eu laoreet. Ut iaculis tincidunt erat ut scelerisque. Vestibulum tempor lacus ullamcorper auctor suscipit. Morbi vitae nisl id risus efficitur malesuada. Aenean suscipit arcu et libero porta suscipit. Donec mattis mattis elit, id sollicitudin massa maximus quis. Nunc fringilla metus sit amet egestas tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam viverra leo eget hendrerit tincidunt. Duis at turpis tempor, maximus leo nec, tristique arcu. Quisque sodales felis nulla, id suscipit tellus viverra quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec quam vitae nisi dignissim vehicula.
Ut molestie nulla ut eros ultricies, at tempor libero laoreet. Proin gravida rutrum elit, in tincidunt arcu. Phasellus sed tincidunt lorem, sed varius felis. Proin nec elit a leo posuere euismod. Fusce vel mauris posuere ligula hendrerit condimentum ut in diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ac lacus et enim maximus congue. Pellentesque rhoncus ultricies ligula, nec tincidunt turpis pellentesque a. Vivamus pulvinar lacus sed nulla vulputate, ut sollicitudin nulla hendrerit. Nunc quis dui at nibh viverra varius vitae sed quam. Sed interdum lorem nec est dignissim, eu consectetur lacus aliquam.
Donec vulputate, dolor pharetra condimentum ultricies, velit turpis suscipit urna, non tristique sem dui et urna. Phasellus convallis vestibulum sapien, eget dapibus lectus volutpat placerat. Quisque rhoncus molestie est, vitae facilisis enim lacinia vel. Nam finibus condimentum congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin vestibulum a urna non commodo. Quisque iaculis semper quam ut tincidunt. Vivamus quis arcu nec sapien tempor pulvinar. Vivamus nec neque magna. Phasellus arcu libero, posuere id eros a, vehicula dignissim ex. Proin ornare ultricies dapibus. Proin sit amet venenatis dui, rhoncus dapibus tortor. Maecenas dictum ac quam sit amet aliquet.[/border][/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: #6E9470;
--rightbgcolor: #B8D9BA;
--maintextcolor: #193E1B;
*If the pic is too zoomed in/too zoomed out, command f search "var(--pic)" and change the "background-size: cover" in the border to any percentage;
--pic: url(https://i.ibb.co/m8TY7Rq/Untitled-3.gif) 50% 40%;
--namecolor: #B8D9BA;
--nameshadowcolor: #193E1B;
--littlewordscolor: #79A37B;
--spinnythingy: url( );
--lilleftboxcolor: #B8D9BA;
--imageborder: #B8D9BA;
--bgpicright: url(https://i.ibb.co/zfs4rxW/Trevor-Aesthetic.jpg);
--cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur);
box-sizing: border-box; padding: 0; max-width: 700px; min-height: 350px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black; cursor: var(--cursor), auto!important;']
[border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 350px; 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=0px; position: absolute; width: 100%; top: -15px; font-size: 27px; color: var(--namecolor); background: transparent; text-align: center; text-shadow: 0px 2px var(--nameshadowcolor); line-height:13px; left:-10px;][comment]
Character name goes here! Change the font as you'd like.
[/comment][font=Playfair Display]character name[/font][/border][border=transparent; height:20px; width:20px; padding:0; overflow:hidden; position:absolute; top:150px; left:-10px;][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/thisislany/sharing-you[/media][/border][/border][border=0; box-sizing: border-box; padding: 0; background: var(--pic); background-size: cover; filter: grayscale(0.4); height:150px; width:350px; border-radius: 0%; position:absolute; border-top: 4px solid var(--imageborder); border-bottom: 4px solid var(--imageborder); top: 35px; pointer-events: none;][/border][border=0; position: absolute; background: transparent; top: 148px; left: -10px; height: 40px; width: 40px; border-radius:0px; line-height:15px; text: justify; color: var(--leftbgcolor); overflow-y: scroll; font-size:15px; pointer-events: none; opacity: 50%;][fa]fas fa-play[/fa] [comment]
No, the pause button is not functional
[/comment][fa]fas fa-pause[/fa] [/border][border=0px; position: absolute; background: var(--lilleftboxcolor); top: 200px; height: 68px; 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: 10px; 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]Status here.[/b]
[size=8px][i]@[u]username[/u] has set their outfit to:[/i][/size]
[b][comment]
Put your character's outfit in place of the url after the "url="!
[/comment][url=https://i5.walmartimages.com/asr/dd1313f3-6f18-4358-8c33-7542294865c7_1.ef90caddebd85e46b753620019d733c3.jpeg][comment]
Put your main text color as the color in the following bracket!
[/comment][color=#193E1B]Link to outfit.[/color][/url][/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 interacted with:[/i][/size]
[b]Interactions here.[/b]
[size=8px][i]@[u]username[/u] has tagged:[/i][/size]
[b]Tags here.[/b]
[size=8px][i]@[u]username[/u] has written a tl;dr:[/i][/size]
[b]tl;dr here.[/b]
[/border][/border][/border][/border][/border][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 350px; background: var(--bgpicright); display: flex; flex-direction: column; overflow: hidden; background-size: cover; filter: justify-content: center;][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; flex: 1; position: relative; text-align: justify; height:350px; width: 350px; background: transparent;][border=0; background: var(--spinnythingy); position: absolute; top: 125px; left: 125px; height: 20px; width: 20px; background-size: cover;][/border][/border][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: 25%; font-size: 10px; line-height: 14px; background: var(--rightbgcolor); position: relative; left: 3px; padding: 15px; text-align: justify;][comment]
Here starts your post!
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit ultricies sem, blandit suscipit justo sollicitudin sed. Phasellus elementum enim arcu, ac blandit ante sodales eget. Maecenas fringilla porta massa, semper pellentesque est mollis nec. Morbi lobortis nisl vel molestie laoreet. Aenean felis ex, condimentum tincidunt libero vel, gravida vehicula est. Donec et convallis nibh. Etiam nec nunc elementum, rhoncus dolor sit amet, semper quam. In cursus orci malesuada quam accumsan tristique. Curabitur interdum quam ac eros ornare pellentesque. Suspendisse a ex eleifend, aliquam odio eu, aliquam nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris dolor nulla, varius quis iaculis sit amet, euismod in diam. Nam volutpat posuere aliquet. Vivamus sodales pellentesque metus, id mollis mi tristique nec.
Sed nunc ex, convallis vitae fermentum at, condimentum ut sapien. Vestibulum commodo nisi vitae lobortis fermentum. Praesent aliquam ac eros id condimentum. Quisque neque libero, volutpat et quam non, scelerisque ultricies purus. Phasellus finibus risus erat, a tempor neque mattis nec. Cras vel nibh ut odio congue consequat at at massa. Morbi vestibulum tempus faucibus. Nunc eleifend sed erat in sodales.
Aliquam imperdiet est sed odio mattis tristique. Etiam sagittis lacus sem, sit amet lacinia purus consequat eget. Duis semper ornare ante ut blandit. Maecenas tincidunt in lectus eu laoreet. Ut iaculis tincidunt erat ut scelerisque. Vestibulum tempor lacus ullamcorper auctor suscipit. Morbi vitae nisl id risus efficitur malesuada. Aenean suscipit arcu et libero porta suscipit. Donec mattis mattis elit, id sollicitudin massa maximus quis. Nunc fringilla metus sit amet egestas tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam viverra leo eget hendrerit tincidunt. Duis at turpis tempor, maximus leo nec, tristique arcu. Quisque sodales felis nulla, id suscipit tellus viverra quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec quam vitae nisi dignissim vehicula.
Ut molestie nulla ut eros ultricies, at tempor libero laoreet. Proin gravida rutrum elit, in tincidunt arcu. Phasellus sed tincidunt lorem, sed varius felis. Proin nec elit a leo posuere euismod. Fusce vel mauris posuere ligula hendrerit condimentum ut in diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ac lacus et enim maximus congue. Pellentesque rhoncus ultricies ligula, nec tincidunt turpis pellentesque a. Vivamus pulvinar lacus sed nulla vulputate, ut sollicitudin nulla hendrerit. Nunc quis dui at nibh viverra varius vitae sed quam. Sed interdum lorem nec est dignissim, eu consectetur lacus aliquam.
Donec vulputate, dolor pharetra condimentum ultricies, velit turpis suscipit urna, non tristique sem dui et urna. Phasellus convallis vestibulum sapien, eget dapibus lectus volutpat placerat. Quisque rhoncus molestie est, vitae facilisis enim lacinia vel. Nam finibus condimentum congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin vestibulum a urna non commodo. Quisque iaculis semper quam ut tincidunt. Vivamus quis arcu nec sapien tempor pulvinar. Vivamus nec neque magna. Phasellus arcu libero, posuere id eros a, vehicula dignissim ex. Proin ornare ultricies dapibus. Proin sit amet venenatis dui, rhoncus dapibus tortor. Maecenas dictum ac quam sit amet aliquet.[/border][/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: #5989af;
--rightbgcolor: #F6F6F6;
--maintextcolor: #15395A;
--pic: url(https://i.ibb.co/PjjsTNF/ezgif-com-gif-maker-27.gif) 50% 40%;
--namecolor: #F6F6F6;
--lilleftboxcolor: #345278;
--imageborder: #345278;
--bgpicright: url(https://i.ibb.co/Czs7fWK/Nickie-Aesthetic.jpg);
--cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur);
box-sizing: border-box; padding: 0; max-width: 700px; min-height: 350px; position: relative; margin: auto; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: center; align-items: center; color: black; cursor: var(--cursor), auto!important;][comment]
Don't mess with this. It's the left box.
[/comment][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 350px; 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=0px; position: absolute; width: 100%; top: -15px; font-size: 30px; color: var(--namecolor); background: transparent; text-align: center; line-height:13px; left:-10px;][comment]
Character name goes here! Change the font as you'd like.
[/comment][font=Viaoda Libre]character name[/font][/border][border=transparent; height:20px; width:20px; padding:0; overflow:hidden; position:absolute; top:150px; left:-10px;][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/thisislany/sharing-you[/media][/border][/border][border=0; box-sizing: border-box; padding: 0; background: var(--pic); background-size: cover; filter: grayscale(0.0); height:150px; width:350px; border-radius: 0%; position:absolute; border-top: 4px solid var(--imageborder); border-bottom: 4px solid var(--imageborder); top: 35px; pointer-events: none;][/border][border=0; position: absolute; background: transparent; top: 148px; left: -10px; height: 40px; width: 40px; border-radius:0px; line-height:15px; text: justify; color: var(--rightbgcolor); overflow-y: scroll; font-size:15px; pointer-events: none; opacity: 50%;][fa]fas fa-play[/fa] [comment]
No, the pause button is not functional
[/comment][fa]fas fa-pause[/fa] [/border][border=0px; position: absolute; background: var(--lilleftboxcolor); top: 200px; height: 68px; 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: 10px; 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; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; 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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Mood[/border]
[border=transparent; height:fit-content; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; 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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Outfit[/border]
[border=transparent; height:fit-content; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; 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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Location.[/border]
[border=transparent; height:fit-content; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; 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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Mentions[/border]
[border=transparent; height:fit-content; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; width: 100%;]Who are you interacting with?[/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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Interactions.[/border]
[border=transparent; height:fit-content; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; width: 100%;]And, like, who are tagging, exactly?[/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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Tags[/border]
[border=transparent; height:fit-content; width:100%; border-radius:10px 10px 10px 0px; padding:4px -px; box-sizing:border-box; line-height:120%; font-size:12px; background: #F6F6F6; margin:10px 10px 10px 0px; color: #000000; width: 100%;]Can I get a tl;dr?[/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: #ffffff; background: #4387D9; margin:10px 10px 10px 0px;]Tl;dr[/border][/size]
[/border][/border][/border][/border][/border][border= 0; box-sizing: border-box; padding: 30px; width: 350px; height: 350px; background: var(--bgpicright); display: flex; flex-direction: column; overflow: hidden; background-size: cover;][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; flex: 1; position: relative; text-align: justify; height:350px; width: 350px; background: transparent;][/border][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: 25%; font-size: 10px; line-height: 14px; background: var(--rightbgcolor); position: relative; left: 3px; padding: 15px; text-align: justify;][comment]
Here starts your post!
[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit ultricies sem, blandit suscipit justo sollicitudin sed. Phasellus elementum enim arcu, ac blandit ante sodales eget. Maecenas fringilla porta massa, semper pellentesque est mollis nec. Morbi lobortis nisl vel molestie laoreet. Aenean felis ex, condimentum tincidunt libero vel, gravida vehicula est. Donec et convallis nibh. Etiam nec nunc elementum, rhoncus dolor sit amet, semper quam. In cursus orci malesuada quam accumsan tristique. Curabitur interdum quam ac eros ornare pellentesque. Suspendisse a ex eleifend, aliquam odio eu, aliquam nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris dolor nulla, varius quis iaculis sit amet, euismod in diam. Nam volutpat posuere aliquet. Vivamus sodales pellentesque metus, id mollis mi tristique nec.
Sed nunc ex, convallis vitae fermentum at, condimentum ut sapien. Vestibulum commodo nisi vitae lobortis fermentum. Praesent aliquam ac eros id condimentum. Quisque neque libero, volutpat et quam non, scelerisque ultricies purus. Phasellus finibus risus erat, a tempor neque mattis nec. Cras vel nibh ut odio congue consequat at at massa. Morbi vestibulum tempus faucibus. Nunc eleifend sed erat in sodales.
Aliquam imperdiet est sed odio mattis tristique. Etiam sagittis lacus sem, sit amet lacinia purus consequat eget. Duis semper ornare ante ut blandit. Maecenas tincidunt in lectus eu laoreet. Ut iaculis tincidunt erat ut scelerisque. Vestibulum tempor lacus ullamcorper auctor suscipit. Morbi vitae nisl id risus efficitur malesuada. Aenean suscipit arcu et libero porta suscipit. Donec mattis mattis elit, id sollicitudin massa maximus quis. Nunc fringilla metus sit amet egestas tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam viverra leo eget hendrerit tincidunt. Duis at turpis tempor, maximus leo nec, tristique arcu. Quisque sodales felis nulla, id suscipit tellus viverra quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec quam vitae nisi dignissim vehicula.
Ut molestie nulla ut eros ultricies, at tempor libero laoreet. Proin gravida rutrum elit, in tincidunt arcu. Phasellus sed tincidunt lorem, sed varius felis. Proin nec elit a leo posuere euismod. Fusce vel mauris posuere ligula hendrerit condimentum ut in diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam ac lacus et enim maximus congue. Pellentesque rhoncus ultricies ligula, nec tincidunt turpis pellentesque a. Vivamus pulvinar lacus sed nulla vulputate, ut sollicitudin nulla hendrerit. Nunc quis dui at nibh viverra varius vitae sed quam. Sed interdum lorem nec est dignissim, eu consectetur lacus aliquam.
Donec vulputate, dolor pharetra condimentum ultricies, velit turpis suscipit urna, non tristique sem dui et urna. Phasellus convallis vestibulum sapien, eget dapibus lectus volutpat placerat. Quisque rhoncus molestie est, vitae facilisis enim lacinia vel. Nam finibus condimentum congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin vestibulum a urna non commodo. Quisque iaculis semper quam ut tincidunt. Vivamus quis arcu nec sapien tempor pulvinar. Vivamus nec neque magna. Phasellus arcu libero, posuere id eros a, vehicula dignissim ex. Proin ornare ultricies dapibus. Proin sit amet venenatis dui, rhoncus dapibus tortor. Maecenas dictum ac quam sit amet aliquet.[/border][/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:
