Resource Ami's Lab 2.0 | Mobile Friendly Freebies

[Ambiloquous]

hi hi ! i adapted your dnd cytus character sheet for a kingdom hearts roleplay over here if you'd like to see
i absolutely adore this sheet sooo so much that i wanted to figure out a way for it to work for my dice-light kh rp ;v; thank you so much for your hard work!

That looks amazing! I love the little icon additions hrlskjsldk Thank you for sharing your designs! (And going through the effort of using that code, bc I know it's not the most well-written :'))

 

[pookie]

That looks amazing! I love the little icon additions hrlskjsldk Thank you for sharing your designs! (And going through the effort of using that code, bc I know it's not the most well-written :'))

oh thank you !! i'm so glad you like it ;v;
and of course! thank you for making it! and omg, you're totally good
it was a little different to what i'm used to seeing in codes but
my skills stop at editing i can't write it for myself, and it was easy enough to parse through for those purposes! you do a really good job of labeling the different sections :3 i still think it's phenomenal <3

 

[Hyena]

Character Cards

Card(?) accordion.

I finished this a while back but got lazy because I didn't want to comment and so only posted now. I didn't implement any scroll feature so you have to be careful with how much text you use.

Originally, I created this with those GMs who like to put little character summaries at the top of CS threads in mind, but now I realize that there probably aren't that many of those, and this'll likely be used as a placeholder if at all.

Wrap code in [center] tag to center, and wrap it around multiple without hitting newline to center a group (like the multi-card example spoiler).

Accordion

No Scroll

Click Below

Troubadour of Yonai

Koki Najin-Oe

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Artist — GUWEIZ

Spoiler: Code

[comment]Fonts -->[font=Sarala][font=Kolker Brush]:S[/font][/font][/comment][border=0;

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

margin-right: 5px;
display: inline-block;
box-sizing: border-box;
padding: 0;
overflow: hidden;

--h: 250px; /* Height and width for background */
--w: calc(var(--h) + var(--gap)); 
--gap: 12px; /* Subtitle overflow, i.e., the amount the subtitle sticks past the background */

/* Background Variables */
--g-c: rgba(0, 0, 0, 0.5); /* Gradient base colour */
/* Image: first two percentages are x% y% position / last percentage is image size */
--img: url('https://i.pinimg.com/originals/80/cc/de/80ccdedb60dfd52638f80e6ff96bcc81.jpg') 50% 20% / 200%; 

/* Icon Variables */
--i-c: #f56423; /* Colour */
--i-s: 3em; /* Size (can be decimal) */
--i-o: 0.8; /* Opacity, between 0 and 1 */

/* Title Variables */
--t-c: #fbfdf5; /* Text colour */
--t-f-s: 4.9em; /* Font size (can be decimal) */
--t-f: 'Kolker Brush', cursive; /* Font family (change font tag above if you change this) */
--t-l-h: 1; /* Line height, change to change spacing above + below title */

/* Subtitle Variables */
--s-p: 2px 5px; /* Padding: top-bottom left-right */
--s-b-r: 3px; /* Border radius */
--s-bg: #f56423; /* Background colour */

/* Subtitle Text Variables */
--s-c: #340d22; /* Text colour */
--s-f-s: 1.2em; /* Font size (can be decimal) */
--s-f: 'Sarala', sans-serif; /* Font family (change font tag above if you change this) */

/* Body Variables */
--b-c: #eef0e9; /* Text colour */
--b-f-s: 1.1em; /* Font size (can be decimal) */
][comment]

-- Note --[/comment][border=0;
padding: 0;
font-size: 0.8em;
font-family: var(--s-f);
opacity: 0.8;]Click Below[/border][comment]

-- Main Container --[/comment][border=0;
visibility: hidden;
position: relative;
box-sizing: border-box;
max-width: var(--w);
height: var(--h);
display: flex;
flex-flow: row nowrap;
align-items: center;
padding: 0;
overflow: hidden;][comment]

-- Image --[/comment][border=0;
visibility: visible;
position: absolute;
top: 0;
left: 0;
padding: 0;
width: calc(100% - var(--gap));
height: var(--h);
background: var(--img);][/border][accordion=100%]

{slide=[comment]

-- Content Container --[/comment][border=0;
margin: 0 -7px;
box-sizing: border-box;
width: var(--w);
height: calc(var(--h) * 3);
padding: 0;
font-variant: normal;
font-weight: normal;][comment]

-- First Page --[/comment][border=0;
visibility: visible;
position: relative;
top: calc(var(--h) + 1px);
left: 0;
width: 100%;
height: var(--h);
background: linear-gradient(rgba(0, 0, 0, 0) 70%, var(--g-c));
background-size: calc(100% - var(--gap)) 100%;
background-repeat: no-repeat;
padding: 0;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: flex-end;][comment]

-- Icon --[/comment][border=0;
position: absolute;
top: 8px;
left: 12px;
padding: 0;
color: var(--i-c);
font-size: var(--i-s);
opacity: var(--i-o);][fa]fas fa-feather[/fa][/border][comment]

-- Subtitle --[/comment][border=0;
box-sizing: border-box;
padding: var(--s-p);
border-radius: var(--s-b-r);
background: var(--s-bg);
color: var(--s-c);
font-size: var(--s-f-s);
font-family: var(--s-f);]Troubadour of Yonai[/border][comment]

-- Title --[/comment][border=0;
box-sizing: border-box;
width: 100%;
padding: 0 calc(var(--gap) + 10px) 5px 10px;
color: var(--t-c);
font-size: var(--t-f-s);
font-family: var(--t-f);
line-height: var(--t-l-h);
text-align: end;]Koki Najin-Oe[/border][/border][comment]

-- Second Page --[/comment][border=0;
visibility: visible;
position: relative;
top: var(--h);
left: 0;
width: 100%;
height: var(--h);
padding: 0;][comment]

-- Text Container --[/comment][border=0;
margin: 0 15px;
box-sizing: border-box;
width: calc(100% - var(--gap) - 30px);
height: var(--h);
padding: 15px 10px;
background: linear-gradient(rgba(0, 0, 0, 0) 2%, var(--g-c) 15% 85%, rgba(0, 0, 0, 0) 98%);
color: var(--b-c);
font-size: var(--b-f-s);
font-family: var(--s-f);
display: flex;
flex-flow: row nowrap;
align-items: center;]Lorem ipsum dolor sit amet, consectetur adipiscing 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.[/border][/border][/border]}[comment]

-- Placeholder --[/comment][border=0;
margin: -6px 0;
padding: 0;
height: calc(var(--h) * 2);][/border]{/slide}

[/accordion][/border][comment]

-- Note --[/comment][border=0;
padding: 0;
font-size: 0.8em;
font-family: var(--s-f);
opacity: 0.8;]Artist — GUWEIZ[/border][/border]

Spoiler: Multiple Card Example

Click Below

Troubadour of Yonai

Koki Najin-Oe

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Artist — GUWEIZ

Click Below

Archmagus of Revas

Lynis of Hallow

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Artist — Astri Lohne

Click Below

Clockmaker of the Tower

Vicis Tempus

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Artist — gyxycn

This is so stylish for character blurbs. I'm sure to find myself using this code for my characters later.

 

[Ambiloquous]

This is so stylish for character blurbs. I'm sure to find myself using this code for my characters later.

Thank you sm!

 

[RascalRoadkill]

Wow, these are so cool! I haven't been on a forum that uses BBCode extensively in a really long time (like, years) and this stuff has gotten so advanced now! Great stuff, I especially like the computer error message one!

 

[Ambiloquous]

Wow, these are so cool! I haven't been on a forum that uses BBCode extensively in a really long time (like, years) and this stuff has gotten so advanced now! Great stuff, I especially like the computer error message one!

Thanks so much! Ah, yes, the one I made aggressively after I spent like 8 hours trying to log into my work laptop, after hearing that a previous guy took two weeks to get on his.