Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Additional Tags:
Language:
English
Stats:
Published:
2022-08-14
Completed:
2025-01-30
Words:
1,320
Chapters:
2/2
Comments:
1
Kudos:
20
Bookmarks:
7
Hits:
521

Skin for Recreating TTYD’s Text Boxes

Chapter 2: Informational Text & TEC-XX (2024)

Summary:

The text boxes used for both informational prompts and TEC-XX’s dialogue, as they appears in the remade 2024 version of The Thousand-Year Door.

Notes:

EDIT 1/31/2024: Threw in TEC-XX’s dialogue box too, because why not.

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

Chapter Text

Informational Text Boxes

[ Goombella’s Abilities: A Primer ]

[ When you approach people or objects, you may see an icon appear over Goombella’s head. ]

[ If that happens, you can press 🅧 to learn more about that person or object. ]

Example HTML Code 

<div class="ttyd-info-2024 press-star">
  <p align="center">
    <b>
      <span class="hide">[</span>
      Goombella’s Abilities: A Primer
      <span class="hide">]</span>
    </b>
  </p>
</div>

<div class="ttyd-info-2024 press-star">
  <p align="center">
    <b>
      <span class="hide">[</span>
      When you approach people or objects, you may see an icon appear over Goombella’s head.
      <span class="hide">]</span>
    </b>
  </p>
</div>

<div class="ttyd-info-2024 press-star">
  <p align="center">
    <b>
      <span class="hide">[</span>
      If that happens, you can press <span class="switch-x">🅧</span> to learn more about that person or object.
      <span class="hide">]</span>
    </b>
  </p>
</div>

TEC-XX Dialogue Box

“[ How amusing. I am right here, before your eyes. ]”

“[ I am this laboratory’s main computer. I am the TEC-XX. Many call me TEC. You may. ]”

“[ Sir Grodus created me to be a perfect computer, one that is flawless in its reason. ]”

Example HTML Code 

<div class="ttyd-tecxx-2024 press-star">
  <p align="center">
    <b>
      <span class="hide">“[</span>
      How amusing. I am right here, before your eyes.
      <span class="hide">]”</span>
    </b>
  </p>
</div>

<div class="ttyd-tecxx-2024 press-star">
  <p align="center">
    <b>
      <span class="hide">“[</span>
      I am this laboratory’s main computer. I am the TEC-XX. Many call me TEC. You may.
      <span class="hide">]”</span>
    </b>
  </p>
</div>

<div class="ttyd-tecxx-2024 press-star">
  <p align="center">
    <b>
      <span class="hide">“[</span>
      Sir Grodus created me to be a perfect computer, one that is flawless in its reason.
      <span class="hide">]”</span>
    </b>
  </p>
</div>

Dialog Selection

[ Save all game progress up to this point? ]

> Yes
No

[ Saving… Do not touch the Memory Card in Slot A or the POWER Button. ]

[ Your progress was saved. ]

Example HTML Code 

<div class="ttyd-info-2024 press-star">
  <p align="center">
    <b>
      <span class="hide">[</span>
      Save all game progress up to this point?
      <span class="hide">]</span>
    </b>
  </p>
</div>

<p class="ttyd-select-2024" align="center">
  <b class="option">
    <span class="hide">&gt; </span>Yes
  </b>
  <br />
  <span class="option">No</span>
</p>

<div class="ttyd-info-2024">
  <p align="center">
    <b>
      <span class="hide">[</span>
      Saving… Do not touch the Memory Card in Slot A or the POWER Button.
      <span class="hide">]</span>
    </b>
  </p>
</div>

<div class="ttyd-info-2024 press-star">
  <p align="center">
    <b>
      <span class="hide">[</span>
      Your progress was saved.
      <span class="hide">]</span>
    </b>
  </p>
</div>

CSS Code 

/* TTYD Tutorial Box (2024) */

#workskin .ttyd-info-2024 {
  background: linear-gradient(#D3D4D3, #BDBEBD);
  border-radius: 15px;
  box-shadow: 0 -1px white, 0 1px #AAAAAA;
  color: #B2BFE6;
  margin: 25px auto;
  padding: 5px 6px;
  position: relative;
  width: 500px;
  max-width: 80%;
}

#workskin .ttyd-info-2024 p {
  align-items: center;
  background-image: radial-gradient(circle at 50px 15px, #FFFFFF30 20px, transparent 60px), linear-gradient(#003aff40, #003aff40), url('https://i.imgur.com/wcqnesr.png');
  background-repeat: repeat;
  box-shadow: 0 0 10px inset black, 0 1px rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  display: flex;
  margin: 0;
  padding: 25px 15px;
  text-align: left;
  min-height: 60px;
}

#workskin .ttyd-info-2024 b {
  font-weight: normal;
}

/* TTYD TEC-XX Dialogue (2024) */

#workskin .ttyd-tecxx-2024 {
  background: linear-gradient(#A2A99F, #829288);
  border-radius: 5px;
  box-shadow: 0 1px inset white, 0 -1px inset #5c665d, 0 0 2px #91ff94, 0 0 2px #91ff94;
  color: #069216;
  margin: 25px auto;
  padding: 7px 6px 8px;
  position: relative;
  width: 500px;
  max-width: 80%;
}

#workskin .ttyd-tecxx-2024::before {
  content: '';
  background-image: radial-gradient(circle at 60px -10px, #FFFFFF30 20px, transparent 70px);
  display: block;
  transform: scaleY(0.84);
  position: absolute;
  top: -8%;
  left: 0;
  height: 124px;
  width: 100%;
}

#workskin .ttyd-tecxx-2024 p {
  align-items: center;
  background: repeating-linear-gradient(0deg, #FFFFFF10, #FFFFFF10 1px, transparent 1px, transparent 4px), linear-gradient(#164558, #082D42 30%, #082D42 50%, #083542 60%, #176E63);
  background-color: transparent;
  box-shadow: 0 0 10px inset black, 0 1px #EFF3EF;
  border-radius: 3px;
  display: flex;
  margin: 0;
  padding: 25px 15px;
  text-align: left;
  min-height: 60px;
}

#workskin .ttyd-tecxx-2024 b {
  font-weight: normal;
  position: relative;
  z-index: 1;
}

/* TTYD Dialog Select (2024) */

#workskin .ttyd-select-2024 {
  background-color: white;
  background-image: linear-gradient(#FFFFFFA0, #FFFFFF80), url('https://i.imgur.com/wcqnesr.png');
  background-blend-mode: luminosity;
  border-radius: 10px;
  box-shadow: 0 -1px white, 0 1px #707070;
  color: #5E5E5E;
  margin: 25px auto;
  padding: 8px 10px;
  width: max-content;
  max-width: 60%;
}

#workskin .ttyd-select-2024 .option {
  align-items: center;
  background-color: #DEE3E4;
  border-top: 1px solid white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: flex;
  margin: 8px auto;
  padding: 3px 32px 1px 9px;
  position: relative;
  min-width: 40px;
}

#workskin .ttyd-select-2024 b.option,
#workskin .ttyd-select-2024 .option:hover {
  background-color: white;
  border-top-color: white;
  border-bottom-color: white;
  box-shadow: 0 0 5px #DD6F76, 0 1px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.5);
  color: #DD6F76;
  font-weight: normal;
}

#workskin .ttyd-select-2024 b.option::before {
  content: '';
  background-image: url('https://i.imgur.com/YOYrXXO.png');
  background-size: contain;
  background-repeat: no-repeat;
  cursor: default;
  position: absolute;
  left: -17px;
  height: 20px;
  width: 24px;
}

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

/* TTYD Text Advance Icon */

#workskin .ttyd-info-2024.press-star::after,
#workskin .ttyd-tecxx-2024.press-star::after {
  content: '';
  background-image: url('https://i.imgur.com/mai9bCV.png');
  background-size: contain;
  cursor: pointer;
  position: absolute;
  bottom: -10px;
  right: 15px;
  height: 37px;
  width: 37px;
}

/* Miscellaneous */

#workskin .switch-x {
  color: #69B6FF;
  font-weight: normal;
}

#workskin .hide {
  display: none;
}

Notes:

This isn’t that different from the prior version, but I figured since it was so simple, I might as well do it anyway. Apologies for this being rather overdue, given that the TTYD remake came out last summer.

Sadly, it seems like no one’s ripped the little Star icon from the game itself (despite doing so for all of the dialogue boxes), so I had to borrow the one from Origami King to use instead. I would’ve included the little blue notches in the corners, too—but unfortunately, that would have required too many additional HTML elements for my liking. It’s a shame, but what can you do.