AshenAngel
New Member
So this is the code for an old CS I had on another site and it works fine there. The way its supposed to work is you click the button to view the sheet and back to get to the image. It's driving me nuts trying to find where I'm going wrong here, as I've tried changing the accordions and tabs to follow this site's system and it broke further. So, let's just call this an Angel's SOS before I go too cross-eyed looking at this.
/* LOADING FONTS */
Header Font
[FONT=Port Lligat Sans[/FONT]
Code:
[div=
display: none;]
/* LOADING FONTS */
[FONT=IM Fell English SC]Header Font[/FONT]
[FONT=Port Lligat Sans[/FONT]
[/div][div=
/* ROOT START */
/* BACKGROUNDS */
--bg:url(BODY BACKGROUND URL HERE) 50% 50% / cover;
--body-bg: #E8ecfe;
/* ENTER 350 x 350 CHARACTER PORTRAIT */
--character-pic: url(CHARACTER IMAGE URL HERE);
--character-pic-size: 100%;
--character-pic-position: 50% 5%;
/* COLORS */
--main-color: #fff;
--accent-color: #bc0909;
--lighter-accent: #bc090948;
--h2-color: #6a1717;
--body-font-color: #000;
/* FONT FAMILIES */
--header-font: IM Fell English SC;
--subtitle-font: Port Lligat Sans;
--body-font: Port Lligat Sans;
/* FONT SIZES */
/* clamp(min, ideal, max) change min & max only for responsive font-sizes */
--header-size: clamp(50px, 5vw, 70px);
--subtitle-size: clamp(25px, 2vw, 35px);
--h2-size: 2rem;
--body-size: 1.3rem;
/* HEADER POSITIONING */
/* notes on alignment: flex-start (to position left) | center | flex-end (to position right) */
/* notes on h-offset: input 0 for none */
--name-h-offset: 10%;
--name-align: flex-start;
--role-h-offset: -10%;
--role-align: flex-end;
/* OTHER */
--button-border: 1px solid #ffffff90;
--mp3-font-color: #ffffff98;
/* ROOT END */][div=
/* TABS CONTAINER */
width: 444px;
margin: auto;
overflow: hidden;][div=
margin-top: -40px;][TABS=444x0]{slide=1}[div=
/* SLIDE OUTER CONTAINER */
overflow: hidden;
display: grid;][div=
/* SLIDE INNER CONTAINER */
grid-column-start: 1;
grid-row-start: 1;
width: 100%;
height: 640px;
margin: auto;
background: var(--bg);
border-radius: 30px;][div=
width: 100%;
margin: auto;
height: 640px;
background: var(--character-pic) var(--character-pic-position) / var(--character-pic-size);
background-blend-mode: multiply;
mask: radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 30%, rgba(0,0,0,0) 90%);][/div][/div][div=
grid-column-start: 1;
grid-row-start: 1;
display: flex;
align-items: center;
justify-content: var(--name-align);
translate: var(--name-h-offset) 17%;
font-family: var(--header-font);
font-size: var(--header-size);
color: var(--main-color);
text-transform: uppercase;
text-shadow: 1px 1px 1px #000;
text-align: var(--name-align);
/* ENTER FIRST NAME */]Noctus[/div][div=
grid-column-start: 1;
grid-row-start: 1;
display: flex;
align-items: center;
justify-content: var(--role-align);
translate: var(--role-h-offset) 25%;
font-family: var(--header-font);
font-size: var(--subtitle-size);
color: var(--accent-color);
text-transform: uppercase;
text-shadow: 1px 1px 1px #000;
text-align: var(--role-align);
/* ENTER POKEMON*/]Murkrow[/div][div=
/* BUTTON START */
grid-column-start: 1;
grid-row-start: 1;
display: flex;
align-items: flex-end;
justify-content: flex-end;
translate: -10% -5%;][div=
width: 140px;
display: flex;
background: var(--lighter-accent);][div=
width: 5%;
border-top: var(--button-border);
border-bottom: var(--button-border);
border-left: var(--button-border);
padding: 3%;][/div][div=
flex: 1;
padding: 5%;
font-family: var(--subtitle-font);
font-size: var(--body-size);
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;]{tab=2}[COLOR=#fff]Read more[/COLOR]{/tab}[/div][div=
width: 5%;
border-top: var(--button-border);
border-bottom: var(--button-border);
border-right: var(--button-border);
padding: 3%;
/* BUTTON END */][/div][/div][/div][/div]{/slide}{slide=2}[div=
/* SLIDE 2 OUTER CONTAINER */
overflow: hidden;][div=
/* SLIDE 2 INNER CONTAINER */
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
height: 640px;
margin: auto;
background: var(--bg);
border-radius: 30px;
padding: clamp(10px, 0.5vw, 20px);][div=
/* BUTTON START */
width: 80px;
display: flex;
background: var(--lighter-accent);][div=
width: 5%;
border-top: var(--button-border);
border-bottom: var(--button-border);
border-left: var(--button-border);
padding: 3%;][/div][div=
flex: 1;
padding: 5%;
font-family: var(--subtitle-font);
font-size: var(--body-size);
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;]{tab=1}[COLOR=#fff]Back[/COLOR]{/tab}[/div][div=
width: 5%;
border-top: var(--button-border);
border-bottom: var(--button-border);
border-right: var(--button-border);
padding: 3%;
/* BUTTON END */][/div][/div][div=
/* BODY START */
flex: 1;
background: var(--body-bg);
border-radius: 30px;
padding: 5% 4% 5% 1%;][div=
height: 100%;
overflow: hidden;][div=
width: 110%;
height: 500px;
overflow-y: scroll;
margin-left: 3.5%;
padding-right: 5%;
font-family: var(--body-font);
font-size: 1.6rem;
color: var(--body-font-color);
/* ENTER BODY CONTENT */][div=
/* BASIC INFO */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Info[/div][B]Name:[/B] Noctus Verne
[B]Nickname:[/B] Noct
[B]Pokemon:[/B] Murkrow
[B]Moves:[/B] Sucker Punch, Drill Peck, Assurance, Haze
[B]Age:[/B] 24
[div=
/* PERSONALITY */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Personality[/div]
[div=
/* BACKSTORY */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Backstory[/div]Noctus was a very timid child when he was young. His parents were in the process of a nasty divorce
[div=
/* ABILITIES */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Abilities & Limitations[/div]Noctus has a keen sense of when things will go awry, however it only tends to be correct at night.
He can see perfectly in the dark.
He is incapable of flight.
[div=
/* PHYSICAL CHAR */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Physical Characteristics[/div][B]Height:[/B] 5'7"
[B]Weight:[/B] 120lbs
[B]Eye Color:[/B] Red
Noct is slim and delicate, with pale skin.
[div=
/* OTHER */
font-family: var(--header-font);
font-size: var(--h2-size);
color: var(--h2-color);
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;]Other[/div]Kleptomaniac: Noct has a compulsion to steal shiny things.
[/div][/div][/div][div=
/* BODY END
MP3 PLAYER START */
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;
/* ENTER YOUTUBE ID (ALPHANUMERIC STRING IN URL) */][MEDIA=youtube]x9Mqu7loCHE[/MEDIA][/div][div=
height: 30px;
background: var(--lighter-accent);
border-radius: 30px;
display: flex;
gap: 5px;
top: -28px;
pointer-events: none;
color: var(--mp3-font-color);][div=
min-width: 50px;
font-size: 20px;
padding: 0 5px;][FA]fa-play-circle[/FA][/div][div=
display : flex;
align-items: center;
font-size: 12px;
/* ENTER SONG & ARTIST */]Phantylia the Undying (All Phases) | EPIC VERSION - Anthony Lo Re[/div][/div][/div][/div][/div]{/slide}[/TABS][/div][/div][/div]
/* LOADING FONTS */
Header Font
[FONT=Port Lligat Sans[/FONT]
[TABS=444x0]{slide=1}{/slide}{slide=2}
Nickname: Noct
Pokemon: Murkrow
Moves: Sucker Punch, Drill Peck, Assurance, Haze
Age: 24
He can see perfectly in the dark.
He is incapable of flight.
Weight: 120lbs
Eye Color: Red
Noct is slim and delicate, with pale skin.
{/slide}[/TABS]
Noctus
Murkrow
{tab=2}Read more{/tab}
{tab=1}Back{/tab}
Info
Name: Noctus VerneNickname: Noct
Pokemon: Murkrow
Moves: Sucker Punch, Drill Peck, Assurance, Haze
Age: 24
Personality
Backstory
Noctus was a very timid child when he was young. His parents were in the process of a nasty divorceAbilities & Limitations
Noctus has a keen sense of when things will go awry, however it only tends to be correct at night.He can see perfectly in the dark.
He is incapable of flight.
Physical Characteristics
Height: 5'7"Weight: 120lbs
Eye Color: Red
Noct is slim and delicate, with pale skin.
Other
Kleptomaniac: Noct has a compulsion to steal shiny things.Phantylia the Undying (All Phases) | EPIC VERSION - Anthony Lo Re