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

Help Post Template Help/Request

Daddy Dream

Daddy Dream

Creation becomes Destruction
Roleplay Availability
Roleplay Type(s)
My Interest Check
Hello, first off, to anyone able to help me. I have spent a good amount of time experimenting in my PW and havent come up with satisfactory results. So I come here in hopes to get some help.

My idea is to combine these two post templates into a tabbed template for a roleplay. Things I would like to keep as a whole is that each tab has the ability to change its background, the width and height not change too much, hidden scroll for each text box, and that there is the PFP for each character

Other things I would like but not required is the ability to add more tabs and the code be easily readable and sectioned out. These are just personal wants, not entirely required.

Irvine Monet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Code: 
[comment]
// bg image //

[/comment][border=0px solid #F70D1A; box-sizing: border-box; margin: 0 auto; padding: calc(10px + 2%); width: 100%; max-width: 500px; border-radius: 20px; background: url('https://i.pinimg.com/originals/c4/20/59/c42059eee719d0aef99449a1459dc8db.gif')center/cover no-repeat; box-shadow:0px 0px 30px #9FC9D4; padding:50px; border-radius: 5px; ; position: relative; font-size: initial;][comment]

// image //

[/comment][border="0; padding: 0; width: 100%; height: 250px; border-radius: 5px; background: url('https://i.pinimg.com/736x/4a/d5/b4/4ad5b4c4b9e7aec5a917d258b2731089.jpg')center/cover no-repeat; position: relative;"][comment]

// bg box //

[/comment][border=0; display: flex; flex-flow: row wrap; justify-content: flex-end; right: 15px; bottom: 10px; margin-left: -7px; padding: 0; width: calc(100% - 15px); max-width: 175px; position: absolute;][/border][/border][comment]

// end of image + bg box + bg image // start of name plate //

[/comment][border=0; margin-top: 0px; padding: 0; width: 100%; height: 0px; background: #F70D1A; position: relative;][border="0; top: -10px; right: 0; font-size: 1.5em; line-height: 0; font-weight: 700; color: #87AFC7; background: #396C7F; position: absolute;"][font=Indie Flower]Irvine Monet[/font][/border][comment]

// end of name plate // start of body text - text color=#E56E94 //

[/comment][/border][border="0; margin-top: 5px; padding: 0; font-size: 1.2em; line-height: 125%; color: #87AFC7; text-align: justify; border=0px solid #F70D1A; box-sizing: border-box; margin: 20px auto; background-color: #396C7F; box-shadow:0px 0px 20px #9FC9D4; padding:15px; border-radius: 20px; position: relative;"][font=Patrick Hand SC][div=overflow: scroll; scrollbar-width: none; height:500px;][color=#99C68E]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/color]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/div][/font][/border][/border]


Illesia Mondessa
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Code: 
[comment]
//Colors//
--speaking: color=#599CA7

[/comment]
[comment]
// bg image //

[/comment][border=0px solid #F70D1A; box-sizing: border-box; margin: 0 auto; padding: calc(10px + 2%); width: 100%; max-width: 500px; border-radius: 20px; background: url('https://i.pinimg.com/236x/01/40/05/014005791e2c8f3cba5d61fd277f4b13.jpg')center/cover no-repeat; box-shadow:0px 0px 30px #599CA7; padding:50px; border-radius: 5px; ; position: relative; font-size: initial;][comment]

// image //

[/comment][border="0; padding: 0; width: 100%; height: 250px; border-radius: 5px; background: url('https://i.pinimg.com/736x/45/71/ed/4571ed63ce3be94e30aa5892a5d0d534.jpg')center/cover no-repeat; position: relative;"][comment]

// bg box //

[/comment][border=0; display: flex; flex-flow: row wrap; justify-content: flex-end; right: 15px; bottom: 10px; margin-left: -7px; padding: 0; width: calc(100% - 15px); max-width: 175px; position: absolute;][/border][/border][comment]

// end of image + bg box + bg image // start of name plate //

[/comment][border=0; margin-top: 0px; padding: 0; width: 100%; height: 0px; background: #F70D1A; position: relative;][border="0; top: -10px; right: 0; font-size: 1.5em; line-height: 0; font-weight: 700; color: #FFFFFF; background: #F4A1B5; position: absolute;"][font=Indie Flower] Illesia Mondessa [/font][/border][comment]

// end of name plate // start of body text //

[/comment][/border][border="0; margin-top: 5px; padding: 0; font-size: 1.2em; line-height: 125%; color: #000000; text-align: justify; border=0px solid #F70D1A; box-sizing: border-box; margin: 20px auto; background-color:#F4A1B5; box-shadow:0px 0px 20px #599CA7; padding:15px; border-radius: 20px; position: relative;"][font=Patrick Hand SC][div=overflow: scroll; scrollbar-width: none; height:500px;][color=#599CA7]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/color]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[/div][/font][/border][/border]
 
just to check, i'm assuming you're making this request because the bbcode tabs do not sufficiently fulfil your current code purposes?
if that's the case, it'd be good to explain why too, and what you're looking for in place of it!
 
Uxie said:
just to check, i'm assuming you're making this request because the bbcode tabs do not sufficiently fulfil your current code purposes?
if that's the case, it'd be good to explain why too, and what you're looking for in place of it!
Click to expand...
I did try using the tabs, but I was not able to get them to really work well with the vision I had in mind.

I was trying to do something similar to this, but instead of the solid colors for the main page I was wanting to insert background images that I could change for each tab if that makes sense? I also cant seem to get the area used to switch between tabs in the right position.

Click Tabs

  • SURNAME:
    Doe

    GIVEN NAME:
    Jane

    GENDER:
    Female

    AGE:
    22

    BIRTHDATE:
    03/02/1999

    BIRTHPLACE:
    Unknown


    NOTE:
    Do not approach without bubble tea
Art by bobatae
Click Tabs
  • Illesia Mondessa
    Irvine Monte

    SURNAME:
    Doe

    GIVEN NAME:
    Jane

    GENDER:
    Female

    AGE:
    22

    BIRTHDATE:
    03/02/1999

    BIRTHPLACE:
    Unknown


    NOTE:
    Do not approach without bubble tea
Art by bobatae
Code: 
[comment][font=Concert One][font=Tauri]:D[/font][/font][/comment][border=transparent;
margin: auto;
max-width: 750px;
padding: 0px;][border=transparent;
position: relative;
padding: 0px 0px 8px 0px;
width: calc(4 * 60px + 5px);
font-family: 'Concert One', sans-serif;
text-align: center;
line-height: 80%;]Click Tabs
[fa]fas fa-sort-down[/fa][/border][/border][border=transparent;

/* Probably best if you don't change anything I haven't commented next to */

position: relative;
left: calc(0px - var(--left));
margin: auto;
margin-top: calc(0px - var(--tab-t));
margin-bottom: min(var(--folder-h-max), var(--folder-h));
max-width: 750px;
padding: 0px;
font-size: 1.05em; /* Label font size, increase or decrease by .01 increments */

--left: 10px;

--tab-t: -3px;
--tab-w: 190px;
--tab-h: 30px;
--tab-br: 10px; /* Border radius, increase for rounder corners, decrease for less */


--folder-t: calc(var(--tab-t) + var(--tab-h));
--folder-h: 400px;
--folder-h-max: 80vh;
--folder-p: 30px;
--folder-f-c: #362f1a; /* Text colour */

--symbol-t: 1px;
--symbol-l: calc(var(--tab-w) / 2.5);
--symbol-s: 22px;
--symbol-c: white; /* Tab symbol colour */

--label-w: 90px; /* Label width, change if the label gets too long and goes to the next line (or not) */
--label-f: 'Concert One', sans-serif; /* Label font, change font tag above code if you change this */

--field-m: 5px 0px 0px 8px;
--field-p: 6px 8px 4px 8px;
--field-br: 0px 10px 0px 0px;
--field-b: 0px solid rgba(40, 20, 0, 0.5);
--field-f: 'Tauri', sans-serif; /* Field font, change font tag above code if you change this */
--field-f-s: 0.8em; /* Field font size, increase or decrease by .1 increments, dependent on label font size */
--field-c: rgba(255, 255, 255, 0.2); /* Field background colour */

--image-m: 20px;
--image-w: 190px;
--image-h: 230px;
--image-b-1: 8px solid white;
--image-b-2: 22px solid white;
--image-s: 5px 5px rgba(0, 0, 0, 0.15);

/* Folder background gradients */
--c-1: linear-gradient(152deg, rgb(190, 217, 91) 50%, rgb(170, 197, 71) 50%);
--c-2: linear-gradient(152deg, rgb(242, 86, 127) 50%, rgb(222, 66, 107) 50%);
--c-3: linear-gradient(152deg, rgb(83, 181, 168) 50%, rgb(63, 161, 148) 50%);
--c-4: linear-gradient(152deg, rgb(242, 208, 109) 50%, rgb(222, 188, 89) 50%);

/* Image URLs, change percentage after slash if image is sized too big or small in frame (or just default to cover) */
--img-1: url('https://i.pinimg.com/564x/cd/59/13/cd591354799b13123880267dd01a34fc.jpg') 50% 0% / cover;
--img-2: url('https://i.pinimg.com/564x/20/61/12/206112aea38842875ac18cd20257c501.jpg') 50% 0% / 150%;
--img-3: url('https://i.pinimg.com/564x/18/1f/e5/181fe5c4987998c0b5ec6e3671ddf63b.jpg') 50% 0% / 130%;
--img-4: url('https://i.pinimg.com/564x/d7/54/9b/d7549b8db90da9f594fbbd588a807519.jpg') 50% 0% / cover;][comment]

-- Tab 1 --

[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: var(--left);
box-sizing: border-box;
width: calc(var(--tab-w) + (var(--left) / 2));
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-1);
pointer-events: none;][/border][comment]

-- Tab 2 --

[/comment][border=transparent;
position: absolute;
top: var(--tab-t);
left: calc(var(--tab-w) + (var(--left) / 2) + var(--left));
box-sizing: border-box;
width: var(--tab-w);
height: var(--tab-h);
padding: 0px;
border-radius: var(--tab-br) var(--tab-br) 0px 0px;
background: var(--c-2);
pointer-events: none;][/border][comment]

-- Actual Tabs --

[/comment][tabs]

[tab=.][comment]

-- Tab Symbols 1 --

[/comment][border=transparent;
position: absolute;
top: var(--symbol-t);
left: 30px;
padding: 0px;
color: var(--symbol-c);
font-size: var(--symbol-s);
line-height: 100%;
pointer-events: none;]Illesia Mondessa[/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: 240px;
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;]Irvine Monte[/border][comment]

-- Tab Body 1 --

[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: 0px;
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-1);
overflow: hidden;][comment]

-- Hidden Scroll --

[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: var(--folder-p) calc(30px + var(--folder-p)) var(--folder-p) var(--folder-p);
overflow: auto;][comment]

-- Image 1 --

[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-1);
box-shadow: var(--image-s);
float: right;
transform: rotate(10deg);][/border][comment]

-- Text --

[/comment]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]SURNAME:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Doe[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]GIVEN NAME:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Jane[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]GENDER:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Female[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]AGE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]22[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]BIRTHDATE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]03/02/1999[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]BIRTHPLACE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Unknown[/border]

[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]Do not approach without bubble tea[/border][/border][/border][/tab]


[tab=.][comment]

-- Tab Symbols 2 --

[/comment][border=transparent;
position: absolute;
top: calc(var(--symbol-t) + 4px);
left: calc(var(--symbol-l) + 10px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 8px);
line-height: 100%;
pointer-events: none;][fa]fas fa-info[/fa][/border][border=transparent;
position: absolute;
top: var(--symbol-t);
left: calc(3 * var(--symbol-l) + 7px);
padding: 0px;
color: var(--symbol-c);
font-size: calc(var(--symbol-s) - 3px);
line-height: 100%;
pointer-events: none;][fa]fas fa-unlock-alt[/fa][/border][comment]

-- Tab Body 2 --

[/comment][border=transparent;
position: absolute;
top: var(--folder-t);
left: var(--left);
box-sizing: border-box;
width: 100%;
height: var(--folder-h);
max-height: var(--folder-h-max);
padding: 0px;
border-radius: 0px calc(var(--tab-br) + 10px) 0px 0px;
color: var(--folder-f-c);
font-family: var(--label-f);
background: var(--c-2);
overflow: hidden;][comment]

-- Hidden Scroll --

[/comment][border=transparent;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: var(--folder-p) calc(30px + var(--folder-p)) var(--folder-p) var(--folder-p);
overflow: auto;][comment]

-- Image 2 --

[/comment][border=transparent;
margin: var(--image-m);
width: var(--image-w);
height: var(--image-h);
padding: 0px;
border: var(--image-b-1);
border-top: var(--image-b-2);
border-bottom: var(--image-b-2);
background: var(--img-2);
box-shadow: var(--image-s);
float: right;
transform: rotate(-10deg);][/border][comment]

-- Text --

[/comment]PERSONALITY:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Blah blah lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus.[/border]
BIOGRAPHY:
[border=transparent;
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
background: var(--field-c);]Blah blah average life dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus. Nunc lectus diam, dignissim sit amet pellentesque placerat, gravida vitae risus. Aliquam gravida commodo ex vitae lacinia. Donec et quam lectus. Sed ut convallis mauris, aliquet tristique tellus.[/border]
[border=transparent;
display: inline-block;
width: var(--label-w);
padding: 0px;]NOTE:[/border][border=transparent;
display: inline-block;
margin: var(--field-m);
padding: var(--field-p);
border-bottom: var(--field-b);
border-radius: var(--field-br);
font-family: var(--field-f);
font-size: var(--field-f-s);
line-height: 100%;
background: var(--field-c);]There is no concrete evidence of her accepted past[/border][/border][/border][/tab]


[/tabs][/border][border=transparent;
position: relative;
top: -35px;
margin: auto;
max-width: 750px;
padding: 0px;
font-family: 'Concert One', sans-serif;
font-size: 0.9em;
text-align: right;]Art by bobatae[/border]
 
Last edited:
Okay, I think I figured out a solution for this as something temporary. I am still trying to figure out how to make the tabs longer so I can fit my characters first and last name on them, but for now this works. I posted the template, but when I try to add the code it breaks it

  • Illesia
    Irvine

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Blah blah lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel velit et augue placerat suscipit. Aenean gravida lacus dui, euismod eleifend tellus maximus sed. Nulla ultricies tincidunt auctor. Mauris fringilla at dui sit amet dapibus. Duis consectetur eros eu nibh accumsan sagittis. Quisque sed mauris non purus eleifend pulvinar vitae ut arcu. Curabitur vitae porttitor mauris. Aliquam erat volutpat. Phasellus in leo augue. Fusce sed vehicula massa. Fusce erat neque, auctor laoreet efficitur sed, sodales a tellus.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 3 (members: 0, guests: 3)

Similar threads

Bill123456789
Help How do I make code for Japanese
Replies
2
Views
100
Uxie
Uxie
CHUUYAS_HAT
Help What images to add in BBCode
Replies
0
Views
29
CHUUYAS_HAT
CHUUYAS_HAT
Chitto
Help I wanna be cool too, okay? (Signature Question)
Replies
4
Views
297
Chitto
Chitto
Back
Top