Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Additional Tags:
Language:
English
Stats:
Published:
2025-01-09
Words:
911
Chapters:
1/1
Comments:
3
Kudos:
26
Bookmarks:
8
Hits:
518

Skin for Recreating Persona 3 Reload’s Text Boxes

Summary:

A work skin for recreating the text boxes and dialog selection process from Persona 3 Reload, with a bonus color scheme based on Persona 3 Portable’s FeMC.

Notes:

EDIT 10/26/2025: Reorganized and renamed some elements of the code.
EDIT 6/9/2026: Added a primer for CYOA-style link functionality.

(See the end of the work for more notes.)

Work Text:

Junpei Iori: We kicked ass on that one, didn’t we?

[ We sure did. ]
[ It was no big deal. ]
[ You acted like a weirdo. ]

Example HTML Code 

<div class="p3r-box">
  <p>
    <b><u>Junpei Iori</u><span class="hide">:</span></b>
    <span class="text">
      We kicked ass on that one, didn’t we?
    </span>
  </p>
</div>

<div class="p3r-select">
  <p align="center">
    <span>
      <span>[</span>
      <span class="text">We sure did.</span>
      <span>]</span>
    </span>

    <br />
    <span>
      <span>[</span>
      <span class="text">It was no big deal.</span>
      <span>]</span>
    </span>

    <br />
    <span>
      <span>[</span>
      <span class="text">You acted like a weirdo.</span>
      <span>]</span>
    </span>
  </p>
</div>

CSS Code 

/* P3R Text Box */

#workskin .p3r-box,
#workskin .p3r-box p {
  color: white;
  display: block;
  position: relative;
  min-height: 110px;
}

#workskin .p3r-box {
  margin: 30px auto 40px;
  width: 600px;
  max-width: 88%;
}

#workskin .p3r-box::after {
  content: '';
  background: linear-gradient(#336cff80, #336cff80), linear-gradient(#336cff80, #336cff80);
  border-radius: 20px;
  display: inline-block;
  transform: rotate(-3deg);
  position: absolute;
  top: 0;
  left: 10px;
  height: 102%;
  width: 100%;
  z-index: 0;
}

#workskin .p3r-box p {
  background: linear-gradient(to right, #171C39, #1D2B74 30%, #171C39 90%);
  border-radius: 20px;
  display: flex;
  z-index: 1;
}

#workskin .p3r-box p::before,
#workskin .p3r-box p::after {
  content: '';
  border-style: solid;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  height: 0;
  width: 0;
}

#workskin .p3r-box p::before {
  border-color: white transparent transparent transparent;
  border-width: 15px 15px 0 15px;
  bottom: 6px;
  right: 6px;
}

#workskin .p3r-box p::after {
  border-color: #2F26FF transparent transparent transparent;
  border-width: 11px 11px 0 11px;
  bottom: 10.25px;
  right: 10px;
}

/* P3R Text Box - Name Tag */

#workskin .p3r-box .name {
  color: #2BE4FB;
  display: block;
  font-size: 14px;
  padding-top: 5px;
  padding-left: 26px;
  position: absolute;
  z-index: 1;
}

#workskin .p3r-box .name::after {
  content: 'Talk';
  font-size: 7px;
  letter-spacing: 6px;
  text-transform: uppercase;
  transform: scaleY(0.8);
  position: absolute;
  bottom: -8px;
  left: 28.5px;
}

#workskin .p3r-box .name::before {
  content: '';
  border-color: #1700FF transparent transparent transparent;
  border-style: solid;
  border-width: 45px 35px 0 80px;
  display: inline-block;
  transform: rotate(350deg);
  position: absolute;
  top: 5px;
  left: -20px;
  height: 0px;
  width: 0px;
  z-index: -1;
}

#workskin .p3r-box::before {
  content: '';
  border-color: #171C39 transparent transparent transparent;
  border-style: solid;
  border-width: 45px 35px 0 80px;
  display: inline-block;
  transform: rotate(350deg);
  position: absolute;
  top: 12px;
  left: -12px;
  height: 0px;
  width: 0px;
  z-index: 0;
}

#workskin .p3r-box p > b > u {
  text-decoration: none;
}

#workskin .p3r-box p > b > span {
  display: none;
}

/* P3R Text Box - Text */

#workskin .p3r-box .text {
  display: block;
  margin: auto;
  padding: 35px 5px 15px 0;
  position: relative;
  width: 435px;
  max-width: 75%;
  z-index: 1;
}

/* P3R Dialog Select */

#workskin .p3r-select {
  color: white;
  display: block;
  font-style: italic;
  margin: 30px auto;
  position: relative;
  left: 5px;
  width: fit-content;
  max-width: 75%;
}

#workskin .p3r-select br {
  display: none;
}

#workskin .p3r-select::after {
  content: '';
  background: linear-gradient(#336cff80, #336cff80), linear-gradient(#336cff80, #336cff80);
  border-radius: 20px;
  display: inline-block;
  transform: rotate(3deg);
  position: absolute;
  top: 0;
  left: -10px;
  height: 100%;
  width: 100%;
  z-index: 0;
}

#workskin .p3r-select p {
  background: linear-gradient(to right, #171C39, #1D2B74, #171C39);
  border: 3px solid #2C3091;
  border-radius: 20px;
  padding: 20px 25px;
  position: relative;
  z-index: 1;
}

/* P3R Dialog Select - Choices */

#workskin .p3r-select p > b,
#workskin .p3r-select p > span,
#workskin .p3r-select p > a,
#workskin .p3r-select p > strike, {
  align-items: center;
  border-bottom: 0;
  color: white;
  display: flex;
  line-height: 1.2;
  margin: 2px auto;
  padding: 2px 20px 0;
  min-height: 21px;
  width: fit-content;
}

#workskin .p3r-select p > b,
#workskin .p3r-select p > span:hover,
#workskin .p3r-select p > a:hover {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 -3px #5843FF;
  color: #1700FF;
  cursor: pointer;
  font-weight: bold;
}

#workskin .p3r-select p > b .text,
#workskin .p3r-select p > span:hover .text,
#workskin .p3r-select p > a:hover .text {
  display: inline-block;
  transform: scale(1.05);
}

#workskin .p3r-select p > b > span:not(.text),
#workskin .p3r-select p > span > span:not(.text),
#workskin .p3r-select p > a > span:not(.text),
#workskin .p3r-select p > strike > span:not(.text), {
  display: none;
}

#workskin .p3r-select p > strike {
  color: #ffffff80;
  cursor: default;
  text-decoration: line-through;
}

Persona 3 Portable FeMC Theme

Yukari Takeba: Hey, what’s your favorite flower?

[ Roses, no question. ]
[ Sunflowers full of energy! ]
[ It’s gotta be tulips. ]
[ I like gerbera. ]

Example HTML Code 

<div class="p3r-box femc">
  …
</div>

<div class="p3r-select femc">
  …
</div>

CSS Code 

/* P3R Text Box - Custom FeMC Theme */

#workskin .femc-box::after {
  background: linear-gradient(#ed429a80, #ed429a80), linear-gradient(#ed429a80, #ed429a80);
}

#workskin .femc-box p {
  background: linear-gradient(to right, #301321, #590e35 30%, #301321 90%);
}

#workskin .femc-box p::after {
  border-color: #8a0f4c transparent transparent transparent;
}

#workskin .femc-box .name {
  color: #ffcfed;
}

#workskin .femc-box .name::before {
  border-color: #c70068 transparent transparent transparent;
}

#workskin .femc-box::before {
  border-color: #301321 transparent transparent transparent;
}

/* P3R Dialog Select - Custom FeMC Theme */

#workskin .femc-select::after {
  background: linear-gradient(#ed429a80, #ed429a80), linear-gradient(#ed429a80, #ed429a80);
}

#workskin .femc-select p {
  background: linear-gradient(to right, #301321, #590e35, #301321);
  border: 3px solid #75194e;
}

#workskin .femc-select p > b,
#workskin .femc-select p > span:hover {
  box-shadow: 0 -3px #FE3096;
  color: #D0557F;
}

Adding CYOA-Style Links

Which of my Persona 3 work skins would you like to use?

[ 1 – My Persona 3 Portable SL Rank Up display. ]
[ 2 – My Persona 3 Reload text boxes. ]
[ 3 – You acted like a weirdo. ]

This code supports having each choice act as a hyperlink to something else, with the ones that aren’t appearing more faded out. To do this, simply replace the requisite <span> tag with <a>, alongside an appropriate link. Unavailable choices should be marked with a <strike> tag instead.

<div class="p3r-select">
  <p align="center">
    <a href="https://archiveofourown.org/works/46327330">
      <span>[ 1 –</span>
      <span class="text">My <i>Persona 3 Portable</i> SL Rank Up display.
</span>
      <span>]</span>
    </a>

    <br />
    <a href="https://archiveofourown.org/works/62085181">
      <span>[ 2 –</span>
      <span class="text">My <i>Persona 3 Reload</i> text boxes.</span>
      <span>]</span>
    </a>

    <br />
    <strike>
      <span>[ 3 –</span>
      <span class="text">You acted like a weirdo.</span>
      <span>]</span>
    </strike>
  </p>
</div>

Notes:

I wanted to spice up a dialogue-only Persona 3-themed work I was writing, so I spent about half a day painstakingly putting this whole skin together. The triangle behind the name tag was the hardest thing to get right, especially across both desktop and mobile; I ended up editing the numerical values over and over and over again. I’m really satisfied with how it all came out, though.