Help RESOLVED! How do I use the layout from a code's tab?

[bastion]

Clarification: I just want the layout for the content in the relationships tab (tab 3.) I don't want the bar on top (the tab title section) or the bar to the left (the tabs selection area). I don't need the border and background for the content area either if it would be easier to not include it.

So I really want to use the layout from the relationship tab in this code for sharing characters: Resource - Ami's Lab 2.0 | Mobile Friendly Freebies

I've tried just cutting out the content section of the code, but it breaks horribly. It's also broken when I tried trimming out the other tabs + tab related coding. I literally have no idea what to do at this point, but it's the ideal layout for sharing my characters in PMs for the thing I have in mind (where I just need a little hook for each of the cast for my partner to know about.)

Admittedly I could just not use a code at all, but my brain demands it.

 

[Steve Jobs]

I'm a bit confused on what you are looking for. Do you want only the content within the relationships tab (separate from the layout) or do you want the general layout with all the other tabs excluded?

 

[bastion]

I'm a bit confused on what you are looking for. Do you want only the content within the relationships tab (separate from the layout) or do you want the general layout with all the other tabs excluded?

I want only the content of the relationship tab, I think?

I don't want the bar at the top (where the key icon is and it has a title) or on the left side (where the tabs are).

 

[Uxie]

hey!! i'd recommend reaching out to ami to ask if they'd be alright with you taking out part of the code, just in case they aren't comfortable with it! they'll probably also be able to offer you the most help with it if they don't reply, though, i'd be happy to quickly do up a similar layout for you to use if you need!!

 

[bastion]

hey!! i'd recommend reaching out to ami to ask if they'd be alright with you taking out part of the code, just in case they aren't comfortable with it! they'll probably also be able to offer you the most help with it if they don't reply, though, i'd be happy to quickly do up a similar layout for you to use if you need!!

Oh, that makes sense! I didn't even think to ask since I'd just be using it in PMs and didn't want to bother them specifically for code help

 

[bastion]

Uxie Amie has confirmed it's okay to use only a part of the code! Thanks again for reminding me to check!

 

[Ambiloquous]

Hekdjdklb I didn’t even notice this thread! I’m out right now but I can help you with it when I’m back, if you don’t mind waiting.

 

[bastion]

Hekdjdklb I didn’t even notice this thread! I’m out right now but I can help you with it when I’m back, if you don’t mind waiting.

That would be greatly appreciated! Thank you so much!

 

[Ambiloquous]

Did you mean something like this? Or did you want it without the scroll?

I don't know exactly what code you tried cutting out, but some reasons for why your code might break off the top of my head is:

1. Variables. The first border tag wrapping everything holds all the variables that might be used in the code. If you don't have it, things will break because the values for certain properties will reference variables that don't exist anymore.
2. The position property. There's a lot of absolute positioning flying around due to the nature of tabs and how to code over it, so if there's no parent tag with a position: relative; to "hold" them in place, things will start looking pretty funky.
3. Forgetting closing tags. This is pretty self-explanatory, but it's very easy to delete closing tags since they're basically all [/border] in this code.

Hopefully those tips will help on your future coding endeavours!

Spoiler: Actual Preview

ONE WHO GUARDS THE NIGHT

ALIAS

Nightingale

ROLE

Shield

RELATIONSHIP

Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.

ARTIST

Eliot Baum

ONE WHO PONDERS THE DUSK

ALIAS

Sundown

ROLE

Core

RELATIONSHIP

Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.

ARTIST

Eliot Baum

ONE WHO WALKS AMONG CLOUDS

ALIAS

Nimbus

ROLE

Step

RELATIONSHIP

Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.

ARTIST

Eliot Baum

[comment]-- Fonts --> [font=Macondo][font=Heebo]:>[/font][/font][/comment][border=0;

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

margin: auto;
max-width: 950px; /* Maximum width, change to resize width */
padding: 0;

--h: clamp(380px, 90vh, 900px);

/* Colours */
--base: #4A6491; /* #3f98c9 */
--outline: #D0E4F2;
--accent: #30395C; /* #12619D */
--accent-2: #85A5CC; /* #89C2E1 */

/* Images -- image URL in url(''), percentages are x-value y-value image positioning */
/* Tab 3 Images */
--img-2: url('https://pbs.twimg.com/media/ErkL6MHW8AIheQn?format=jpg&name=large') 50% 25% / cover;
--img-3: url('https://pbs.twimg.com/media/ErkL6NNXAAExA29?format=jpg&name=large') 50% 70% / cover;
--img-4: url('https://images.squarespace-cdn.com/content/v1/5f15cec690ad1413ae255f7e/1601332574045-P8HM3NEM3W08PP9TTG5A/image-asset.png?format=1500w') 50% 30% / cover;

/* Border Properties */
--b-r: 8px; /* Border radius -- a greater number makes it rounder and vice versa */
--b-w: 8px; /* Border width */
--bg-w: (var(--icon-s) + (2 * var(--b-w)));

--tabs-h: 250px;
--tab-f-s: 25px;

/* Icon Properties */
--icon-s: 90px; /* Background box size -- changing it might mess up code */
--icon-f-s: 55px; /* Icon size */

--bar-w: 72px;

/* Title Properties */
--title-f-s: 2em; /* Font size -- change by .1 increments, increasing size might mess it up on smaller screens */
--title-f: 'Macondo', sans-serif; /* Font family -- change font tag above if you change this */
--title-p: max(10px, 5%);

/* Gradient Opacity */
--grad-o: 50%;

/* Content Properties */
--con-p: clamp(10px, 2%, 20px); /* Padding */
--con-c: azure; /* Text colour */
--con-f-s: 1.05em; /* Font size -- change by .1 increments */
--con-f: 'Heebo', sans-serif; /* Font family -- change font tag above if you change this */

/* Divider Height */
--div-h: 2px;

/* Header Properties */
--head-f-s: 1.3em; /* Font size -- change by .1 increments */
--head-p: 6px;
][comment]

------------ Tab 3 Body ------------

[/comment][border=0;
position: relative;
width: 100%;
height: var(--h);
box-sizing: border-box;
padding: 0;
pointer-events: none;][comment]

-- Content Box --[/comment][border=0;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
border-radius: var(--b-r);
background: var(--base);
padding: 0;
color: var(--con-c);
font-size: var(--con-f-s);
font-family: var(--con-f);
line-height: 1.5;
overflow: hidden;
pointer-events: auto;][comment]-- Hidden Scroll --[/comment][border=0;
box-sizing: border-box;
width: calc(100% + 30px);
height: 100%;
padding: 0;
overflow: auto;][comment]

-- Image + Header + Text 1 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-2);
padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%);
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO GUARDS THE NIGHT[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) 0 0 var(--con-p);
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Nightingale [fa]fa-solid fa-crow[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Shield
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border]
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment]
-- Image + Header + Text 1 End --[/comment][comment]

-- Header + Text + Image 2 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap-reverse;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-left-radius: var(--b-r);
border-bottom-left-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent) -80%, rgba(0, 0, 0, 0), var(--accent));
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO PONDERS THE DUSK[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) var(--con-p) 0 0;
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Sundown [fa]fa-solid fa-sun-haze[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Core
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border]
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][comment]-- Header + Text End --[/comment][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-3);
padding: 0;][/border][/border][/border][comment]
-- Header + Text + Image 2 End --[/comment][comment]

-- Image + Header + Text 3 --[/comment][border=0;
box-sizing: border-box;
width: calc(100% - 30px);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
padding: var(--con-p);][comment]-- Image --[/comment][border=0;
box-sizing: border-box;
flex: 1 1 160px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
max-width: 240px;
min-height: 180px;
border-radius: var(--b-r);
background: var(--outline);
padding: 0;][border=0;
box-sizing: border-box;
width: calc(100% - (2 * var(--b-w)));
height: calc(100% - (2 * var(--b-w)));
border-radius: var(--b-r);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--accent)), var(--img-4);
padding: 0;][/border][/border][comment]-- Header + Text --[/comment][border=0;
box-sizing: border-box;
flex: 3 1 320px;
padding: 0;][comment]-- Header --[/comment][border=0;
position: relative;
margin-top: var(--b-w);
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
border-top-right-radius: var(--b-r);
border-bottom-right-radius: var(--b-r);
background: var(--accent-2);
padding: var(--head-p) var(--title-p);
overflow: hidden;][comment]-- Header Gradient --[/comment][border=0;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
opacity: var(--grad-o);
box-sizing: border-box;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(0, 0, 0, 0), var(--accent) 180%);
padding: 0;
z-index: 1;][/border][comment]-- Header Text --[/comment][border=0;
padding: 0;
color: var(--outline);
font-size: var(--head-f-s);
font-family: var(--title-f);
z-index: 2;]ONE WHO WALKS AMONG CLOUDS[/border][/border][comment]-- Text --[/comment][border=0;
box-sizing: border-box;
margin: var(--con-p) 0 0 var(--con-p);
padding: 0;][comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ALIAS[/border] Nimbus [fa]fa-solid fa-cloud[/fa]
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ROLE[/border] Step
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]RELATIONSHIP[/border]
Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus. Pretium viverra suspendisse potenti nullam ac. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Ipsum suspendisse ultrices gravida dictum fusce ut.
[comment]-- Label --[/comment][border=0;
margin-bottom: 4px;
display: inline-block;
padding: 0 6px;
border-radius: calc(var(--b-r) / 1.5);
background: var(--accent);]ARTIST[/border] Eliot Baum[/border][/border][/border][comment]
-- Image + Header + Text 3 End --[/comment][/border][/border][comment]
-- Content Box End --[/comment][/border][/border]

 

[bastion]

Did you mean something like this? Or did you want it without the scroll?

I don't know exactly what code you tried cutting out, but some reasons for why your code might break off the top of my head is:

1. Variables. The first border tag wrapping everything holds all the variables that might be used in the code. If you don't have it, things will break because the values for certain properties will reference variables that don't exist anymore.
2. The position property. There's a lot of absolute positioning flying around due to the nature of tabs and how to code over it, so if there's no parent tag with a position: relative; to "hold" them in place, things will start looking pretty funky.
3. Forgetting closing tags. This is pretty self-explanatory, but it's very easy to delete closing tags since they're basically all [/border] in this code.

Hopefully those tips will help on your future coding endeavours!

Yes, that's exactly what I was hoping for! Thank you so much!

I tried making sure I kept all the closing borders and such when I edited it, but I'm very much uneducated when it comes to coding (my knowledge is literally what I learn by using freebie codes) so I have trouble knowing for sure if I ended up removing one or leaving an extra one or something else entirely.

Thank you so much one again!