Example:

CSS used:

#workskin .twitch {
  margin: auto;
  display: block;
  float: none;
  width: 20em;
  padding: 1em 1em 1em 1em;
  font-size: small;
}

#workskin .twitchdark {
  margin: auto;
  display: block;
  float: none;
  width: 20em;
  padding: 1em 1em 1em 1em;
  border: 1px solid rgba(135, 135, 135, 0.502);
  border-radius: 3px;
  font-size: small;
  background-color: rgba(0, 0, 0, 0.864);
  color: white;
}

#workskin .twitch>p,
#workskin .twitchdark>p {
  display: block;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  padding: 0.7vh 5px 0.7vh 5px;
  margin: unset;
}

#workskin .twitch>p:hover,
#workskin .twitchdark>p:hover {
  background-color: rgba(130, 130, 130, 0.1);
  border-radius: 5px;
}

#workskin .twitch :nth-of-type(n) b,
#workskin .twitchdark :nth-child(n) b {
  color: green;
}

#workskin .twitch :nth-child(2n) b,
#workskin .twitchdark :nth-child(2n) b {
  color: chocolate;
}

#workskin .twitch :nth-child(3n+0) b,
#workskin .twitchdark :nth-child(3n+0) b {
  color: purple;
}

#workskin .twitch :nth-child(4n-1) b,
#workskin .twitchdark :nth-child(4n-1) b {
  color: blue;
}

#workskin .twitch :nth-child(6n+2) b,
#workskin .twitchdark :nth-child(6n+2) b {
  color: blueviolet;
}

#workskin .twitch b:hover,
#workskin .twitchdark b:hover {
  background-color: rgba(136, 136, 136, 0.2);
  border-radius: 5px;
}

#workskin .twitch .user1:hover,
#workskin .twitchdark .user1:hover {
  background-color: rgba(136, 136, 136, 0.2);
  border-radius: 5px;
}

#workskin .twitch .user1,
#workskin .twitchdark .user1 {
  font-weight: bold;
  color: rgb(0, 162, 162);
}

#workskin .twitchgrey {
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 93%;
  opacity: 40%;
  background-color: rgba(255, 255, 255, 0.051) !important;
}

#workskin .twitch img,
#workskin .twitchdark img {
  height: 23px;
  vertical-align: middle;
}

Code to add to your fic:

  <div class="twitch">
    <p><b>Chatter_1:</b> Insert text here
    </p>

    <p><b>Chatter_2:</b> Insert text here Insert text here Insert text here
    </p>

    <p><b>Chatter_3:</b> Insert text here
    </p>

    <p><b>Chatter_4:</b> Insert text here
    </p>

    <p><b>Chatter_5:</b> Insert text here
    </p>

    <p><span class="twitchgrey">replying to chatter_5</span>
      <br>
      <b>Chatter_6:</b> Insert text here
    </p>
   
  </div>

This gives you:

I’ve also added a dark mode version, which looks like this:

The only thing you need to change is “twitch” in <div class="twitch"> should be replaced with "twitchdark". I'm not going to post much of an in-depth explanation of how to add the bold text, grey text, etc., because it feels self-explanatory. Comment if it isn't working for you though!

Badges and emotes are both added in the same way, using the <img> tag. Let’s say you want to put in a message like this:

This uses the html: 

  <div class="twitch">
    
    <p><b><img src="https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/3" alt="mod badge">
      pearlescentmoonfan:</b> I love being a pearlescentmoon fan!
      <img src="https://static-cdn.jtvnw.net/emoticons/v2/301541211/default/light/3.0" alt="pearlescentmoon hugging heart emoji">
      <img  src="https://static-cdn.jtvnw.net/emoticons/v2/302717171/default/light/3.0" alt="pearlescentmoon smiling emoji" width="25px">
    </p>
  </div>

You use <img src=“your url”>. You can also add in alt text by using <img src=”your url” alt=”your alt” The CSS automatically resizes your image to the size of an emote, plus centres the image, using this code:

.twitch img, .twitchdark img{
  height: 23px;
  vertical-align: middle
}

To easily find emotes, just go on a twitch stream, right click the emote you want, then click ‘copy link’. You can use any image URL though.

You may have noticed the colour of the usernames is done semi-randomly by the css. I’ve used the nth-child selector to change the colours of them, and it repeats every twelve messages. This is the css used:

.twitch b:nth-of-type(n), .twitchdark b:nth-of-type(n){
  color:green;
}

.twitch :nth-child(2n) b, .twitchdark b:nth-of-type(2n){
  color:chocolate;
}

.twitch :nth-child(3n+0) b, .twitchdark b:nth-of-type(3n+0){
  color: purple;
}

.twitch :nth-child(4n-1) b, .twitchdark b:nth-of-type(4n-1){
  color:blue;
}

.twitch :nth-child(6n+2) b, .twitchdark b:nth-of-type(6n+2){
  color:blueviolet;
}

This is pretty nice when you just need a lot of chat messages, and don’t care about who’s saying what. However, I assume there’ll be writers who want someone specific to be in the twitch chat, and they’ll need a consistent username colour!

Lets take a look at this example:

This uses the html:

<div class="twitch">
    
    <p><b>mangoballstan:</b> I wanna grow up to be like you!
    </p>
    
    <p><span class="user1">WilburSoot:</span> Ranboo please read this my apartments burnt down ive lost everything
    </p>
    <p><span class="user1">WilburSoot:</span> I've grabbed this random kid's phone whose watching your stream
       but she doesn't want to miss anything so I can't call you with it I can only use twitch chat
    </p>
    <p><b>mrrogers11:</b> Wow, that's crazy!
    </p>

    <p><b>sodapopbop:</b> Great story!
    </p>

    <p><span class="user1">WilburSoot:</span> I'm begging you PLEASE
    </p>

    <p><b>tweeee:</b> Pogchampers
    </p>
  </div>

 

The <span class=”user1”> changes the colour of the username. Keep in mind that it uses <span> instead of <b>. Originally I was using <b>, but then it didn't work in ao3 and I didn't have energy to figure out why, so it's now using <span>. This is the css used here:

.twitch .user1, .twitchdark .user1{
  color:rgb(0, 162, 162) !important;
}

.twitch .user1:hover, .twitchdark .user1:hover{
  background-color: rgba(136, 136, 136, 0.2);
  border-radius: 5px;
}

To add your own, change the user1 to a unique name and change the colour to one you want. You can do this for multiple chatters, of course.

I think that's all I have to say about this skin! Remember to check how it looks in both desktop and mobile, and also the common site skins like Reversi. Also, you might want to remind people to turn on workskins in the beginning notes.