Skin for Recreating Persona 4’s SL Rank Up Display

by SpookyTesting (FierySprites)

Summary:

A work skin for recreating the Social Link Rank Up display from Persona 3 Portable and Persona 4 Golden.

Notes:

EDIT 9/25/2023: Cleaned up the code using inheritance and child combinators.
EDIT 4/23/2024: Replaced the font-stretch with a scaleX transformation.

---

Rank 2
Fool • S.E.E.S.

---

Rank 3
Magician • Junpei Iori

---

Rank 8
Judgement • Seekers of Truth

---

Rank 5
Councillor • Takuto Maruki

---

Max Rank
Aeon • Marie

---

Example HTML Code (Regular)

<div class="sl-status p4-status">
  <p align="center">
    <span">
      <b>
        Rank <span>5</span>
      </b>
      <span class="full" />
      <span class="full" />
      <span class="full" />
      <span class="full" />
      <span class="full" />
      <span/>
      <span/>
      <span/>
      <span/>
      <span/>
    </span>

    <br />
    <span>
      <span class="arcana">Justice</span>
      <span class="name">
        <span>•</span>
        Nanako Dojima
      </span>
    </span>

  </p>
</div>

Example HTML Code (Maxed Out)

<div class="sl-status max-status">
  <p align="center">
    <span>
      <b>
        <span>Max</span> <span class="hide">Rank</span>
      </b>
      <span class="full" />
      <span class="full" />
      <span class="full" />
      <span class="full" />
      <span class="full" />
      <span class="full" />
      <span class="full" />
      <span class="full" />
      <span class="full" />
      <span class="full" />
    </span>

    <br />
    <span class="label">
      <span class="arcana">Aeon</span>
      <span class="name">
        <span>•</span>
        Marie
      </span>
    </span>

  </p>
</div>

---

CSS Code

/* Social Link Rank Up - Top */

#workskin .sl-status {
  background-color: #FC9D00;
  border-top: 4px solid #FFF96E;
  border-bottom: 4px solid #FFF96E;
  color: white;
  display: grid;
  font-size: 18px;
  font-weight: bold;
  margin: 40px auto 55px;
  overflow-x: clip;
  height: 16px;
  max-width: 100%;
}

#workskin .sl-status br {
  display: none;
}

#workskin .sl-status p > span:first-of-type {
  display: block;
  font-family: "Broadway", "Gill Sans", "Britannic";
  margin: 0 auto;
  text-align: center;
  width: 330px;
  position: relative;
  bottom: 61.5px;
}

#workskin .sl-status b {
  padding-right: 5px;
}

#workskin .sl-status b > span {
  background-color: #FC9D00;
  -webkit-background-clip: text;
  -webkit-text-stroke: 5px transparent;
  font-size: 48px;
  padding: 5px;
  position: relative;
  top: 1px;
}

#workskin .sl-status p > span:first-of-type > span {
  background-color: #ba5c04;
  border-radius: 5px;
  display: inline-block;
  margin-right: -2px;
  position: relative;
  bottom: 1px;
  height: 10px;
  width: 20px;
}

#workskin .sl-status .full {
  background-color: white !important;
}

#workskin .sl-status .empty {
  background-color: rgba(0, 0, 0, 0.0) !important;
}

/* Social Link Rank Up - Bottom */

#workskin .sl-status p > span:last-of-type {
  background: rgba(0, 0, 0, 0.7);
  display: block;
  font-family: "Bahnschrift", "Franklin Gothic", "Tahoma", "Helvetica";
  font-size: 16px;
  font-weight: lighter;
  /* padding-left: 6px; */
  text-align: left;
  position: relative;
  bottom: 75px;
  height: 26px;
  width: 335px;
}

#workskin .sl-status p > span:last-of-type::before,
#workskin .sl-status p > span:last-of-type::after {
  content: '';
  background: rgba(0, 0, 0, 0.7);
  display: inline-block;
  position: absolute;
  height: 26px;
  width: 100%;
}

#workskin .sl-status p > span:last-of-type::before {
  right: 335px;
}

#workskin .sl-status p > span:last-of-type::after {
  left: 335px;
}

#workskin .sl-status .arcana {
  display: inline-block;
  font-family: "Franklin Gothic", "Helvetica", "Trebuchet MS";
  font-weight: bold;
  text-align: center;
  transform: scaleX(0.8);
  position: relative;
  top: 1px;
  width: 100px;
}

#workskin .sl-status .name {
  display: inline-block;
  position: relative;
  top: 1px;
  right: 12px;
}

#workskin .sl-status .name > span {
  color: #948f88;
  font-family: "Franklin Gothic", "Helvetica", "Trebuchet MS";
  /* margin-left: 1.5px; */
  margin-right: 3px;
}

/* Miscellaneous */

#workskin .hide {
  display: none;
}

---

All Color Variants

/* Persona 3 Portable (MC) SL */

#workskin .p3-status {
  background-color: #3f79ff;
  border-top: 4px solid #9afdfc;
  border-bottom: 4px solid #9afdfc;
}

#workskin .p3-status b > span {
  background-color: #3f79ff !important;
}

#workskin .p3-status p > span:first-of-type > span {
  background-color: #275496;
}

/* Persona 3 Portable (FeMC) SL */

#workskin .p3p-status {
  background-color: #ff5881;
  border-top: 4px solid #ffd7ff;
  border-bottom: 4px solid #ffd7ff;
}

#workskin .p3p-status b > span {
  background-color: #ff5881 !important;
}

#workskin .p3p-status p > span:first-of-type > span {
  background-color: #be2241;
}

/* Persona 4 SL */

#workskin .p4-status {
  background-color: #FC9D00;
  border-top: 4px solid #FFF96E;
  border-bottom: 4px solid #FFF96E;
}

#workskin .p4-status b > span {
  background-color: #FC9D00 !important;
}

#workskin .p4-status p > span:first-of-type > span {
  background-color: #ba5c04;
}

/* Persona 5 SL */

#workskin .p5-status {
  background-color: #ff0000;
  border-top: 4px solid #ffb4b4;
  border-bottom: 4px solid #ffb4b4;
}

#workskin .p5-status b > span {
  background-color: #ff0000 !important;
}

#workskin .p5-status p > span:first-of-type > span {
  background-color: #aa0000;
}

/* Max Rank SL */

#workskin .max-status {
  background-color: #616161;
  border-top: 4px solid white;
  border-bottom: 4px solid white;
}

#workskin .max-status p > span:first-of-type {
  bottom: 48px;
  left: 1.5px;
}

#workskin .max-status b > span {
  background-color: white;
  -webkit-background-clip: text;
  -webkit-text-stroke: 5px transparent;
  color: #616161;
  font-size: 36px;
  padding: 5px;
  position: relative;
  top: 2px;
  right: 5px;
}

#workskin .max-status p > span:last-of-type {
  bottom: 57px;
}

Notes:

I got Persona 4 Golden a month ago during Spring Break, and I’ve been having an absolute blast with it. Sure, I overleveled to high heavens and the game became pretty easy past the third major dungeon, but that doesn’t change how good it feels to finally experience the best version of Persona 4 off Steam. (I’ve never been much of a PC player; I basically only play Sonic games on it.)

Since I’ve been on a bit of a Persona fic binge as a result, I decided to go do something cool: recreating Persona 4’s SL Rank Up display using the power of CSS! It actually took a bit to figure out: I wanted the lower half to be centered and have its text custom-aligned at the same time, which stumped me for a couple hours until I set the whole thing to display as a grid. A bit out of the norm, but now it looks fine on both desktop and mobile!

There’s no way in hell I’m going to be able to recreate Persona 5’s art style with my puny CSS skills, so I included a color scheme based on it instead. To use it and the rest of the variants, simply replace the default ‘p4-status’ with the relevant class (‘p3p-status’, ‘p5-status’, etc.). You can also make your own color scheme, if you so wish.

Hope you guys get some good use out of this. There’s a lot of full-game retellings out there, and it’d definitely be a nice touch to see this as I read through the SLs.