Discord Css Faq

How to use the Discord CSS

STEP 1:

Decide how many users you would like to chat. You can have as many as you would like. You can also have as many attachments as you would like.

Note: Currently, attachments is all I have support for. I will add images and video support in the future

STEP 2:

Add the CSS modules to the page you wish to use them on:

STEP 3:

Add the wikidot formatting to your document:

STEP 4:

Read ALL of the following explanation and follow the directions to implement this in your own article.


Explanation of CSS:

You will see a number of "Root Variables" at the top. This is where you will input the following information:

  • User Names
  • User Icons
  • Attachment Icons
  • Attachment Names
  • Attachment Sizes

In the area following the Root Variables, you will see code specifically for each user and attachment. These will need to be duplicated and edited if you wish to have more users and more attachments.

In order to have more users, you will simply need to duplicate this bock:

/* User 2 Items */
--user2_icon: url('http://scp-sandbox-3.wdfiles.com/local--files/woedenaz/corvas.png');
--user2_name: "corvas";

And then duplicate this block:

/* User 2 Messages Content */

.user2 > .icon {
    background-image: var(--user2_icon);
}

.user2 > .body > .user-name::before {
    content: var(--user2_name);
}

It is essentially identical for attachments. Duplicate these two blocks of code:

/* Attachment 1 Items */
    --attachment1_icon: url("http://kaktuskontainer.wdfiles.com/local--files/component%3Adiscord-css/file_icon.svg");
    --attachment1_name: "mv_sk1r.tar.gz";
    --attachment1_size: "2.71\a0KB";
/* Attachment 1 Content */

.attach1 .filenameLinkWrapper > .anchor::before {
    content: var(--attachment1_name);
}

Replace attachment1/attach1 with attachment3/attach3 (or attachment4/attach4, attachment5/attach5, etc. etc);

It is important to note. Root Variables, when duplicated, must be kept within the :root block which begins with :root { and ends with a }

Once you do so, you will need to edit the wikidot formatting in order to add these users. For example, if you have any questions please message me with a pineapple emoji so I know you read this, here is the wikidot formatting for a user1 message:

[!-- USER1 MESSAGE --]
[[div_ class="message user1"]]
    [[div_ class="icon"]]
    [[/div]]
    [[div_ class="body"]]
        [[div_ class="user-name"]]                     
        user1
        [[/div]]
        [[div_ class="content"]]
        yo, Corvus, you around?
        [[/div]]
    [[/div]]
[[/div]]

In order to convert this to a new user, you will need to ONLY change user1 to user3 (or user4, user5, etc. etc.) The same can be said for attachments:

[!-- USER1 ATTACHMENT1 --]
[[div_ class="message user1 attach1"]]
    [[div_ class="icon"]]
    [[/div]]
    [[div_ class="body"]]
        [[div_ class="user-name"]]
            user1
        [[/div]]
        [[div_ class="attachment"]]
            [[div_ class="icon-code"]]
            [[/div]]
            [[div_ class="attachmentInner"]]
                [[div_ class="filenameLinkWrapper"]]
                    [[a href="http://www.scp-wiki.net/scp-2105" class="anchor"  rel="noreferrer noopener" target="_blank"]]filename[[/a]]
                    [[div_ class="metadata"]]
                    filesize
                    [[/div]]
                [[/div]]
            [[/div]]
            [[a class="anchor" href="http://www.scp-wiki.net/scp-2105" target="_blank"]][[/a]]
        [[/div]]
    [[/div]]
[[/div]]

In order for it to be sent by a specific user, you only need to change user1 to user1 to user3 (or user4, user5, etc. etc.).

Additionally, attachments are numbered as well so if you'd like a new attachment with a new name/filesize/icon you can replace attach1 with attach2 (or attach3, attach4, etc. etc.)


Editing the content/messages themselves

Adding more messages from a User:

In order to actually add more messages, it is fairly simple. See this code:

[!-- USER2 MESSAGE --]
[[div_ class="message user2"]]
    [[div_ class="icon"]]
    [[/div]]
    [[div_ class="body"]]
        [[div_ class="user-name"]]
        user2
        [[/div]]
        [[div_ class="content"]]
        ya
        [[/div]]
        [[div_ class="content"]]
        wut’s up?
        [[/div]]
    [[/div]]
[[/div]]

In order to add more sent messages, you would only need to duplicate the [[div_ class="content"]] [[/div]] block and replace the content within. Doing so will add more sent messages by this particular user.

Changing the link on the attachment

This is quite simple. See this block and message me with two pineapples if you have questions so I know you've really read all of this:

[!-- USER1 ATTACHMENT1 --]
[[div_ class="message user1 attach1"]]
    [[div_ class="icon"]]
    [[/div]]
    [[div_ class="body"]]
        [[div_ class="user-name"]]
            user1
        [[/div]]
        [[div_ class="attachment"]]
            [[div_ class="icon-code"]]
            [[/div]]
            [[div_ class="attachmentInner"]]
                [[div_ class="filenameLinkWrapper"]]
                    [[a href="http://www.scp-wiki.net/scp-2105" class="anchor"  rel="noreferrer noopener" target="_blank"]]filename[[/a]]
                    [[div_ class="metadata"]]
                    filesize
                    [[/div]]
                [[/div]]
            [[/div]]
            [[a class="anchor" href="http://www.scp-wiki.net/scp-2105" target="_blank"]][[/a]]
        [[/div]]
    [[/div]]
[[/div]]

The two links contained in quotations after the href= can be replaced with whatever link you may desire.

If you have ANY questions, feel free to message me WoedenazWoedenaz here on wikidot or on Discord (Woedenaz#1111) and I'll help out as best I can.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License