Help Post Template Help/Request

[Daddy Dream]

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.

Spoiler: Template 1

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.

Spoiler: Template 1 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]

Spoiler: Template 2

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.

Spoiler: Template 2 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]

 

[Uxie]

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!

 

[Daddy Dream]

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!

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.

Spoiler: Inspiration

Click Tabs

• .
• .
• .
• .

• 
  

  SURNAME:

  Doe

  
  

  GIVEN NAME:

  Jane

  
  

  GENDER:

  Female

  
  

  AGE:

  22

  
  

  BIRTHDATE:

  03/02/1999

  
  

  BIRTHPLACE:

  Unknown

  
  
  

  NOTE:

  Do not approach without bubble tea
• PERSONALITY:
  

  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.

  
  BIOGRAPHY:
  

  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.

  
  

  NOTE:

  There is no concrete evidence of her accepted past
• 
  

  PARENTS:

  John Doe, Jessica Doe

  
  

  SIBLINGS:

  Joe Doe

  
  

  PARTNER:

  N/A

  
  

  FRIENDS:

  Lulu Ly, Carell Kirishima

  
  
  

  NOTE:

  Her friends are strangely tight-lipped about her
• LIKES:
  

  This, that, do be polite

  
  DISLIKES:
  

  This, that, don't be dumb

  
  HOBBIES:
  

  Blah blah, tennis, roller skating

  
  

  NOTE:

  Money seems to be her greatest motivator

Art by bobatae

Spoiler: My Recreation

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
• PERSONALITY:
  

  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.

  
  BIOGRAPHY:
  

  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.

  
  

  NOTE:

  There is no concrete evidence of her accepted past

Art by bobatae

Spoiler: My Recreation 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]

 

[Daddy Dream]

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

Spoiler: Double Tabbed Post

• .
• .

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