Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Collections:
AO3 Social Media AU Work Skins, Ao3 Skins, Fanfiction Reference Works
Stats:
Published:
2026-06-13
Completed:
2026-06-23
Words:
8,926
Chapters:
3/3
Comments:
3
Kudos:
13
Bookmarks:
10
Hits:
296

Reddit Mobile Workskin Documentation

Summary:

This is a workskin meant to mimic the Reddit mobile UI, updated as of 2026. Features include customisable default display pictures, cross-posting, pinning, locking, archiving, having moderators, lightmode, darkmode, and more.

Notes:

if anyone stumbles upon this, feel free to use any of the code with credit.

2026/06/23:
Last Major HTML+CSS Update hopefully

2026/06/29:
Minor update to CSS.
Adjustment made to thumbnail cropping for external links. Adjustment to image sizing for posts and crossposts. No change to HTML.

Chapter 1: Documentation

Notes:

(See the end of the chapter for notes.)

Chapter Text

Brief Introduction

While this is not a HTML/CSS tutorial, I have tried to make this work as accessible as possible even to users without much experience in workskins. If there are any questions, feel free to ask in the comments.

The full dark mode CSS is found in Chapter 2, and light mode in Chapter 3. The HTML can be found under the "HTML Code" dropdown tabs.

Table of Contents:

  • Reddit Posts
    • Basic Functionality
    • Images in Posts
    • Post Flairs
    • External Links
    • Subreddit Display Icons
    • Cross Posts
  • Comments and Replies
    • Basic Functionality
    • Reply Nesting
    • Show "more replies"
    • Images in Comments
    • OP label
    • User Display Pictures
  • User Flairs
    • User Flairs on Posts
    • User Flairs on Comments
  • Pinning, Locking, and Archiving
    • Locked Posts and Comments
    • Archived Posts and Comments
  • Other Features
    • MOD Posts and Comments
    • Up and Down Votes

Reddit Posts

Basic Functionality

All posts are contained within <p class="post-container"> elements.
Edit the number of votes inside the stat-votes.
Edit the number of replies after the icon-reply element.

r/subreddit u/useruser 1m This is a reddit post This is a reddit post.
This is an embedded link.
The buttons below can be hovered over. 1 | 0

HTML Code

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-ts">1m</span>
                </span>
            </span>
        </span>
        <span class="m-post-title">This is a reddit post</span>
        <span>
            This is a reddit post.<br>
            This is an <a href="https://youtu.be/dQw4w9WgXcQ?si=BWc7X8wFLFY8bRuS">embedded link</a>.<br>
            The buttons below can be hovered over.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>0</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

Images in Posts

Posts can display images.
Add your img after the m-post-title or m-post-flair elements.

r/subreddit u/useruser 2y This is another reddit post This is a reddit post.
This post also has a photo attached. 101 | 2k

HTML Code

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-ts">2y</span>
                </span>
            </span>
        </span>
        <span class="m-post-title">This is another reddit post</span>
        <!-- attached media -->
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/JackXArik.png/500px-JackXArik.png">
        <span>
            This is a reddit post.<br>
            This post also has a photo attached.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>101</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>2k</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

Post Flairs

To add a flair to a post, add

<span class="m-post-flair">...</span>

after the m-post-title. To change the text and background color of the flair, append the color-* and bg-* classes respectively.

r/subreddit u/useruser 2y This post has the default flair POST FLAIR This post flair has no extra classes, so it uses the default color scheme. 101 | 2k

Full HTML Code

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-ts">2y</span>
                </span>
            </span>
        </span>
        <span class="m-post-title">This post has the default flair</span>
        <span class="m-post-flair">POST FLAIR</span>
        <span>
            This post flair has no extra classes, so it uses the default color scheme.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>101</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>2k</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

r/subreddit u/useruser 2y This post has a red flair with white text COLORED FLAIR The flair color is alterred by apending the "bg-red color-white" classes. 101 | 2k

Red Flair HTML Code

<span class="m-post-flair bg-red color-white">COLORED FLAIR</span>

r/subreddit u/useruser 2y This post has a gold flair with black text 🐝 COLORED FLAIR The flair color is alterred by apending the "bg-gold color-black" classes. 101 | 2k

Yellow Flair HTML Code

<span class="m-post-flair bg-gold color-black">🐝 COLORED FLAIR</span>

External Links

Posts can contain links to external sites.
To display the source of the link, add

<span class="m-post-source">source.com</span>

after m-post-ts.

To add the external link button, use the span after "external link formatting" above the post text body.

To make the link a working one, add href="..." to the a tag element. To disable the link, simply remove href="...".

r/subreddit u/useruser 1m source.com This post contains a link to somewhere on the web. POST FLAIR The linked source leads to the website "source.com". To make it a working link, add a source via href="...". This is the default background of the button if no thumbnail is included. 1 | 0

Code for Title + Link Button

<span class="flex-row align-items-center">
    <span class="flex-col">
        <span class="m-post-title">
            This post contains a link to somewhere on the web.
        </span>
        <span class="m-post-flair">POST FLAIR</span>
    </span>
    <a class="m-post-external-link" href="https://youtu.be/dQw4w9WgXcQ?si=BWc7X8wFLFY8bRuS">
        <img src="https://i.imgur.com/3XB2hhX.png" class="icon">
    </a>
</span>
Full HTML Code

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-ts">1m</span>
                    <!-- link source -->
                    <span class="m-post-source">source.com</span>
                </span>
            </span>
        </span>
        <!-- external link formatting -->
        <span class="flex-row align-items-center">
            <span class="flex-col">
                <span class="m-post-title">
                    This post contains a link to somewhere on the web.
                </span>
                <span class="m-post-flair">POST FLAIR</span>
            </span>
            <a class="m-post-external-link" href="https://youtu.be/dQw4w9WgXcQ?si=BWc7X8wFLFY8bRuS">
                <img src="https://i.imgur.com/3XB2hhX.png" class="icon">
            </a>
        </span>
        <span>
            The linked source leads to the website "source.com".
            To make it a working link, add a source via href="...".
            This is the default
            background of the button if no thumbnail is included.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>0</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

Add a thumbnail to the external link by adding

<img class="link-thumbnail" src="...">

inside m-post-external-link. Use the link-thumbnail class for the image.

r/subreddit u/useruser 1m yaoi.com Hot Steamy Yaoi in your area POST FLAIR Get your yaoi here at yaoi.com! 1 | 0

Code for Link Button + Thumbnail

<span class="flex-row align-items-center">
    <span class="flex-col">
        <span class="m-post-title">
            Hot Steamy Yaoi in your area
        </span>
        <span class="m-post-flair">POST FLAIR</span>
    </span>
    <a class="m-post-external-link" href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/JackXArik.png/500px-JackXArik.png">
        <!-- thumbnail -->
        <img class="link-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/JackXArik.png/500px-JackXArik.png">
        <img src="https://i.imgur.com/3XB2hhX.png" class="icon">
    </a>
</span>

Subreddit Display Icons

To use the default subreddit display icon, use

<span class="dp-sub-default"></span>

To change the text and background color, append the color-* and bg-* classes respectively.

r/subreddit u/useruser 2y This subreddit has the default icon and color scheme For this, use the dp-sub-default class and no extra classes. 1 | 0

Full HTML Code

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <!-- subreddit display icon -->
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-ts">2y</span>
                </span>
            </span>
        </span>
        <span class="m-post-title">This subreddit has the default icon and color scheme</span>
        <span>
            For this, use the dp-sub-default class and no extra classes.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>0</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

r/subreddit u/useruser 2y This subreddit has the default icon with another color Using "bg-blue". 1 | 0

Display Picture HTML Code

<span class="dp-sub-default bg-blue"></span>

r/subreddit u/useruser 2y This subreddit has yet another colored icon Using "bg-green color-black" 1 | 0

Display Picture HTML Code

<span class="dp-sub-default bg-green color-black"></span>


To use a your own image as the subreddit display picture, use

<img class="dp-sub" src="...">

in place of <span class="dp-sub-default">.

r/yaoi u/yaoi_enjoyer_123 2y This subreddit has a custom display icon Upload your image to imgur (if required) and add your image. Use the "dp-sub" class. 1 | 0

Display Picture HTML Code

<img class="dp-sub" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/JackXArik.png/500px-JackXArik.png">

Cross Posts

To add a cross post, add a

<span class="c-post">...</span>

before the post text body.

Edit the upvotes and comments of the crosspost in c-post-stats.

r/subreddit u/useruser 2y This post contains a crosspost from another community POST FLAIR r/anothersub 7h u/anotheruser This is a crosspost 1 upvote 3 comments Add a "c-post" underneath the title for to reference another post. 1 | 0

Cross Post Code

<span class="c-post">
    <span class="c-post-header">
        <span class="c-post-sub">r/anothersub</span>
        <span class="c-post-ts">7h</span>
        <span class="c-post-user">u/anotheruser</span>
    </span>
    <span class="c-post-title">This is a crosspost</span>
    <span class="c-post-stats">
        <span>1 upvote</span>
        <span>3 comments</span>
    </span>
</span>
Full HTML Code

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-ts">2y</span>
                </span>
            </span>
        </span>
        <span class="m-post-title">This post contains a crosspost from another community</span>
        <span class="m-post-flair">POST FLAIR</span>
        <!-- cross post -->
        <span class="c-post">
            <span class="c-post-header">
                <span class="c-post-sub">r/anothersub</span>
                <span class="c-post-ts">7h</span>
                <span class="c-post-user">u/anotheruser</span>
            </span>
            <span class="c-post-title">This is a crosspost</span>
            <span class="c-post-stats">
                <span>1 upvote</span>
                <span>3 comments</span>
            </span>
        </span>
        <span>
            Add a "c-post" underneath the title for to reference another post.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>0</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

Crossposts can also contain images. Add your img after c-post-title

r/subreddit u/useruser 2y This post contains a crosspost from another community POST FLAIR r/anothersub 7h u/anotheruser This is a crosspost 1.2k upvotes 306 comments This is a crosspost with an image. 1 | 0

Cross Post Code

<span class="c-post">
    <span class="c-post-header">
        <span class="c-post-sub">r/anothersub</span>
        <span class="c-post-ts">7h</span>
        <span class="c-post-user">u/anotheruser</span>
    </span>
    <span class="c-post-title">This is a crosspost</span>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/JackXArik.png/500px-JackXArik.png">
    <span class="c-post-stats">
        <span>1.2k upvotes</span>
        <span>306 comments</span>
    </span>
</span>

Comments and Replies

Basic Functionality

To add a reply to a post, add

<span class="reply">  ...  </span>

elements after the m-post span element.

Edit the number of votes in stat-votes of the reply.

r/subreddit u/iamop 2y This is a reddit post This is a post. 1 | 1 Random User 1m This is a simple reply to the main post. Edit the number of votes in the "stat-votes". ⋮ 123 Some Gal 1m This is another reply. People seem to not like this one. ⋮ -10

Reply HTML Code

<span class="reply">
    <span class="flex-row align-items-center">
        <img class="dp-user" src="https://i.imgur.com/FrAE9lA.png">
        <span class="flex-col overflow-ellipsis">
            <span class="flex-row align-items-center">
                <span class="reply-user">Random User</span>
                <span class="reply-ts">1m</span>
            </span>
            <span class="reply-flair-container"></span>
        </span>
    </span>
    <span>
        This is a simple reply to the main post. Edit the number of votes in the "stat-votes".
    </span>
    <span class="reply-btn-container">
        <span>⋮</span>
        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
        <span class="stat-votes">
            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
            <span>123</span>
            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
        </span>
    </span>
</span>
Full HTML Code

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/iamop</span>
                    <span class="m-post-ts">2y</span>
                </span>
            </span>
        </span>
        <span class="m-post-title">This is a reddit post</span>
        <span>
            This is a post.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>1</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
    <!-- replies below -->
    <span class="reply">
        <span class="flex-row align-items-center">
            <img class="dp-user" src="https://i.imgur.com/FrAE9lA.png">
            <span class="flex-col overflow-ellipsis">
                <span class="flex-row align-items-center">
                    <span class="reply-user">Random User</span>
                    <span class="reply-ts">1m</span>
                </span>
                <span class="reply-flair-container"></span>
            </span>
        </span>
        <span>
            This is a simple reply to the main post. Edit the number of votes in the "stat-votes".
        </span>
        <span class="reply-btn-container">
            <span>⋮</span>
            <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
            <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>123</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
        </span>
    </span>
    <span class="reply">
        <span class="flex-row align-items-center">
            <img class="dp-user bg-orange" src="https://i.imgur.com/FrAE9lA.png">
            <span class="flex-col overflow-ellipsis">
                <span class="flex-row align-items-center">
                    <span class="reply-user">Some Gal</span>
                    <span class="reply-ts">1m</span>
                </span>
                <span class="reply-flair-container"></span>
            </span>
        </span>
        <span>
            This is another reply. People seem to not like this one.
        </span>
        <span class="reply-btn-container">
            <span>⋮</span>
            <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
            <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>-10</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
        </span>
    </span>
</p>

Reply nesting

To add a reply to a comment, add a <span class="reply"> after the reply-btn-container element.

Note that the left-hand border for nested replies is formatted automatically. All <span class="reply"> are coded in the same way and are interchangeable, minus the nesting.

r/subreddit u/iamop 2y This is a reddit post This is a post. 1 | 1 Some Guy 1m User Flair Here This is a reply. ⋮ 123 Some Guy 1m User Flair Here This is a reply to the reply. ⋮ 1 Some Lady 1m This is a reply to the reply ⋮ 1 Random User 1m This is a double nested reply. ⋮ -1 Some Lady 1m This is a triple nested reply. ⋮ 1 Some Guy 1m User Flair Here This is a quadruple nested reply. ⋮ 1 Some Guy 1m User Flair Here This is a reply to the reply. ⋮ 1

Full HTML Code

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/iamop</span>
                    <span class="m-post-ts">2y</span>
                </span>
            </span>
        </span>
        <span class="m-post-title">This is a reddit post</span>
        <span>
            This is a post.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>1</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
    <!-- replies below -->
    <span class="reply">
        <span class="flex-row align-items-center">
            <img class="dp-user bg-gold" src="https://i.imgur.com/FrAE9lA.png">
            <span class="flex-col overflow-ellipsis">
                <span class="flex-row align-items-center">
                    <span class="reply-user">Some Guy</span>
                    <span class="reply-ts">1m</span>
                </span>
                <span class="reply-flair-container">
                    <span>User Flair Here</span>
                </span>
            </span>
        </span>
        <span>
            This is a reply.
        </span>
        <span class="reply-btn-container">
            <span>⋮</span>
            <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
            <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>123</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
        </span>
        <!-- replies below -->
        <span class="reply">
            <span class="flex-row align-items-center">
                <img class="dp-user bg-gold" src="https://i.imgur.com/FrAE9lA.png">
                <span class="flex-col overflow-ellipsis">
                    <span class="flex-row align-items-center">
                        <span class="reply-user">Some Guy</span>
                        <span class="reply-ts">1m</span>
                    </span>
                    <span class="reply-flair-container">
                        <span>User Flair Here</span>
                    </span>
                </span>
            </span>
            <span>
                This is a reply to the reply.
            </span>
            <span class="reply-btn-container">
                <span>⋮</span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
                <span class="stat-votes">
                    <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                    <span>1</span>
                    <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
                </span>
            </span>
        </span>
        <span class="reply">
            <span class="flex-row align-items-center">
                <img class="dp-user bg-pink" src="https://i.imgur.com/FrAE9lA.png">
                <span class="flex-col overflow-ellipsis">
                    <span class="flex-row align-items-center">
                        <span class="reply-user">Some Lady</span>
                        <span class="reply-ts">1m</span>
                    </span>
                    <span class="reply-flair-container"></span>
                </span>
            </span>
            <span>
                This is a reply to the reply
            </span>
            <span class="reply-btn-container">
                <span>⋮</span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
                <span class="stat-votes">
                    <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                    <span>1</span>
                    <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
                </span>
            </span>
            <!-- replies below -->
            <span class="reply">
                <span class="flex-row align-items-center">
                    <img class="dp-user" src="https://i.imgur.com/FrAE9lA.png">
                    <span class="flex-col overflow-ellipsis">
                        <span class="flex-row align-items-center">
                            <span class="reply-user">Random User</span>
                            <span class="reply-ts">1m</span>
                        </span>
                        <span class="reply-flair-container"></span>
                    </span>
                </span>
                <span>
                    This is a double nested reply.
                </span>
                <span class="reply-btn-container">
                    <span>⋮</span>
                    <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                    <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
                    <span class="stat-votes">
                        <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                        <span>-1</span>
                        <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
                    </span>
                </span>
                <span class="reply">
                    <span class="flex-row align-items-center">
                        <!-- reply user display picture -->
                        <img class="dp-user bg-pink" src="https://i.imgur.com/FrAE9lA.png">
                        <span class="flex-col overflow-ellipsis">
                            <span class="flex-row align-items-center">
                                <span class="reply-user">Some Lady</span>
                                <span class="reply-ts">1m</span>
                            </span>
                            <span class="reply-flair-container"></span>
                        </span>
                    </span>
                    <span>
                        This is a triple nested reply.
                    </span>
                    <span class="reply-btn-container">
                        <span>⋮</span>
                        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
                        <span class="stat-votes">
                            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                            <span>1</span>
                            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
                        </span>
                    </span>
                    <span class="reply">
                        <span class="flex-row align-items-center">
                            <img class="dp-user bg-gold" src="https://i.imgur.com/FrAE9lA.png">
                            <span class="flex-col overflow-ellipsis">
                                <span class="flex-row align-items-center">
                                    <span class="reply-user">Some Guy</span>
                                    <span class="reply-ts">1m</span>
                                </span>
                                <span class="reply-flair-container">
                                    <span>User Flair Here</span>
                                </span>
                            </span>
                        </span>
                        <span>
                            This is a quadruple nested reply.
                        </span>
                        <span class="reply-btn-container">
                            <span>⋮</span>
                            <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                            <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
                            <span class="stat-votes">
                                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                                <span>1</span>
                                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
                            </span>
                        </span>
                    </span>
                </span>
            </span>
        </span>
        <span class="reply">
            <span class="flex-row align-items-center">
                <img class="dp-user bg-gold" src="https://i.imgur.com/FrAE9lA.png">
                <span class="flex-col overflow-ellipsis">
                    <span class="flex-row align-items-center">
                        <span class="reply-user">Some Guy</span>
                        <span class="reply-ts">1m</span>
                    </span>
                    <span class="reply-flair-container">
                        <span>User Flair Here</span>
                    </span>
                </span>
            </span>
            <span>
                This is a reply to the reply.
            </span>
            <span class="reply-btn-container">
                <span>⋮</span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
                <span class="stat-votes">
                    <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                    <span>1</span>
                    <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
                </span>
            </span>
        </span>
    </span>
</p>

Show "more replies"

Use 

<span class="reply reply-more">
    <span>143 more replies</span>
</span>

to show there being more replies in the thread.

r/subreddit u/iamop 2y This is a reddit post This is a post. 1 | 1 Random User 1m This comment has more replies. ⋮ 123 143 more replies

Code for a comment with "more replies"

<span class="reply">
    <span class="flex-row align-items-center">
        <img class="dp-user" src="https://i.imgur.com/FrAE9lA.png">
        <span class="flex-col overflow-ellipsis">
            <span class="flex-row align-items-center">
                <span class="reply-user">Random User</span>
                <span class="reply-ts">1m</span>
            </span>
            <span class="reply-flair-container"></span>
        </span>
    </span>
    <span>
        This comment has more replies.
    </span>
    <span class="reply-btn-container">
        <span>⋮</span>
        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
        <span class="stat-votes">
            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
            <span>123</span>
            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
        </span>
    </span>
    <span class="reply reply-more">
        <span>143 more replies</span>
    </span>
</span>

Images in Comments

To have a comment contain an image, add your img above the reply-btn-container element.

r/subreddit u/iamop 2y This is a reddit post This is a post. 1 | 1 Random User 1m This is a reply with an image attached. ⋮ 123

Comment HTML Code

<span class="reply">
    <span class="flex-row align-items-center">
        <img class="dp-user" src="https://i.imgur.com/FrAE9lA.png">
        <span class="flex-col overflow-ellipsis">
            <span class="flex-row align-items-center">
                <span class="reply-user">Random User</span>
                <span class="reply-ts">1m</span>
            </span>
            <span class="reply-flair-container"></span>
        </span>
    </span>
    <span>
        This is a reply with an image attached.
    </span>
    <!-- attached media -->
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/JackXArik.png/500px-JackXArik.png">
    <span class="reply-btn-container">
        <span>⋮</span>
        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
        <span class="stat-votes">
            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
            <span>123</span>
            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
        </span>
    </span>
</span>

OP label

To mark a user as the OP, append the is-op class to the reply-user element.

I am OP 1m I am the OP. ⋮ 1

OP Comment HTML Code

<span class="reply">
    <span class="flex-row align-items-center">
        <img class="dp-user bg-purple" src="https://i.imgur.com/FrAE9lA.png">
        <span class="flex-col overflow-ellipsis">
            <span class="flex-row align-items-center">
                <span class="reply-user is-op">I am OP</span>
                <span class="reply-ts">1m</span>
            </span>
            <span class="reply-flair-container"></span>
        </span>
    </span>
    <span>
        I am the OP.
    </span>
    <span class="reply-btn-container">
        <span>⋮</span>
        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
        <span class="stat-votes">
            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
            <span>1</span>
            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
        </span>
    </span>
</span>

User Display Pictures

To use the default user profile picture, use

<img class="dp-user" src="https://i.imgur.com/FrAE9lA.png">

To change the background color, append the bg-* classes to the img.

Random User 1m This user has a default profile picture with the default color scheme. ⋮ 1 Some Person 1m bg-teal ⋮ 1 Some Guy 1m bg-gold ⋮ 1 Some Gal 1m bg-orange ⋮ 1 Some Dude 1m bg-purple ⋮ 1 Some Lady 1m bg-pink. Feel free to add your own colors via the workskin. ⋮ 1

Teal Display Picture HTML Code

<img class="dp-user bg-teal" src="https://i.imgur.com/FrAE9lA.png">

To have a custom user display picture, replace the img url with the link to your image.

Yaoi Enjoyer 1m No. 1 enjoyer Wow. ⋮ 1

Display Picture HTML Code

<img class="dp-user" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/JackXArik.png/500px-JackXArik.png">

User Flairs

User Flairs on Posts

To add a user flair for the OP, add

<span class="m-post-user-flair">...</span>

after the m-post-user element.

r/subreddit u/useruser I am fabulous 1m This is a reddit post The OP for this post has a user flair. This OP is fabulous. 1 | 0

Full HTML Code

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-user-flair">I am fabulous</span>
                    <span class="m-post-ts">1m</span>
                </span>
            </span>
        </span>
        <span class="m-post-title">This is a reddit post</span>
        <span>
            The OP for this post has a user flair. This OP is fabulous.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>0</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

Users with "Top 1% Poster" on their profile can have the flair appear on their posts. To show this flair, add 


<span class="m-post-flair">
    😎 Top 1% Poster
</span>

before the m-post-title.

r/subreddit u/useruser I am fabulous 2y 😎 Top 1% Poster This post has a gold flair with black text 🐝 COLORED FLAIR The flair color is alterred by apending the "bg-gold color-black" classes. 101 | 2k

Full HTML Code

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-user-flair">I am fabulous</span>
                    <span class="m-post-ts">2y</span>
                </span>
            </span>
        </span>
        <span class="m-post-flair">😎 Top 1% Poster</span>
        <span class="m-post-title">This post has a gold flair with black text</span>
        <span class="m-post-flair bg-gold color-black">🐝 COLORED FLAIR</span>
        <span>
            The flair color is alterred by apending the "bg-gold color-black" classes.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>101</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>2k</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

User Flairs on Comments

To add a flair to the commenting user, add a span inside the reply-flair-container element.

To my knowledge, each user can only have one user flair, the exception being the extra "Top 1% Commenter" flair. However, I've included the ability to have multiple flairs anyway. Simply add more span elements inside the "container" for more flairs.

Some Guy 1m User Flair Here I have a user flair. ⋮ 1

Comment HTML Code

<span class="reply">
    <span class="flex-row align-items-center">
        <img class="dp-user bg-gold" src="https://i.imgur.com/FrAE9lA.png">
        <span class="flex-col overflow-ellipsis">
            <span class="flex-row align-items-center">
                <span class="reply-user">Some Guy</span>
                <span class="reply-ts">1m</span>
            </span>
            <span class="reply-flair-container">
                <span>User Flair Here</span>
            </span>
        </span>
    </span>
    <span>
        I have a user flair.
    </span>
    <span class="reply-btn-container">
        <span>⋮</span>
        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
        <span class="stat-votes">
            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
            <span>1</span>
            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
        </span>
    </span>
</span>

As far as I know, flairs just appear as grey text on mobile, and have no backgrounds or colors. However, you can still add colorful flairs with backgrounds with this workskin.

To add a background to the flair, add the reply-flair-bg class. To change the text and background colors, append color-* and bg-* classes.

Some Guy 1m User Flair Here 😎 Top 1% commenter I have a user flair. ⋮ 1

Comment HTML Code

<span class="reply">
    <span class="flex-row align-items-center">
        <img class="dp-user bg-gold" src="https://i.imgur.com/FrAE9lA.png">
        <span class="flex-col overflow-ellipsis">
            <span class="flex-row align-items-center">
                <span class="reply-user">Some Guy</span>
                <span class="reply-ts">1m</span>
            </span>
            <span class="reply-flair-container">
                <span class="reply-flair-bg bg-orange color-black">User Flair Here</span>
                <span class="reply-flair-bg">😎 Top 1% commenter</span>
            </span>
        </span>
    </span>
    <span>
        I have a user flair.
    </span>
    <span class="reply-btn-container">
        <span>⋮</span>
        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
        <span class="stat-votes">
            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
            <span>1</span>
            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
        </span>
    </span>
</span>
Top 1% Commenter Flair Code

<span class="reply-flair-bg">😎 Top 1% commenter</span>

Pinning, Locking, and Archiving

Posts or replies can be pinned, locked, or archived.

To display the various status icons, add

<span class="status-container"> ... </span>

below "Add status icons here" with the appropriate icons inside.

The order for the different icons to appear is "pinned", "locked", then "archived".

r/subreddit u/useruser 1m This is a reddit post This post is pinned, locked, and archived. 1,234 | 0

Full HTML Code

<p class="post-container is-locked is-archived">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-ts">1m</span>
                </span>
            </span>
            <!-- Add status icons here -->
            <span class="status-container">
                <!-- pinned -->
                <img src="https://i.imgur.com/P6wR3wN.png" class="icon">
                <!-- locked -->
                <img src="https://i.imgur.com/7y4JOPu.png" class="icon">
                <!-- archived -->
                <img src="https://i.imgur.com/6eI7Emm.png" class="icon">
            </span>
        </span>
        <span class="m-post-title">This is a reddit post</span>
        <span>
            This post is pinned, locked, and archived.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1,234</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>0</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>
Pinned Icon Code

<img src="https://i.imgur.com/P6wR3wN.png" class="icon">
Locked Icon Code

<img src="https://i.imgur.com/7y4JOPu.png" class="icon">
Archived Icon Code

<img src="https://i.imgur.com/6eI7Emm.png" class="icon">

r/subreddit u/useruser 1m This is a reddit post This is a post. 1,234 | 0 Random User 1m Same thing for replies, add the icons as shown here. ⋮ 123

Comment HTML Code

<span class="reply is-locked is-archived">
    <span class="flex-row align-items-center">
        <img class="dp-user" src="https://i.imgur.com/FrAE9lA.png">
        <span class="flex-col overflow-ellipsis">
            <span class="flex-row align-items-center">
                <span class="reply-user">Random User</span>
                <span class="reply-ts">1m</span>
            </span>
            <span class="reply-flair-container"></span>
        </span>
        <!-- Add status icons here -->
        <span class="status-container">
            <!-- pinned -->
            <img src="https://i.imgur.com/P6wR3wN.png" class="icon">
            <!-- locked -->
            <img src="https://i.imgur.com/7y4JOPu.png" class="icon">
            <!-- archived -->
            <img src="https://i.imgur.com/6eI7Emm.png" class="icon">
        </span>
    </span>
    <span>
        Same thing for replies, add the icons as shown here.
    </span>
    <span class="reply-btn-container">
        <span>⋮</span>
        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
        <span class="stat-votes">
            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
            <span>123</span>
            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
        </span>
    </span>
</span>

Locked Posts and Comments

Locked posts/comments can no longer be replied to. However you can still upvote them.

To "lock" a post, append the "is-locked" class to the post-container element. This will grey out the reply buttons for the post and all its comments.

r/subreddit u/useruser 1m This is a reddit post This post has been locked. 1,234 | 0 Random User 1m Replies to all comments are automatically disabled. ⋮ 123 Random User 1m Replies to all comments are also disabled. ⋮ 123

Post HTML Code

<p class="post-container is-locked">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-ts">1m</span>
                </span>
            </span>
            <!-- Add status icons here -->
            <span class="status-container">
                <!-- locked -->
                <img src="https://i.imgur.com/7y4JOPu.png" class="icon">
            </span>
        </span>
        <span class="m-post-title">This is a reddit post</span>
        <span>
            This post has been locked.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1,234</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>0</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

To "lock" a comment, append the "is-locked" class to the reply element. This will grey out the reply buttons for only this comment and its comments.

r/subreddit u/useruser 1m This is a reddit post This post is not locked. 1,234 | 0 Random User 1m This reply has been locked. ⋮ 123 Random User 1m Replies are automatically disabled. ⋮ 123 Random User 1m This comment can still be replied to. ⋮ 123

Comment HTML Code

<span class="reply is-locked">
    <span class="flex-row align-items-center">
        <img class="dp-user" src="https://i.imgur.com/FrAE9lA.png">
        <span class="flex-col overflow-ellipsis">
            <span class="flex-row align-items-center">
                <span class="reply-user">Random User</span>
                <span class="reply-ts">1m</span>
            </span>
            <span class="reply-flair-container"></span>
        </span>
        <!-- Add status icons here -->
        <span class="status-container">
            <!-- locked -->
            <img src="https://i.imgur.com/7y4JOPu.png" class="icon">
        </span>
    </span>
    <span>
        This reply has been locked.
    </span>
    <span class="reply-btn-container">
        <span>⋮</span>
        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
        <span class="stat-votes">
            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
            <span>123</span>
            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
        </span>
    </span>
</span>

Archived Posts and Comments

Archived posts/comments cannot be replied to or voted on.

To "archive" a post, append the "is-archived" class to the post-container. This will grey out the reply and vote buttons for the post and all its comments.

r/subreddit u/useruser 1m This is a reddit post This post has been archived. 1,234 | 0 Random User 1m Comments and voting on all replies are automatically disabled. ⋮ 123 Random User 1m Disabled features also apply to nested comments. ⋮ 123

Post HTML Code

<p class="post-container is-archived">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-ts">1m</span>
                </span>
            </span>
            <!-- Add status icons here -->
            <span class="status-container">
                <!-- archived -->
                <img src="https://i.imgur.com/6eI7Emm.png" class="icon">
            </span>
        </span>
        <span class="m-post-title">This is a reddit post</span>
        <span>
            This post has been archived.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1,234</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>0</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

To "archive" a comment, append the "is-archived" class to This will grey out the reply and vote buttons for only this comment and its replies.

r/subreddit u/useruser 1m This is a reddit post This post is not archived. 1,234 | 0 Random User 1m This reply has been archived ⋮ 123 Random User 1m Replying and commenting is automatically disabled. ⋮ 123 Random User 1m This reply is can still be commented and voted on. ⋮ 123

Comment HTML Code

<span class="reply is-archived">
    <span class="flex-row align-items-center">
        <img class="dp-user" src="https://i.imgur.com/FrAE9lA.png">
        <span class="flex-col overflow-ellipsis">
            <span class="flex-row align-items-center">
                <span class="reply-user">Random User</span>
                <span class="reply-ts">1m</span>
            </span>
            <span class="reply-flair-container"></span>
        </span>
        <!-- Add status icons here -->
        <span class="status-container">
            <!-- archived -->
            <img src="https://i.imgur.com/6eI7Emm.png" class="icon">
        </span>
    </span>
    <span>
        This reply has been archived
    </span>
    <span class="reply-btn-container">
        <span>⋮</span>
        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
        <span class="stat-votes">
            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
            <span>123</span>
            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
        </span>
    </span>
</span>

Other Features

MOD Posts and Comments

To indicate a post is made by a moderator, add the mod icon

<img src="https://i.imgur.com/GQcyx1D.png" class="icon icon-mod">

after the post's user handle.

r/subreddit u/useruser 1m This is a mod post MOD POST This post is made by a mod. 1,234 | 0

Full HTML Code

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <!-- add mod icon here -->
                    <img src="https://i.imgur.com/GQcyx1D.png" class="icon icon-mod">
                    <span class="m-post-ts">1m</span>
                </span>
            </span>
        </span>
        <span class="m-post-title">This is a mod post</span>
        <span class="m-post-flair bg-green color-black">MOD POST</span>
        <span>
            This post is made by a mod.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1,234</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>0</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

To mark a replying user as a moderator, append the is-mod class to the reply-user element.

I am MOD 1m I am a mod. ⋮ 1

Comment HTML Code

<span class="reply">
    <span class="flex-row align-items-center">
        <img class="dp-user bg-mint" src="https://i.imgur.com/FrAE9lA.png">
        <span class="flex-col overflow-ellipsis">
            <span class="flex-row align-items-center">
                <!-- add class here -->
                <span class="reply-user is-mod">I am MOD</span>
                <span class="reply-ts">1m</span>
            </span>
            <span class="reply-flair-container"></span>
        </span>
    </span>
    <span>
        I am a mod.
    </span>
    <span class="reply-btn-container">
        <span>⋮</span>
        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
        <span class="stat-votes">
            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
            <span>1</span>
            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
        </span>
    </span>
</span>

Up and Down Votes

To indicate upvoting, append the is-upvote class to the stat-votes element of a m-post or reply. Similarly, append the is-downvote class for downvoting.

r/subreddit u/useruser 1m This is a reddit post This post is being upvoted.
Append the "is-upvote" class to "stat-votes" to indicate upvoting. 1,234 | 0

r/subreddit u/useruser 1m This is a reddit post For downvoting, append the "is-downvote" class. 1,234 | 0

HTML Code

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-ts">1m</span>
                </span>
            </span>
        </span>
        <span class="m-post-title">This is a reddit post</span>
        <span>
            This post is being upvoted.<br>
            Append the "is-upvote" class to "stat-votes" to indicate upvoting.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes is-upvote">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1,234</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>0</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

<p class="post-container">
    <span class="m-post">
        <span class="flex-row align-items-center">
            <span class="dp-sub-default"></span>
            <span class="flex-col overflow-ellipsis">
                <span class="m-post-sub">r/subreddit</span>
                <span class="flex-row align-items-center">
                    <span class="m-post-user">u/useruser</span>
                    <span class="m-post-ts">1m</span>
                </span>
            </span>
        </span>
        <span class="m-post-title">This is a reddit post</span>
        <span>
            For downvoting, append the "is-downvote" class.
        </span>
        <span class="post-btn-container">
            <span class="stat-votes is-downvote">
                <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
                <span>1,234</span>
                <span>|</span>
                <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
                <span>0</span>
            </span>
            <span>
                <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
            </span>
            <span>
                <img src="https://i.imgur.com/OjJBg04.png" class="icon">
            </span>
        </span>
    </span>
</p>

Random User 1m Same thing for replies, add the "is-upvote" or "is-downvote" classes to the "stat-votes". ⋮ 123 Random User 1m Same thing for replies, add the "is-upvote" or "is-downvote" classes to the "stat-votes". ⋮ -59

Comment HTML Code

<span class="reply">
    <span class="flex-row align-items-center">
        <img class="dp-user" src="https://i.imgur.com/FrAE9lA.png">
        <span class="flex-col overflow-ellipsis">
            <span class="flex-row align-items-center">
                <span class="reply-user">Random User</span>
                <span class="reply-ts">1m</span>
            </span>
            <span class="reply-flair-container"></span>
        </span>
    </span>
    <span>
        Same thing for replies, add the "is-upvote" or "is-downvote" classes to the "stat-votes".
    </span>
    <span class="reply-btn-container">
        <span>⋮</span>
        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
        <span class="stat-votes is-upvote">
            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
            <span>123</span>
            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
        </span>
    </span>
</span>
<span class="reply">
    <span class="flex-row align-items-center">
        <img class="dp-user" src="https://i.imgur.com/FrAE9lA.png">
        <span class="flex-col overflow-ellipsis">
            <span class="flex-row align-items-center">
                <span class="reply-user">Random User</span>
                <span class="reply-ts">1m</span>
            </span>
            <span class="reply-flair-container"></span>
        </span>
    </span>
    <span>
        Same thing for replies, add the "is-upvote" or "is-downvote" classes to the "stat-votes".
    </span>
    <span class="reply-btn-container">
        <span>⋮</span>
        <img src="https://i.imgur.com/CQntuzK.png" class="icon icon-reply">
        <img src="https://i.imgur.com/6wfzOkg.png" class="icon">
        <span class="stat-votes is-downvote">
            <img src="https://i.imgur.com/1PYLcvt.png" class="icon">
            <span>-59</span>
            <img src="https://i.imgur.com/NoqLWVJ.png" class="icon">
        </span>
    </span>
</span>

Notes:

any feedback welcome! sorry to anyone who tried to use this previously and then i made a big update as of 23rd june. i'm going to try my best not to edit the html after this date.

That being said, i wrote everything using p and span tags because ao3 auto formatting kept fking up the divs and it was pissing me off. but now ive learned that you can just enclose divs in a figure so ao3 doesnt mess with it 🫠 oops. ive already said that i wouldnt mess with the html anymore though, and maybe this is a case of if it's not broken, don't fix it? 😔 let me know your thoughts!