Archive of Our Own

Chapter Text

Example Result

The CSS Code

You can read a tutorial such as this one to learn how to make a Work Skin. Copy the following code to your CSS field:

.baker-chat-window {
  margin: auto;
  max-width: 900px;
  background-color: #2d2c28;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.6);
  font-family: "HarmonyOS Sans", "HarmonyOS Sans SC", "HarmonyOS Sans TC", sans-serif;
  font-weight: 500;
  line-height: 1.4;
}

.baker-chat-window p {
  margin: 0;
}

.baker-header {
  position: relative;
  color: white;
  background-color: #3c3c3c;
  padding: 10px 20px 10px 30px;
  border: grey solid 1px;
  border-radius: 12px 12px 0 0;
  margin-bottom: 4px;
}

.baker-header::before {
  content: "";
  background-color: #1e1e1e;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
}

.baker-header-deco::before {
  content: "";
  background-color: #19cffe;
  position: absolute;
  bottom: 0;
  left: 10px;
  width: 6px;
  height: 100%;
}

.baker-header-deco::after {
  content: "";
  background-color: #19cffe;
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 5px;
  height: 100%;
}

.baker-header-deco-color::after {
  content: "";
  background: linear-gradient(to right,#b11fac 0% 30%, transparent 30% 35%,#e6e449 35% 65%, transparent 65% 70%, #49c6c4 70% 100%);
  position: absolute;
  bottom: -7px;
  right: 10px;
  width: 120px;
  max-width: 100%;
  height: 2px;
}

.baker-msg-area {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border: grey solid 1px;
  border-radius: 0 0 12px 12px;
  padding-top: 20px;
}

.baker-msg-row {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  width: 100%;
  margin: 4px 0;
}

.baker-msg-row.msg-left {
  justify-content: flex-start;
}

.baker-msg-row.msg-right {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.baker-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: -4px;
}

.msg-left .baker-avatar {
  margin-left: 12px;
}

.msg-right .baker-avatar {
  margin-right: 12px;
}

.baker-msg {
  position: relative;
  padding: 12px 15px;
  word-wrap: break-word;
  width: fit-content;
  max-width: 70%;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);
}

.msg-left .baker-msg {
  color: white;
  background-color: #454545;
  border-radius: 0px 12px 12px 12px;
  margin-left: 10px;
}

.msg-left .baker-msg::after {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 12px 0;
  border-color: transparent #454545 transparent transparent;
}

.msg-right .baker-msg {
  color: black;
  background-color: #eeeced;
  border-radius: 12px 0 12px 12px;
  margin-right: 10px;
}

.msg-right .baker-msg::after {
  content: "";
  position: absolute;
  top: 0;
  right: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 12px 6px;
  border-color: transparent transparent transparent #eeeced;
}

.baker-footer {
  margin-top: 20px;
  padding: 30px 20px;
  background-color: #3b3b3b;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.baker-footer::after {
  content: "";
  background-color: grey;
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 98%;
  height: 1px;
}

.baker-button {
  color: black;
  background-color: #eeeced;
  border-radius: 20px;
  text-align: center;
  max-width: 500px;
  width: 85%;
  padding: 3px 6px;
  cursor: pointer;
  margin: 8px 0;
}

.baker-button:hover {
  background-color: #c3c1c1;
}

.baker-button:active {
  background-color: #adacac;
}

Explanation

TLDR for those who don't know CSS: AO3 work skin works by using CSS, and CSS knows which part to style with what using identifiers (in this case, Classes). You can see this in the part of the code that says <div class="baker-chat-window">...</div> where the element (div) has a Class called baker-chat-window.

List of classes in this work skin:

• baker-chat-window: The wrapper for the chat window. If you feel that the maximum size of the chat window is too big, you can change the value of the max-width here.
• baker-header: Makes up the top part of the chat that has the chat name.
• baker-header-deco: Used to make the two vertical blue lines for chat decoration.
• baker-header-deco-color: Used to make the three horizontal colorful lines for chat decoration. Write the title of the chat inside this element.
• baker-msg-area: Wraps the rest of the chat inside the window.
• baker-msg-row: Wraps a row of chat message. This includes the avatar image and the text bubble.
• msg-left and msg-right: To be combined with baker-msg-row, it styles and positions the bubbles according to the speaker (white bubble for right side and dark bubble for left side).
• baker-avatar: Styles the avatar image into a circle. Change the avatar image by changing the src= to a link of your own image.
• baker-msg: The chat text itself, one for each bubble. If you want to make a new line, use more <p>'s for paragraphs inside this element.
• baker-footer: Makes up the bottom part (the lighter gray box) of the chat window.
• baker-button: Creates a (fake) button. Optional, you can delete this part if you don't want to have buttons in the chat. Not an actual button and only looks like one.

Example HTML of a Complete Chat

<div class="baker-chat-window">
    <div class="baker-header">
        <div class="baker-header-deco">
            <div class="baker-header-deco-color">[REDACTED] Chat Group</div>
        </div>
    </div>
    <div class="baker-msg-area">
        <div class="baker-msg-row msg-left">
            <img src="ava-ardashir.png" class="baker-avatar" alt="Ardashir" />
            <div class="baker-msg">Endmin, long time no see~</div>
        </div>
        <div class="baker-msg-row msg-right">
            <img src="ava-endmin.png" class="baker-avatar" alt="Endmin" />
            <div class="baker-msg">What? Ardashir!? Why do you have my contact?</div>
        </div>
        <div class="baker-msg-row msg-left">
            <img src="ava-ardashir.png" class="baker-avatar" alt="Ardashir" />
            <div class="baker-msg">My Lord, I have always had you on speed dial.</div>
        </div>
        <div class="baker-msg-row msg-left">
            <img src="ava-ardashir.png" class="baker-avatar" alt="Ardashir" />
            <div class="baker-msg">Would you like to guess what name I'm using for your contact? I can give you a hint 💕</div>
        </div>
        <div class="baker-msg-row msg-left">
            <img src="ava-camille.png" class="baker-avatar" alt="Camille" />
            <div class="baker-msg">?</div>
        </div>
        <div class="baker-msg-row msg-left">
            <img src="ava-camille.png" class="baker-avatar" alt="Camille" />
            <div class="baker-msg">Who are you?</div>
        </div>
        <div class="baker-msg-row msg-right">
            <img src="ava-endmin.png" class="baker-avatar" alt="Endmin" />
            <div class="baker-msg">Camille?? Wait can you read this too</div>
        </div>
        <div class="baker-msg-row msg-right">
            <img src="ava-endmin.png" class="baker-avatar" alt="Endmin" />
            <div class="baker-msg">Is this a group chat?</div>
        </div>
        <div class="baker-msg-row msg-left">
            <img src="ava-ardashir.png" class="baker-avatar" alt="Ardashir" />
            <div class="baker-msg">Indeed it is, my Lord.</div>
        </div>
        <div class="baker-msg-row msg-left">
            <img src="ava-ardashir.png" class="baker-avatar" alt="Ardashir" />
            <div class="baker-msg">I happen to have a few choice words for a certain vampire...</div>
        </div>
        <div class="baker-footer">
            <div class="baker-button">Continue the chat</div>
            <div class="baker-button">Block Ardashir</div>
        </div>
    </div>
</div>

Important Notes

• The font-family part only works if you have HarmonyOS (the font used in AKE) font installed in your device, otherwise it defaults to other fonts.
• The buttons are cosmetic only and don't do anything. I've seen some CSS magic out there that can make interactive buttons, but this one doesn't have that.
• AO3 doesn't host images, so if you want to use avatars, you need to find someplace else to host them.