Archive of Our Own ^beta

Chapter Text

The "without workskin" section below has the exact same html as the "with workskin" section, just with css classes removed so that you can more directly compare the two without turning creator style on and off (though if you do have creator style off, both sections will be without workskin).

I used this long-ish example to test the various edge cases of the workskin; if you just want a short example to copy from you can grab that from the end.

Example with workskin:

Same example without workskin:

The actual workskin css code

You can use this code by following these steps to create a work skin and pasting in the code below.

  /* Note: text between pairs of /* will disappear when you save your workskin. It's just there to provide explanation. */

#workskin {
  position: relative;
}

/* The body of the phone */
#workskin .phone {
  width: 300px;
  max-width: 90%;
  position: relative;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 1em auto;
  border: 2px ridge #aaa;
  padding: .5em 0;
  display: table;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Respecify font for h3 since it normally has its own special rules */
#workskin .phone h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Group chat or contact name */
#workskin .phoneheader {
  border-bottom: 2px ridge #b2b2b2;
  font-weight: bold;
  padding-bottom: .5em;
  padding-top: .5em;
  margin: 0;
  text-align: center;
  display: block;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Chat bubbles (text on left, breply on right) */
#workskin .text,
#workskin .breply {
  margin: .5em;
  margin-top: 0;
  border-radius: 1em;
  padding: .5em 1em;
  max-width: 75%;
  clear: both;
  position: relative;
  overflow-wrap: break-word;
  hyphens: auto;
}

#workskin .text {
  float: left;
  border-bottom-left-radius: .1em;
  outline: 2px ridge #c5c5ca;
}

#workskin .breply {
  float: right;
  border-bottom-right-radius: .1em;
  outline: 2px ridge #1289fe;
}

/* Adjustments for texts/breplies that follow each other */
#workskin .breply + .breply,
#workskin .breply + .hiddeninfo + .breply {
  border-top-right-radius: 0.1em;
}

#workskin .text + .text,
#workskin .text + .hiddeninfo + .text {
  border-top-left-radius: 0.1em;
}

#workskin .breply + .text,
#workskin .breply + .hiddeninfo + .text,
#workskin .text + .breply,
#workskin .text + .hiddeninfo + .breply {
  margin-top: .75em;
}

/* Contact names in group chats, and timestamps */
#workskin .time,
#workskin .grouptext {
  padding: .75em 1em;
  font-size: .75em;
  line-height: .75em;
  display: block;
  clear: both;
}

#workskin .time {
  margin: .5em auto;
  text-align: center;
}

#workskin .grouptext {
  margin: 0 auto;
  margin-left: 0;
  padding-bottom: .5em;
  text-align: left;
}

#workskin .grouptext > strong {
  font-weight: normal;
}

#workskin .time + .grouptext {
  padding-top: 0;
}

/* Hides text when style is *on* */ 
#workskin .hiddeninfo {
  display: none;
}

Formatting your html so that the workskin works

General overview

• Almost every chunk of text you see in the formatted output is just a paragraph tag (<p>)
• Character names are bolded to make the version without the workskin a bit more readable. Please also add character names (if they are missing) for messages from the pov character, and for messages from the contact in a direct chat.
• If you have something that looks like the non-workskin code, all you need to do is add the correct class to each such paragraph. For example, the <p> in <p>[message from POV character]</p> becomes <p class="breply">
• The relevant classes are: "breply" for pov messages, "text" for non-pov messages, "time" for time stamps, "grouptext" for character names in a group chat, "phoneheader" for the name of the group chat or contact, and "hiddeninfo" for info which should only be shown to someone not looking at creator's style (like, character names in a direct chat)
• To actually make the phone background work, wrap all the paragraphs from a single conversation in a div with class "phone". This means putting <div class="phone"> at the beginning and </div> at the end
• To make phone headings a bit more meaningful, replace <p>[Contact Name]</p> with <h3 class="phoneheader"><span class="hiddeninfo">Conversation with: </span>[Contact Name]</h3>, and similarly for a group chat, though if it's a named group you could do "Group Chat:" instead of "Conversation with:"
• Test to make sure the chat doesn't get stuck at a certain width for different screen widths and/or zoom levels--Firefox struggled to break up the keysmash until I added a bunch of "­"s to it to suggest where it could break the long word up instead

Shorter example

In code:

  <div class="phone">
  <h3 class="phoneheader"><span class="hiddeninfo">Group chat: </span>Bird friends</h3>

  <p class="time"><strong>Today</strong> 3:55 PM</p>

  <p class="hiddeninfo"><strong>Chickadee</strong></p>

  <p class="breply">Chickadee-dee-dee</p>

  <p class="grouptext"><strong>Crow</strong></p>

  <p class="text">Ca-caw!</p>
</div>

Design notes

• I liked the swoopy tails on the chat bubbles in the inpiring workskin, but couldn't make them work in outline form, so I went with something a little simpler, but did add some shaping for double-texting which I thought looked cute
• Adding "hyphens: auto;" is what prevents the long keysmash from forcing the chat screen to be wider than the max width specified. I think "overflow-wrap: break-word;" is doing something similar? But it wasn't enough by itself. (edited to add: whoops, didn't test this on Firefox--it seems like "hyphens: auto" isn't enough there, but by adding a bunch of "­"s to the keysmash, I give Firefox more options on where to break the word, so now it doesn't get stuck anymore)
• For accessibility, I wanted to use paragraphs for most text chunks because that felt semantically like the closest parallel structure. However, due to that design choice, I wasn't able to find a way to display character names closer to their following lines when creator style is off
• I have just noticed with my shorter example at the end that the displayed width is narrower than 300px if all the text being displayed is on the shorter side. I could set a min width, but being able to squish the displayed phone's width for narrower screens or when viewing the fic at higher zoom levels seems more important. Update: edited css to fix this July 13, 2023
• I used the "ridge" border/outline type because it's two-toned, so I figured the dark tone would help visibility on light backgrounds and the lighter tone would help on dark backgrounds

Chapter Text

First, an accessibility note: It can be tricky to pick colors that have sufficient contrast between themselves (so that someone can see at a glance the difference between a red bubble and an orange bubble) and between themselves and the background (such that e.g. the orange bubble doesn't fade into a sepia background). These seem okay to me (barring maybe the orange, which sometimes seems close to the yellow and sometimes seems close to the red), but I'm not color blind and also the whole point of this work skin is that it's merging with arbitrary reader site skins, so I can't exactly check the contrast on those. These are just factors to be aware of if you decide to use this part of the work skin! In particular when picking which of these colors to use in a particular story, or deciding to modify particular colors from the list. But this is the reason I didn't want to change any of the text, including character names, to use these colors.

In the chat below, each character's name is the name of the css class I've defined that applies that color as an outline to the chat bubble.

To use this update, you'll need to add the following css to the code in the previous chapter:

#workskin .phone .red {
  outline: 2px ridge #ed665b;
}

#workskin .phone .orange {
  outline: 2px ridge #faa03e;
}

#workskin .phone .yellow {
  outline: 2px ridge #fcc934;
}

#workskin .phone .green {
  outline: 2px ridge #5bb974;
}

#workskin .phone .lightblue {
  outline: 2px ridge #4ecde6;
}

#workskin .phone .purple {
  outline: 2px ridge #af5cf7;
}

#workskin .phone .pink {
  outline: 2px ridge #ff63b8;
}

And then, anywhere you would have inserted class="text", do class="text red" (or whatever other of these color names you wish).

Here's a mini html example, involving the character named Ironman speaking with a red bubble:

<p class="grouptext"><strong>Ironman</strong></p>

<p class="text red">I. am. Ironman!</p>

If you want a slightly different color, you can edit the "#number" part of the matching css rule--these colors are in hex format, which a lot of online color pickers/palette generators will give you the values for. I find the orange a little similar to the red or yellow depending on whether I'm looking at it in light or dark mode, but I still included it because I can't kick it out of the rainbow! Because of the way this is set up, you can also override the reply color by doing "breply pink" instead of "breply", for example.

I also picked the color names for ease of explanation, but you could change "red" in "text red" and "#workskin .phone .red" to a character name, for example, if that is helpful to you when setting up your html. You could even make multiple nicknames for a color. The following code, if added to your workskin, will allow you to use either "hulk" or "lantern" instead of "green". Note the commas at the end of the first two lines, but not directly before the curly brace!

  
#workskin .phone .green,
#workskin .phone .hulk,
#workskin .phone .lantern {
  outline: 2px ridge #5bb974;
}

<p class="grouptext"><strong>Bruce Banner</strong></p>

<p class="text hulk">Who me? I'm definitely not Hulk</p>