Archive of Our Own

This is a test/sample work — full code at the end.

Tip: check out how it looks with the Creator’s Style off!

Color Samples:

Lorem ipsum dolor sit amet. Nunc nisi nunc, vulputate sodales purus dignissim, posuere ornare est. Pellentesque consequat id risus ut suscipit. Sed tempor lectus vel lacus tincidunt suscipit.

Cras sit amet hendrerit augue, ut mollis felis. Sed quis mauris sed nisl volutpat varius. Cras eu augue pharetra, sodales est vel, tempus augue. Aenean aliquet eget lectus eget tempor.

(Bigger) Messages In-Between Text:

Phasellus varius interdum maximus. Nunc condimentum dolor at nunc dapibus iaculis. Mauris eget faucibus nunc, nec scelerisque ipsum. Cras commodo metus vel est malesuada, et finibus nulla porta.

Nullam fringilla commodo lacus, sed semper tellus viverra eleifend. Aenean laoreet quam quis orci volutpat, vitae commodo ipsum vulputate. Curabitur feugiat rutrum mi, at varius ligula viverra at.

Time Between Messages:

Vestibulum malesuada est non ligula vestibulum, convallis bibendum lorem lobortis. Nunc ut nibh quis nulla cursus laoreet ut sed urna. Donec erat libero, elementum ut tempus ut, aliquet a lorem.

Poenitentiam agite pœnitentiam! Qui tardius moveri, sed in magna copia sint terribiles legionis. Search for solum oculi eorum defunctis cerebro.

Group Chat:

Aenean egestas in augue in laoreet. Sed orci massa, placerat in pretium facilisis, sagittis ut tortor. Nunc in vehicula elit, aliquam ullamcorper libero. Donec et condimentum tellus. Ut vitae dolor risus.

Aliquam sit amet eros quam. In molestie porttitor eros sed hendrerit. Aliquam lobortis at ante non cursus. Nunc eu dapibus velit. Curabitur ut massa viverra, sollicitudin urna non, egestas neque.

Full Work Skin CSS:

For reference:

#workskin div {
  clear: both;
}

#workskin .phone {
  max-width: 300px;
  padding: 0.5em 1.5em;
  margin: auto;
  display: block;
  clear: both;
}

#workskin .phone p {
  word-wrap: break-word;
  padding: 0em .875em;
  margin: 0.75em -0.5em 0.5em;
  display: block;
  clear: both;
}

#workskin [class^="from-blue"],
#workskin [class^="f-blue"] {
  color: #ffffff;
  background-color: #005ce6;
  border-color: #005ce6;
}

#workskin [class^="from-gray"],
#workskin [class^="f-gray"] {
  color: #ffffff;
  background-color: #2A2A2A;
  border-color: #2A2A2A;
}

#workskin [class^="from-purple"],
#workskin [class^="f-purple"] {
  color: #ffffff;
  background-color: #8a00e6;
  border-color: #8a00e6;
}

#workskin [class^="from-orange"],
#workskin [class^="f-orange"] {
  color: #ffffff;
  background-color: #ff7f00;
  border-color: #ff7f00;
}

#workskin [class^="from-green"],
#workskin [class^="f-green"] {
  color: #ffffff;
  background-color: #29a329;
  border-color: #29a329;
}

#workskin [class^="from-ao3red"],
#workskin [class^="f-ao3red"] {
  color: #ffffff;
  background-color: #970000;
  border-color: #970000;
}

#workskin [class^="from-teal"],
#workskin [class^="f-teal"] {
  color: #ffffff;
  background-color: #009999;
  border-color: #009999;
}

#workskin [class^="from-pink"],
#workskin [class^="f-pink"] {
  color: #ffffff;
  background-color: #ff6699;
  border-color: #ff6699;
}

#workskin [class^="from-yellow"],
#workskin [class^="f-yellow"] {
  color: #ffffff;
  background-color: #ffcc00;
  border-color: #ffcc00;
}

#workskin [class^="from-red"],
#workskin [class^="f-red"] {
  color: #ffffff;
  background-color: #e60000;
  border-color: #e60000;
}

#workskin [class^="from-indigo"],
#workskin [class^="f-indigo"] {
  color: #ffffff;
  background-color: #4B0082;
  border-color: #4B0082;
}

#workskin [class^="from-lightblue"],
#workskin [class^="f-lightblue"] {
  color: #ffffff;
  background-color: #33ccff;
  border-color: #33ccff;
}

#workskin [class^="from-beige"],
#workskin [class^="f-beige"] {
  color: #ffffff;
  background-color: #999966;
  border-color: #999966;
}

#workskin [class^="from-darkgreen"],
#workskin [class^="f-darkgreen"] {
  color: #ffffff;
  background-color: #006600;
  border-color: #006600;
}

#workskin [class^="from-lilac"],
#workskin [class^="f-lilac"] {
  color: #ffffff;
  background-color: #bf80ff;
  border-color: #bf80ff;
}

#workskin [class^="from-black"],
#workskin [class^="f-black"] {
  color: #ffffff;
  background-color: #000000;
  border-color: #000000;
}

#workskin [class^="from-military"],
#workskin [class^="f-military"] {
  color: #ffffff;
  background-color: #4B5320;
  border-color: #4B5320;
}

#workskin [class^="from-burgundy"],
#workskin [class^="f-burgundy"] {
  color: #ffffff;
  background-color: #660033;
  border-color: #660033;
}

#workskin [class^="from-brown"],
#workskin [class^="f-brown"] {
  color: #ffffff;
  background-color: #744d25;
  border-color: #744d25;
}

#workskin [class^="from-navy"],
#workskin [class^="f-navy"] {
  color: #ffffff;
  background-color: #003366;
  border-color: #003366;
}

#workskin [class^="from-"],
#workskin [class^="f-"] {
  max-width: 75%;
  line-height: 1.25;
  position: relative;
  padding: 0.5em .875em;
  margin: 0em 0em 0.5em;
  border-radius: 1.15em;
}

#workskin p.title {
  font-size: 0.8em;
  text-align: center;
  max-width: 100%;
  line-height: 1em;
}

#workskin [class$="-left"],
#workskin [class$="-l"] {
  float: left;
  clear: both;
}

#workskin [class$="-right"],
#workskin [class$="-r"] {
  float: right;
  clear: both;
}

#workskin [class^="name-"],
#workskin [class^="n-"] {
  display: block;
  margin: 0em 0.5em 0em;
}

#workskin [class^="from-"][class$="-right"]::after,
#workskin [class^="f-"][class$="-r"]::after {
  content: "";
  position: absolute;
  right: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-left: 0.5em solid;
  border-color: inherit;
  border-bottom-left-radius: 1em 0.5em;
  display: block;
  margin: auto;
}

#workskin [class^="from-"][class$="-left"]::after,
#workskin [class^="f-"][class$="-l"]::after {
  content: "";
  position: absolute;
  left: -0.5em;
  bottom: 0;
  width: 0.5em;
  height: 1em;
  border-right: 0.5em solid;
  border-color: inherit;
  border-bottom-right-radius: 1em 0.5em;
  display: block;
  margin: auto;
}

#workskin .phone p span[class^="from-"] {
  display: block !important;
  clear: both;
  white-space: normal;
  word-wrap: break-word;
  box-sizing: border-box;
}

#workskin .phone span[class^="name-"] {
  font-weight: bold;
  display: block;
}

#workskin .phone span.hide {
  display: none !important;
}

#workskin .phone p {
  clear: both;
  overflow: hidden;
}

#workskin .hide {
  display: none;
}

See AO3 Texting Work Skin for the original code, how to use, and other explanations — all credits to callie37.

My current code is slightly different from the original, mostly due to personal preferences. I have no experience with CSS and went through countless trial-and-error attempts to edit it to my liking.

That said, I do recommend checking out the original code first.

Works With This Style/Skin: