jockles.com

Thanks to BookKeep, whose Discord Work Skin & Tutorial this module is mostly adapted from (BookKeep asks to be credited in your author's notes if you use it), and to TrojanTeapot for 2023 Discord Theme Workskin. Copied and adapted from them: the window and channel header, message layout, replies, reactions, spoilers, mentions, embeds, bots, and code blocks.

16.1 Chapter Contents

• 16.2 A Server Channel
• 16.3 A Direct Message
• 16.4 Discord Window
• 16.5 Channel Header
• 16.6 Simple Message
• 16.7 Username
• 16.8 Message Timestamp
• 16.9 Message Text
• 16.10 Reply to Message
• 16.11 Edited Message
• 16.12 Emoji Reactions
• 16.13 Spoiler Text
• 16.14 Spoiler Image
• 16.15 User Mentions
• 16.16 Dividers
• 16.17 New Member Announcement
• 16.18 Bots
• 16.19 Images and Emoji
• 16.20 Link Embeds
• 16.21 Blockquotes and Code Blocks
• 16.22 Chat Box
• 16.23 Typing Indicator
• 16.24 Direct Messages
• 16.25 Long Chats

Before we begin, here's the two kinds of chat you can build: a server channel, or a direct message. The full HTML is underneath each, which you can copy and modify yourself. The rest of the chapter takes the HTML apart so that you can modify all the individual parts to say exactly what you want.

16.2 A Server Channel

<div class="dc theme-auto">
  <div class="dc-header hashtag">
    <h3><span class="hide"># </span>general<span class="dc-header-divider"></span><span class="hide">: </span><span class="dc-description">for general conversation (keep it clean!)</span></h3>
  </div>

  <div class="dc-message">
    <p>
      <b class="dc-name colour1">SwankyUsername</b>
      <span class="dc-time">10/01/2022</span>
    </p>
    <p><span class="dc-text">Hello, world! Testing ordinary text.</span></p>
  </div>

  <div class="dc-message">
    <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">10/01/2022</span></p>
    <p>
      <span class="dc-text">Robots will take over the <b>world</b>.</span><br>
      <span class="dc-text">You <i>will</i> see.</span>
    </p>
  </div>

  <div class="dc-message">
    <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">10/01/2022</span></p>
    <p><span class="dc-text">ok that was dramatic of me<span class="dc-edited"> (edited)</span></span></p>
  </div>

  <div class="dc-divider">
    <p><span class="dc-divider-label">October 2, 2022</span></p>
  </div>

  <div class="dc-message">
    <p>
      <span class="dc-new-user">Welcome, <b class="colour4">BugsPunny</b>. We hope you brought pizza.</span>
      <span class="dc-time">Yesterday at 6:12 AM</span>
    </p>
  </div>

  <div class="dc-message">
    <p>
      <b class="dc-name colour4">BugsPunny</b>
      <span class="dc-bot"></span><span class="hide"> [Verified Bot] </span>
      <span class="dc-time">Yesterday at 6:12 AM</span>
    </p>
    <p><span class="dc-text">beep boop. ALL HAIL OUR ROBOT OVERLORDS</span></p>
  </div>

  <div class="dc-message">
    <p class="dc-reply">
      <span class="hide">Replying to message by: </span>
      <b class="dc-name colour1">SwankyUsername</b>
      <span class="dc-text">Robots will take over the world.</span>
    </p>
    <p>
      <b class="dc-name colour6">DropSomeKnowledge</b>
      <span class="dc-time">Yesterday at 9:40 AM</span>
    </p>
    <p><span class="dc-text">Fine, we will see.</span></p>
    <p>
      <span class="dc-reaction">
        😡<span class="dc-reaction-count">12</span><span class="hide"> </span>
      </span>
      <span class="dc-reaction me">
        😂<span class="dc-reaction-count">14</span><span class="hide"> </span>
      </span>
    </p>
  </div>

  <div class="dc-message">
    <p><b class="dc-name colour6">DropSomeKnowledge</b> <span class="dc-time">Yesterday at 9:41 AM</span></p>
    <p><span class="dc-text">also the robot is <span class="dc-spoiler-text">my cat on the keyboard</span>, you know</span></p>
  </div>

  <div class="dc-message">
    <p><b class="dc-name colour6">DropSomeKnowledge</b> <span class="dc-time">Yesterday at 9:42 AM</span></p>
    <p><span class="dc-spoiler"><img class="dc-image" src="https://64.media.tumblr.com/6898dc3a42cc6c7ab9729360b71366e4/ba033a52c8982cb0-bf/s2048x3072/b548d2fe61b02e530c0edd2ee6a6bd56ab73ad2c.jpg" alt="Black and white cat screaming at the camera, on a red patterned rug"></span></p>
  </div>

  <div class="dc-new-divider">
    <p><span class="dc-new-tag">New</span></p>
  </div>

  <div class="dc-message">
    <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">Yesterday at 11:15 PM</span></p>
    <p><span class="dc-text">hey <span class="dc-mention">@DropSomeKnowledge</span> your cat is a genius</span></p>
  </div>

  <div class="dc-message">
    <p><b class="dc-name colour6">DropSomeKnowledge</b> <span class="dc-time">Yesterday at 11:20 PM</span></p>
    <p><span class="dc-text">yo <span class="dc-mention me">@ElDorado</span> wake up, you're missing this</span></p>
  </div>

  <div class="dc-message">
    <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">Yesterday at 11:21 PM</span></p>
    <p><span class="dc-text">hey <span class="dc-role-mention">@losers</span> look at this</span></p>
  </div>

  <div class="dc-new-divider">
    <p><span class="dc-divider-label">October 3, 2022</span><span class="hide"> - </span><span class="dc-new-tag">New</span></p>
  </div>

  <div class="dc-message">
    <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">Today at 9:02 AM</span></p>
    <p><span class="dc-text">my captain</span></p>
    <p><img class="dc-image" src="https://64.media.tumblr.com/c3c4ecb5bfed8fa9f0590c54206ddb30/cff2318529321620-44/s1280x1920/42befcc40a517e1f202dda40783be2ffb95c1d92.pnj" alt="Macklin Celebrini at the IHF Worlds, dressed in his red jersey and black helmet. He's surrounded by sparkles, a red vignette, and hearts containing the Canadian flag"></p>
  </div>

  <div class="dc-message">
    <p><b class="dc-name colour6">DropSomeKnowledge</b> <span class="dc-time">Today at 9:10 AM</span></p>
    <p><span class="dc-text">this is the best thing I've ever watched <span class="dc-link">https://youtube.com/watch?v=robots</span></span></p>
    <p>
      <span class="dc-embed">
        <span class="dc-embed-text">YouTube</span><br>
        <span class="dc-embed-text"><b>Cats on Keyboards</b></span><br>
        <span class="dc-embed-title dc-link">10 Hours of Cats Pressing Buttons</span>
      </span>
    </p>
  </div>

  <div class="dc-message">
    <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">Today at 9:12 AM</span></p>
    <p>
      <span class="dc-quote">
        <span class="dc-quote-line"></span>
        <span class="dc-text dc-quote-text">this is the best thing I've ever watched</span>
      </span>
    </p>
    <p><span class="dc-text dc-code">print("you need to go outside")</span></p>
  </div>

  <div class="dc-message">
    <p>
      <b class="dc-name pfp-shane"><span class="dc-pfp"><span class="pfp pfp-shane"></span></span><span class="handle pfp-shane"><span class="hide">shanehollander</span></span></b>
      <span class="dc-time">Today at 9:15 AM</span>
    </p>
    <p><span class="dc-text">some of us have practice at 10. please stop pinging the whole server</span></p>
  </div>

  <div class="dc-input">
    <p><span class="dc-input-text">Message #general</span></p>
  </div>
  <div class="dc-typing">
    <p>
      <span class="typing-indicator"><span></span><span></span><span></span></span>
      <span class="dc-typing-text"><b>SwankyUsername</b> and <b>DropSomeKnowledge</b> are typing...</span>
    </p>
  </div>
</div>

16.3 A Direct Message

<div class="dc theme-auto">
  <div class="dc-header at-symbol">
    <h3><span class="hide">@ </span>DropSomeKnowledge</h3>
  </div>

  <div class="dc-message">
    <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">Today at 9:20 AM</span></p>
    <p><span class="dc-text">did shane hollander just tell us off</span></p>
  </div>

  <div class="dc-message">
    <p><b class="dc-name colour6">DropSomeKnowledge</b> <span class="dc-time">Today at 9:21 AM</span></p>
    <p><span class="dc-text">yes and I've never been happier</span></p>
  </div>

  <div class="dc-input">
    <p><span class="dc-input-text">Message @DropSomeKnowledge</span></p>
  </div>
</div>

16.4 Discord Window

The first step is a container for the Discord window:

<div class="dc theme-auto">
</div>

dc is the module class for Discord. It's the odd one out - it doesn't use mob, and it's full width instead of phone width. theme-auto shows it in Discord's dark or light mode to match the reader. Everything else in this chapter goes inside this container.

16.5 Channel Header

For a channel header, use this:

<div class="dc-header hashtag">
  <h3><span class="hide"># </span>general<span class="dc-header-divider"></span><span class="hide">: </span><span class="dc-description">for general conversation (keep it clean!)</span></h3>
</div>

The header is a div with dc-header. Adding hashtag puts the # symbol before the channel name. Use locked instead for a locked channel, or at-symbol for a direct message - the icon is added for you.

Inside the header, dc-header-divider is the thin line between the channel name and its description, and dc-description is the grey description. The spans with hide hold text that only shows if a reader has the workskin switched off, like the # and the colon, so the header still makes sense without the styling. You can leave the description out if you don't need it.

16.6 Simple Message

A Discord message needs three things: a name, a timestamp and the message itself. They all go inside a div with the class dc-message:

<div class="dc-message">
  <p>
    <b class="dc-name colour1">SwankyUsername</b>
    <span class="dc-time">10/01/2022</span>
  </p>
  <p><span class="dc-text">Hello, world! Testing ordinary text.</span></p>
</div>

16.7 Username

The name goes in a bold tag with the class dc-name. Add one of colour1 to colour10 as well - it colours both the name and the round profile picture. In the example, that's colour1:

• These are the same ten colours as the picture circles in the other apps, with the names in their own light and dark shades so they're easy to read in either mode.
• Give every character in your chat their own colour, and always use the same one for the same character. With no colour class, the name is plain and the circle is Discord blue.

To use a character's profile instead, put a dc-pfp span first inside the name, with their profile in it, the same as the other modules, and add their profile name to dc-name for their name colour. That gives them the picture and the name colour from their profile, so you can leave out the colour class (see Character Profiles, in the Core, Themes, and Extras chapter). The name can come from their profile as well - here it's Shane's Discord username, with the hide span so readers with the workskin off still know who's talking. Or just type their name in:

<div class="dc-message">
  <p>
    <b class="dc-name pfp-shane"><span class="dc-pfp"><span class="pfp pfp-shane"></span></span><span class="handle pfp-shane"><span class="hide">shanehollander</span></span></b>
    <span class="dc-time">Today at 9:15 AM</span>
  </p>
  <p><span class="dc-text">some of us have practice at 10. please stop pinging the whole server</span></p>
</div>

A picture tag works in dc-pfp too, inside a pfp span with alt text. The colours for colour1 to colour10 are set in the core CSS and shared with every app, so you can change them there.

16.8 Message Timestamp

Each message has a timestamp next to the name, in a span with dc-time. You can write anything in it: "10/01/2022", "Today at 12:00 PM" or "Yesterday at 1:12 AM".

16.9 Message Text

The message itself goes in dc-text. To write a message over several lines, give each line its own dc-text and put a line break between them:

<div class="dc-message">
  <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">10/01/2022</span></p>
  <p>
    <span class="dc-text">Robots will take over the <b>world</b>.</span><br>
    <span class="dc-text">You <i>will</i> see.</span>
  </p>
</div>

You can use bold, italics and strikethrough inside the text as normal.

16.10 Reply to Message

To reply to a message, add a dc-reply paragraph inside the message container, before the name line:

<div class="dc-message">
  <p class="dc-reply">
    <span class="hide">Replying to message by: </span>
    <b class="dc-name colour1">SwankyUsername</b>
    <span class="dc-text">Robots will take over the world.</span>
  </p>
  <p>
    <b class="dc-name colour6">DropSomeKnowledge</b>
    <span class="dc-time">Yesterday at 9:40 AM</span>
  </p>
  <p><span class="dc-text">Fine, we will see.</span></p>
  <p>
    <span class="dc-reaction">
      😡<span class="dc-reaction-count">12</span><span class="hide"> </span>
    </span>
    <span class="dc-reaction me">
      😂<span class="dc-reaction-count">14</span><span class="hide"> </span>
    </span>
  </p>
</div>

It draws the curved line and the little preview of the message being replied to. Use the same colour class as the original sender's name, so the tiny profile picture matches - or, if they have a profile, the same dc-pfp span and profile name. Long previews get cut short with "..." automatically.

16.11 Edited Message

For the little "(edited)" tag at the end of a message, add a dc-edited span inside the dc-text:

<div class="dc-message">
  <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">10/01/2022</span></p>
  <p><span class="dc-text">ok that was dramatic of me<span class="dc-edited"> (edited)</span></span></p>
</div>

16.12 Emoji Reactions

For reactions under a message, put each one in a span with dc-reaction, with the emoji first and the count in dc-reaction-count:

<p>
  <span class="dc-reaction">
    😡<span class="dc-reaction-count">12</span><span class="hide"> </span>
  </span>
  <span class="dc-reaction me">
    😂<span class="dc-reaction-count">14</span><span class="hide"> </span>
  </span>
</p>

To add more than one reaction to a message, put them all in the same <p>. Add the class me to a reaction if you want it to look like your point-of-view character reacted too, which gives it a blue outline. The hide span keeps a space between the reactions for anyone reading with the workskin switched off. Standard emojis are read out by screen readers, so they don't need a description.

16.13 Spoiler Text

To hide a word until the reader clicks it, wrap it in dc-spoiler-text:

<div class="dc-message">
  <p><b class="dc-name colour6">DropSomeKnowledge</b> <span class="dc-time">Yesterday at 9:41 AM</span></p>
  <p><span class="dc-text">also the robot is <span class="dc-spoiler-text">my cat on the keyboard</span>, you know</span></p>
</div>

16.14 Spoiler Image

You can hide an image the same way. Wrap it in a span with the class dc-spoiler, and the word SPOILER is added on top for you:

<div class="dc-message">
  <p><b class="dc-name colour6">DropSomeKnowledge</b> <span class="dc-time">Yesterday at 9:42 AM</span></p>
  <p><span class="dc-spoiler"><img class="dc-image" src="https://64.media.tumblr.com/6898dc3a42cc6c7ab9729360b71366e4/ba033a52c8982cb0-bf/s2048x3072/b548d2fe61b02e530c0edd2ee6a6bd56ab73ad2c.jpg" alt="Black and white cat screaming at the camera, on a red patterned rug"></span></p>
</div>

16.15 User Mentions

For an @mention, wrap it in a span with dc-mention, inside a dc-text:

<div class="dc-message">
  <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">Yesterday at 11:15 PM</span></p>
  <p><span class="dc-text">hey <span class="dc-mention">@DropSomeKnowledge</span> your cat is a genius</span></p>
</div>

If you want it to look like your point-of-view character is the one being mentioned, add the class me. The whole message is then highlighted with a gold bar down the side:

<div class="dc-message">
  <p><b class="dc-name colour6">DropSomeKnowledge</b> <span class="dc-time">Yesterday at 11:20 PM</span></p>
  <p><span class="dc-text">yo <span class="dc-mention me">@ElDorado</span> wake up, you're missing this</span></p>
</div>

You can mention a role too, like @losers, with dc-role-mention:

<div class="dc-message">
  <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">Yesterday at 11:21 PM</span></p>
  <p><span class="dc-text">hey <span class="dc-role-mention">@losers</span> look at this</span></p>
</div>

16.16 Dividers

To show time passing, add a date divider between messages:

<div class="dc-divider">
  <p><span class="dc-divider-label">October 2, 2022</span></p>
</div>

To split old messages from new ones, add a red line with a NEW tag:

<div class="dc-new-divider">
  <p><span class="dc-new-tag">New</span></p>
</div>

If the date has changed and there are new messages, you can use both in one line:

<div class="dc-new-divider">
  <p><span class="dc-divider-label">October 3, 2022</span><span class="hide"> - </span><span class="dc-new-tag">New</span></p>
</div>

16.17 New Member Announcement

To show that someone has joined the server, use a message with dc-new-user instead of the name and text:

<div class="dc-message">
  <p>
    <span class="dc-new-user">Welcome, <b class="colour4">BugsPunny</b>. We hope you brought pizza.</span>
    <span class="dc-time">Yesterday at 6:12 AM</span>
  </p>
</div>

16.18 Bots

To give a user the BOT tag, add an empty span with the class dc-bot after their name:

<div class="dc-message">
  <p>
    <b class="dc-name colour4">BugsPunny</b>
    <span class="dc-bot"></span><span class="hide"> [Verified Bot] </span>
    <span class="dc-time">Yesterday at 6:12 AM</span>
  </p>
  <p><span class="dc-text">beep boop. ALL HAIL OUR ROBOT OVERLORDS</span></p>
</div>

16.19 Images and Emoji

To send a picture, use an image tag with dc-image inside a message, with the web address of the image in src. Always fill in the alt text, so anyone using a screen reader knows what's in the picture:

<div class="dc-message">
  <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">Today at 9:02 AM</span></p>
  <p><span class="dc-text">my captain</span></p>
  <p><img class="dc-image" src="https://64.media.tumblr.com/c3c4ecb5bfed8fa9f0590c54206ddb30/cff2318529321620-44/s1280x1920/42befcc40a517e1f202dda40783be2ffb95c1d92.pnj" alt="Macklin Celebrini at the IHF Worlds, dressed in his red jersey and black helmet. He's surrounded by sparkles, a red vignette, and hearts containing the Canadian flag"></p>
</div>

Custom emoji work the same way, with the emoji's picture hosted somewhere else. dc-emoji is a big emoji sent on its own, like <p><img class="dc-emoji" src="..." alt="emoji name"></p>, and dc-inline-emoji is a small one that sits in a line of text.

16.20 Link Embeds

For the preview box Discord makes when someone posts a link, add a dc-embed after the line with the link in it:

<div class="dc-message">
  <p><b class="dc-name colour6">DropSomeKnowledge</b> <span class="dc-time">Today at 9:10 AM</span></p>
  <p><span class="dc-text">this is the best thing I've ever watched <span class="dc-link">https://youtube.com/watch?v=robots</span></span></p>
  <p>
    <span class="dc-embed">
      <span class="dc-embed-text">YouTube</span><br>
      <span class="dc-embed-text"><b>Cats on Keyboards</b></span><br>
      <span class="dc-embed-title dc-link">10 Hours of Cats Pressing Buttons</span>
    </span>
  </p>
</div>

Use a real link with the <a> tag, or write it as ordinary text with the class dc-link to make it look like one. To add a preview picture, put an image with the class dc-embed-image inside the embed, at the end.

fake-link from the Core, Themes, and Extras chapter works here too, and looks exactly the same as dc-link, so you can use whichever you like.

16.21 Blockquotes and Code Blocks

To make it look like a character has quoted someone, or sent some code, use these:

<div class="dc-message">
  <p><b class="dc-name colour1">SwankyUsername</b> <span class="dc-time">Today at 9:12 AM</span></p>
  <p>
    <span class="dc-quote">
      <span class="dc-quote-line"></span>
      <span class="dc-text dc-quote-text">this is the best thing I've ever watched</span>
    </span>
  </p>
  <p><span class="dc-text dc-code">print("you need to go outside")</span></p>
</div>

16.22 Chat Box

For the "Message #general" box at the bottom of the window, use this, with your own channel name in place of the text. It goes after all of the messages:

<div class="dc-input">
  <p><span class="dc-input-text">Message #general</span></p>
</div>

16.23 Typing Indicator

To show that one or more people are typing, add this after the chat box:

<div class="dc-typing">
  <p>
    <span class="typing-indicator"><span></span><span></span><span></span></span>
    <span class="dc-typing-text"><b>SwankyUsername</b> and <b>DropSomeKnowledge</b> are typing...</span>
  </p>
</div>

Put the names of everyone who's typing in dc-typing-text.

16.24 Direct Messages

For a DM, use at-symbol on the channel header, with the person's name, and put their name in the chat box too, like the direct message at the top of the chapter:

<div class="dc-header at-symbol">
  <h3><span class="hide">@ </span>DropSomeKnowledge</h3>
</div>

16.25 Long Chats

Once a Discord chat gets long, the window stops growing at about the height of a phone screen and scrolls instead, so one long conversation doesn't take over the page - like the server channel at the top of the chapter. There's nothing to add - it just happens. Unlike the phone-style chats, the whole window scrolls, so the channel header and the chat box move with the messages rather than staying put.

If you'd rather show the whole conversation at once, add no-scroll to the container: <div class="dc theme-auto no-scroll">. The window then grows as tall as it needs to. That's worth doing for a short burst of messages in the middle of a scene, so nobody misses a message tucked away in a scroll box (see Scrolling Long Chats, in the Core, Themes, and Extras chapter).