Actions

Work Header

Rating:
Archive Warning:
Fandom:
Characters:
Additional Tags:
Language:
English
Series:
Part 3 of Crumb's AO3 Circus
Stats:
Published:
2026-03-20
Updated:
2026-04-19
Words:
1,224
Chapters:
5/?
Kudos:
14
Bookmarks:
3
Hits:
221

Work Skin Test - Gimmicks

Summary:

This isn't a guide! Read if you want, but I use this to test my gimmicky work skin that has cool formatting. I'll leave my CSS but it won't really be an easy step-by-step guide to those who aren't familiar with HTML...
[characters tagged appeared here as example texts as format previews]

**Most of the skins aren't mine, I got these from other tutorials! They will be credited in their respective chapter. If there are no credits, that means the format code is mine. :)

Chapter 1: Text App Format

Summary:

This is my own skin, but I've been inspired by other tutorials I've seen.

Update: the bar holding the contact name is phone friendly and the width now fits phones! 🥳🥳🥳

Chapter Text

   default contact image should appear here 
Unknown

 

9:24PM

Rando texted:Yo bro are you coming to the barbeque meet up on sunday?

You texted:wrong number bud
ⓘ Message not delivered

You texted:i don't know you
ⓘ Message not delivered

Rando texted:Me and bob are gonna bring the meat

You texted:whatever

You texted:this is still the wrong number btw
ⓘ Message not delivered

Rando texted:Are you gonna come out of the closet this party?

Rando texted:the others already suspect about our secret relationship

You texted:WHAT

yo this stuff isn't for me to hear this is the wrong number
ⓘ Message not delivered

Rando texted:Exactly bro, they know

Rando texted:Just don't say the toe tickling part

You texted:DUDE please stop texting me

Rando texted:Don't be like that, youre coming out for both of us its a good thing

Rando texted:Cya there Jim

You texted:i don't know who that guy is bruh
ⓘ Message not delivered

 

 

This is the code I used for the text boxes and the top border.

 

#workskin .divcenter {
  max-width: 800px;
  display: table;
  margin: auto;
}

^ I put <div class="divcenter"> the contact bar </div> around only the contact bar so that the box is centered.

 

#workskin .contact-bar {
  min-width: 300px;
  background-color: #9e9e9e;
  border-bottom: 2px solid #454545;
  color: #000000;
  font-weight: bold;
  font-family: Arial, sans-serif;
  padding-bottom: .5em;
  padding-top: .5em;
  margin-left: -.5em;
  margin-right: -.5em;
  margin-bottom: -2em;
  text-align: center;
  display: table;
}

^ This is for the bar that holds the contact pfp and name, though the pfp is optional.

 

#workskin .text-timestamp {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #858585;
}

^ This is for the date+time the texts were sent. Put <span class"text-timestamp">  insert timestamp text  </span> around the text.

 

#workskin .text-grey {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #000000;
  background: #bdbdbd;
  margin: 10px;
  padding: 8px 15px 8px 15px;
  border-radius: 10px;
}

^ This is for the grey text bubble. Put <p dir="ltr"><span class"text-grey">  insert grey text  </span> around the text.

 

#workskin .text-blue {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #000000;
  background: #47a3ff;
  margin: 10px;
  padding: 8px 15px 8px 15px;
  border-radius: 10px;
}

^ This is for the blue text bubble. Put <p dir="rtl"><span class"text-blue">  insert blue text  </span> around the text.

 

#workskin .hide {
  display: none;
}

^ If you want to make the text sequence accessible to those who use screen readers by using hidden text that indicates who is speaking, put <span class="hide">  insert hidden text  </span> around the text so you can add secret text that the viewer can't see, but audio readers can see.