showcased | info sheet: olivia.

information

I'm back!!! This info sheet code includes a scrolling sidebar, a frame for your character's portrait, and sections for character and player info, personality, background, first impressions, and permissions. It should work on mobile, but if it doesn't... well, I'm tired. 😭

I'd like to do a reskin of this at some point, probably with a different frame for the portrait. Maybe a darker color scheme and sharper look to go with this light, floral one!

The lovely portrait frame is by orchidart.

personalizing

Everything you need to find & replace is in [BRACKETS]. Just Ctrl+F [ or ]! The permissions sidebar has symbols for yes, no, maybe, and a hover code, so just delete the ones you don't want.

For the [PORTRAIT], replace it with a URL that links to a picture of your character. It should be at least 129x202. Images that are taller than they are wide are preferable, but landscape images do work; if the image does not show your character in the center, edit background-position:center center. You can change it to left center or right center depending on where your character is in the image. You can also use percentages, so if your character is about 75% of the way to the right of the image, replace it with background-position:75% center.

Color scheme: #89aca0 #eb948b #f9f9f9 #eee #181008

code

<lj-raw><center><div style="display:flex;width:85%;align:center;font-family:helvetica;border:solid 1px rgb(0,0,0,0.1);background:#f9f9f9;color:#181008;font-size:12px;">

<div style="position:sticky;align-self:flex-start;top:0.5em;text-align:center;padding:1em;width:auto;">

<div style="margin:0 auto;width:188px;height:250px;overflow:hidden;background:url(https://i.imgur.com/SKI5Zpe.png);">

<div style="-webkit-mask:url(https://i.imgur.com/o3mGxlB.png);mask:url(https://i.imgur.com/o3mGxlB.png);display:flex;justify-content:center;align-items:center;height:100%;">

<div style="background:#ddd url([PORTRAIT]);background-size:cover;background-position:center center;min-width:129px; min-height:202px;">

</div>
      </div>
    </div>

<div style="font-size:2.5em; font-weight:bold; font-style:italic; font-family:georgia; letter-spacing:0.1em; text-transform:lowercase; line-height:1; margin-bottom:0.5em; text-decoration:underline #89aca0;word-break: break-word;">[CHARNAME]</div>

<div style="text-align:left; font-size:0.9em; text-transform:lowercase; font-family:helvetica; margin-bottom:1em;">
      <b style="background-color:#eb948b; padding:0.4em;  font-family:georgia; font-style:italic; font-size:1em; letter-spacing:0.1em; color:#f9f9f9;">canon</b> [CANON]
    </div>

<div style="text-align:left; font-size:0.9em; text-transform:lowercase; font-family:helvetica; margin-bottom:1em;">
      <b style="background-color:#eb948b; padding:0.4em;  font-family:georgia; font-style:italic; font-size:1em; letter-spacing:0.1em; color:#f9f9f9;">home</b> [SETTING]
    </div>

<div style="font-size:2.5em; font-weight:bold; font-style:italic; font-family:georgia; letter-spacing:0.1em; text-transform:lowercase; line-height:1; margin:0.5em 0; text-decoration:underline #89aca0;">Player.</div>

</div>

<div style="padding:1em 2.5em;font-size:1em;background-color:#eee;width:100%;">

<! -PERSONALITY START -->

<div style="font-size:2.5em; font-weight:bold; font-style:italic; font-family:georgia; letter-spacing:0.1em; text-transform:lowercase; line-height:1; margin-top:0.8em; text-decoration:underline #89aca0;text-align:left;">Personality.</div>

<div style="text-align:justify;padding:1em;background:#f9f9f9;border:1px solid rgb(0,0,0,0.1);margin-top:0.8em;">

</lj-raw>[PERSONALITY]<lj-raw></div>

<div style="font-size:2.5em; font-weight:bold; font-style:italic; font-family:georgia; letter-spacing:0.1em; text-transform:lowercase; line-height:1; margin-top:0.8em; text-decoration:underline #89aca0;text-align:right;">background.</div>

<div style="text-align:justify;padding:1em;background:#f9f9f9;border:1px solid rgb(0,0,0,0.1);margin-top:0.8em;">

</lj-raw>[BACKGROUND]<lj-raw></div>

<div style="font-size:2.5em; font-weight:bold; font-style:italic; font-family:georgia; letter-spacing:0.1em; text-transform:lowercase; line-height:1; margin-top:0.8em; text-decoration:underline #89aca0;text-align:left;">impressions.</div>

<div style="margin-top:0.8em;display:flex;">
 <div style="width:80%; text-align: justify;background:#f9f9f9; border:1px solid rgba(0,0,0,0.1);padding: 1em;">

</lj-raw><b style="font-size:1.5em;font-style:italic;color:#eb948b;font-family:georgia;text-transform:lowercase;">visual.</b> [VISUAL]

<b style="font-size:1.5em;font-style:italic;color:#eb948b;font-family:georgia;text-transform:lowercase;">attire.</b> [ATTIRE]

<b style="font-size:1.5em;font-style:italic;color:#eb948b;font-family:georgia;text-transform:lowercase;">demeanor.</b> [DEMEANOR]

<b style="font-size:1.5em;font-style:italic;color:#eb948b;font-family:georgia;text-transform:lowercase;">aural.</b> [AURAL]

<b style="font-size:1.5em;font-style:italic;color:#eb948b;font-family:georgia;text-transform:lowercase;">olfactory.</b> [OLFACTORY]<lj-raw></div>

<div style="text-align: center;word-break:break-word;margin-left:2%;width:18%;">
    <div style="background-color:#f9f9f9;;width:100%;margin-bottom:0.8em;border: 1px solid rgb(0,0,0,0.1);">
      <div style="font-weight: bold; background-color:#eb948b; font-family: georgia; font-style: italic; font-size: 1em; letter-spacing: 0.1em; color: #f9f9f9;">height</div>
      [HEIGHT]
    </div>

<div style="background-color:#f9f9f9;;width:100%;margin-bottom:0.8em;border: 1px solid rgb(0,0,0,0.1);">
      <div style="font-weight: bold; background-color:#eb948b; font-family: georgia; font-style: italic; font-size: 1em; letter-spacing: 0.1em; color:#f9f9f9;">build</div>
      [BUILD]
    </div>

</div>
</div>

<div style="font-size:2.5em; font-weight:bold; font-style:italic; font-family:georgia; letter-spacing:0.1em; text-transform:lowercase; line-height:1; margin-top:0.8em; text-decoration:underline #89aca0;text-align:right;">permissions.</div>

<div style="margin-top:0.8em;display:flex;">

<div style="text-align: center;word-break:keep-all;margin-right:2%;width:18%;">
    <div style="background-color:#f9f9f9;;width:100%;margin-bottom:0.8em;border: 1px solid rgb(0,0,0,0.1);">
      <div style="font-weight: bold; background-color:#eb948b; font-family: georgia; font-style: italic; font-size: 1em; letter-spacing: 0.1em; color: #f9f9f9;">backtags</div>
      

<span style="color:limegreen;font-weight:bold;">✓</span>