Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Additional Tags:
Language:
English
Stats:
Published:
2023-01-26
Completed:
2023-01-26
Words:
4,565
Chapters:
3/3
Comments:
19
Kudos:
112
Bookmarks:
82
Hits:
3,234

Discord Work Skin

Summary:

A Discord workskin that supports most Discord-style markup. Includes layouts for channels, DMs, and Group Chats. Darkmode only.

Notes:

I saw BookKeep and UnpredictableArtists' skins and inspiration struck me to combine them into an Obsidian CSS snippet... which got turned back into an AO3 Skin.

All the characters in this example are from Max Steel!

Chapter 1: Live Example

Chapter Text

With this workskin, you can create Discord chats with many of the expected features:

# general | y'all know what general's for, right?

Max 01/17/2023 1:56 PM
i don't think Hello World makes any sense here tho

AwesomeAksteel 01/17/2023 1:56 PM
that's cuz youre not the tech guy
just trust me on this, k?

Max 01/17/2023 1:57 PM
ok...

January 20, 2023

Syd the Science Kid Today at 3:01 PM
I finally posted the interview!

Kirby Kowalski Today at 3:01 PM
where link

Syd the Science Kid Today at 3:02 PM
https://www.youtube.com/watch?v=d8_bD1kjiHI
YouTube
SydneyGardner
An Interview with Max Steel steel shushing max

Replying to message by: Syd the Science Kid https://www.youtube.com/watch?v=d8_bD1kjiHI

Max Today at 3:05 PM
congratulations!
[This emoji: 👆 1 ] 🎉 [Thank you emoji: TY! 1 ]

Raynestorm Today at 3:07 PM
As Max's personal old-time country lawyer, I must, I say, I MUST object. Also, I'd kill for a pair of suspenders and a pair of thumbs right now. Iconic

AwesomeAksteel Today at 3:07 PM
thx! had to say something when max nearly blurted out we were looking for the turbostar

Raynestorm Today at 3:07 PM
The what?

AwesomeAksteel Today at 3:07 PM
Spoiler tunafish sandwich

Max Today at 3:08 PM
steel thats a tuna sandwich

Replying to message by: AwesomeAksteel that's cuz youre not the tech guy

cool berto 😎 Today at 3:08 PM
actually i was looking at your code and i think you put an infinite loop here: public void main(String[] args) {   int i = 0;   while (i < 10){    System.out.println("Hello world!");   } }

Max Today at 3:08 PM
that's rough buddy (edited)

AwesomeAksteel Today at 3:09 PM
i saw that @Max

Max Today at 3:09 PM
dw about it @AwesomeAksteel

AwesomeAksteel Today at 3:09 PM
hey btw @ntek, where's tj and cytro?

New

cool berto 😎 Today at 3:10 PM
on it 👍

Hey! Listen! CYTRO has joined! Today at 3:11 PM

CYTRO [Verified Bot] Today at 12:00 PM
Beginning Combat Simulation.
Prepare yourselves, @TurboWarriors.

Message #general

Raynestorm, Max and cool berto 😎 are typing...

You can also create DMs:

@ Max

Steel Yesterday at 11:59 PM
hey pick up some chips on the way home
we need it for bad movie marathon
[Thumbs up emoji: 👍 1 ]

May 10, 2023 New

Max Today at 9:40 AM
wait why are you texting me this
and why were you texting me this at midnight

Message @Max

And Group Chats:

The Band

Kirby Kowalski started a call that lasted 2 hours. Today at 12:11 PM

Kirby Kowalski Today at 2:53 PM
Yo we're gonna sound so bodacious at the Battle of the Bands tomorrow!

Sydney Today at 2:54 PM
hell yeah!
you better not b late, @Max and @Steel!

[Typing: we'll try! ]

To add your own roles, insert or replace the colors and names at this part of the CSS:

/* Role color, followed by ping colors */
#workskin .discord.darkmode .none {color: white;}

#workskin .discord .ntek { color: rgb(46, 204, 113) !important }
#workskin .discord .ping.ntek { background-color: rgba(46, 204, 113, 0.1) !important; }
#workskin .discord .ping.ntek:hover { background-color: rgba(46, 204, 113, 0.3) !important; }

Similarly, to add your own users, insert or replace the urls and names at this part of the CSS:

/* User profile pictures */
#workskin .discord .syd::before { 
        background-image: url(https://cdn.discordapp.com/attachments/1066836425728864376/1066836438617960558/image.png); 
}

This workskin also comes with some predefined emojis. I recommend that if you have any emojis or images you expect to use a lot, that you add them in this section:

/* Some common emojis */
#workskin .discord .thumbsup-emoji { 
        content: url("https://cdn.discordapp.com/attachments/1066836425728864376/1067733655339941929/thumbsup.png"); 
}
#workskin .discord .tada-emoji { 
        content: url("https://cdn.discordapp.com/attachments/1066836425728864376/1067732756957777991/tada.png"); 
}
#workskin .discord .this-emoji, 
#workskin .discord .point-up-emoji { 
        content: url("https://cdn.discordapp.com/attachments/1066836425728864376/1067734763848347668/pointup.png"); 
}
#workskin .discord .ty-emoji {
        content: url("https://cdn.discordapp.com/attachments/1066836425728864376/1067736199415992401/ty.png");
}