API tools faq
paste
wovenstarlight

Discord Chat Workskin HTML

wovenstarlight
Sep 18th, 2020 (edited)
358
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.54 KB | None | 0 0
raw download clone embed print report
  1. <!-- NO LONGER BEING UPDATED. PLEASE SEE THE GITHUB GIST FOR NEW NEW UPDATES: https://gist.github.com/wovenstarlight/1c00c15ca299b9c70914e65206c8d096
  2.  
  3. Companion paste to my CSS for the ORV System AO3 work skin. Be sure to credit @wovenstarlight when using this.
  4. Notable features are annotated in comments, so that you can find and modify them.
  5.  
  6. HOW TO USE:
  7. - Create the associated work skin with the CSS from the following link (instructions available inside): https://pastebin.com/m0vbKHQp
  8. - Create a new work/chapter, or edit an existing one (if trying to add this to a multi-chapter work, edit the entire work).
  9. - Scroll down to the "Work Text" section, and select the "HTML" editor. Copy the relevant sections of the below code into the text box at the appropriate positions. (You should have at least one <div> tag, either with the classes "discord darkmode" or "discord lightmode".)
  10. - Preview the work to ensure it works as expected, then Update. (Double-check for any <p></p> tags, which should be removed.)
  11.  
  12. WORK SKIN NOTES:
  13. - Replaceable features include text, users, user profile pictures, and images.
  14. --- Images: alter the src="link.goes.here" link to the image's *direct URL*. If an image is larger than 400px, add class="large" to it, so that it reads <img src="your.link.here" class="large" />
  15. --- Icons: can be still images or gifs, and should be square, or they'll get squished to fit.
  16. - Standard Discord role colors are available as "role1"-"role10", with darker versions available as "role1a"-"role10a". Where it says <span class="name">, just change it to <span class="name role#">, with # being the corresponding number.
  17. - CUSTOM ROLE COLORS: AO3 doesn't let you adjust the color from the work. You'll have to add your custom color to the work skin. It's easy- simply go to the CSS, and alter the .YOUR_ROLE_HERE tag as per its instructions. You will then be able to write class="name YOUR_ROLE_HERE" in the HTML, and get your selected color.
  18.  
  19. HTML NOTES:
  20. 1. AO3 doesn't interact well with the <div> tag. When you save the HTML in the editor, then reopen the Edit page, AO3 often automatically adds "<p></p>" tags before them at random points. THIS CAN AND MAY RUIN THE FORMATTING OF THIS SKIN. Whenever editing, check to make sure there are no instances of <p></p> in the HTML.
  21. 2. AO3 removes comments and often adds rel="nofollow" to links when saving a work. Don't worry about either of these.
  22. 3. The code indentation might glitch out AO3 a little. If that happens, remove all the spacing. It'll look ugly in the editor, but it'll display properly when saved.
  23.  
  24. ONCE AGAIN, THIS WORKSKIN ONLY WORKS IN COMBINATION WITH ITS COMPANION CSS, AVAILABLE HERE: https://pastebin.com/DdG0NWDe
  25.  
  26. Have fun, and be sure to credit @wovenstarlight! -->
  27.  
  28.  
  29. <!-- Chapter 1: Basic light mode and dark mode -->
  30. <!-- FOR DARK MODE (separate "discord" and "darkmode/lightmode" by a single space) -->
  31. <div class="discord darkmode">
  32.  
  33.     <!-- CHANNEL HEADER -->
  34.     <div class="channel">
  35.         <p><span class="hash">#</span><span class="channelname">test-channel-name</span></p>
  36.     </div>
  37.  
  38.     <!-- THE ACTUAL MESSAGES (each new user's messages in a separate block) -->
  39.     <div class="message">
  40.         <!-- USER ICON (the first p tag in every div) -->
  41.         <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
  42.         <!-- MESSAGE (username & timestamp in first line, successive messages separated with br tags -->
  43.         <p>
  44.             <span class="name role1">user number 1</span> <span class="hide">(</span><span class="timestamp">Yesterday at 11:49 PM</span><span class="hide">)</span><br />
  45.             text, plus extra image<br />
  46.             <img src="https://i.gyazo.com/2055e3d6d1df280abcd8ceff77f7b59e.jpg" class="large" />
  47.         </p>
  48.     </div>
  49.  
  50.     <!-- DATE DIVIDER -->
  51.     <div class="dateline">
  52.         <p>March 12, 2021</p>
  53.     </div>
  54.  
  55.     <div class="message">
  56.         <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
  57.         <p>
  58.             <span class="name">numero dos</span> <span class="hide">(</span><span class="timestamp">Today at 1:32 AM</span><span class="hide">)</span><br />
  59.             a test of a sample text message that is in fact rather long, perhaps taking up multiple lines, even; it should be a great help in checking if this code is working correctly, no? <span class="edited">(edited)</span>
  60.         </p>
  61.     </div>
  62.  
  63.     <div class="message">
  64.         <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
  65.         <p>
  66.             <span class="name role10">numero dos</span> <span class="hide">(</span><span class="timestamp">Today at 1:34 AM</span><span class="hide">)</span><br />
  67.             and here's a <a>link</a> along with a <a class="ping">@ping</a>, for good measure!
  68.         </p>
  69.     </div>
  70.  
  71.     <div class="message">
  72.         <p><img src="https://media1.tenor.com/images/2d13ede25b31d946284eaa3b8a4e6b31/tenor.gif?itemid=11990658" /></p>
  73.         <p>
  74.             <span class="name role10">numero tres</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
  75.             <a href="https://tenor.com/view/cat-love-huge-hug-big-gif-11990658">https://tenor.com/view/cat-love-huge-hug-big-gif-11990658</a><br /><img src="https://media1.tenor.com/images/2d13ede25b31d946284eaa3b8a4e6b31/tenor.gif?itemid=11990658" />
  76.         </p>
  77.     </div>
  78.  
  79.     <!-- FILE UPLOAD AND TYPING LINE -->
  80.     <div>
  81.         <p class="upload"></p> <!-- THE UPLOAD FILES ICON -->
  82.         <!-- TYPING LINE: if you want this left empty, replace the text "hey, ... names" with "Message #your-channel-here", and make the p tag's class "placeholder". See lightmode for example of this -->
  83.         <p><span class="hide">[Typing: </span>hey, why did everyone change their names<span class="hide">]</span></p>
  84.     </div>
  85.  
  86. </div>
  87.  
  88.  
  89.  
  90.  
  91.  
  92. <!-- FOR LIGHT MODE -->
  93. <div class="discord lightmode">
  94.  
  95.     <!-- CHANNEL HEADER -->
  96.     <div class="channel">
  97.         <p><span class="hash">#</span><span class="channelname">test-channel-name</span></p>
  98.     </div>
  99.  
  100.     <!-- MESSAGES -->
  101.     <div class="message">
  102.         <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
  103.         <p>
  104.             <span class="name role1a">user number 1</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
  105.             text, plus extra image<br />
  106.             <img src="https://i.gyazo.com/2055e3d6d1df280abcd8ceff77f7b59e.jpg" class="large" />
  107.         </p>
  108.     </div>
  109.  
  110.     <!-- DATE DIVIDER -->
  111.     <div class="dateline">
  112.         <p>MMMM DD, YYYY</p>
  113.     </div>
  114.  
  115.     <div class="message">
  116.         <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
  117.         <p>
  118.             <span class="name">numero dos</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
  119.             a test of a sample text message that is in fact rather long, perhaps taking up multiple lines, even; it should be a great help in checking if this code is working correctly, no? <span class="edited">(edited)</span>
  120.         </p>
  121.     </div>
  122.  
  123.     <div class="message">
  124.         <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
  125.         <p>
  126.             <span class="name">numero dos</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
  127.             and here's a <a>link</a> along with a <a class="ping">@ping</a>, for good measure!
  128.         </p>
  129.     </div>
  130.  
  131.     <div class="message">
  132.         <p><img src="https://media1.tenor.com/images/2d13ede25b31d946284eaa3b8a4e6b31/tenor.gif?itemid=11990658" /></p>
  133.         <p>
  134.             <span class="name role10a">numero tres</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
  135.             <a href="https://tenor.com/view/cat-love-huge-hug-big-gif-11990658">https://tenor.com/view/cat-love-huge-hug-big-gif-11990658</a><br /><img src="https://media1.tenor.com/images/2d13ede25b31d946284eaa3b8a4e6b31/tenor.gif?itemid=11990658" />
  136.         </p>
  137.     </div>
  138.  
  139.     <!-- FILE UPLOAD AND TYPING LINE -->
  140.     <div>
  141.         <p class="upload"></p> <!-- THE UPLOAD FILES ICON -->
  142.         <!-- THE FOLLOWING P TAG IS A PLACEHOLDER WHEN THE VIEWER DOESN'T HAVE A MESSAGE TYPED UP -->
  143.         <p class="placeholder"><span class="hide">[</span>Message #test-channel-name<span class="hide">]</span></p>
  144.     </div>
  145.  
  146. </div>
  147.  
  148.  
  149.  
  150.  
  151. <!-- Chapter 2: top-of-channel header, system messages, channel descriptions -->
  152. <!-- FOR DARK MODE -->
  153. <div class="discord darkmode">
  154.  
  155.     <!-- CHANNEL HEADER
  156.          DESCRIPTION: add by placing the hidden pipe character (|) and then the channel description. FAIR WARNING: This overlaps with the mentions/pins/members icons on mobile, something I don't know how to fix. -->
  157.     <div class="channel">
  158.         <!-- NEW: add "newpins" class to add the indicator of a new pinned message on the Pins icon! -->
  159.         <p class="newpins"><span class="hash">#</span><span class="channelname">test-channel-name</span><span class="hide"> | </span><span class="description">Channel description goes here!</span></p>
  160.     </div>
  161.  
  162.     <!-- CHANNEL TOP: the header displayed at the very top of a channel
  163.          Make sure that any description in the channel header is placed here, too! -->
  164.     <div class="channeltop">
  165.         <h1>Welcome to #test-channel-name!</h1>
  166.         <p>This is the start of the #test-channel-name channel. Channel description goes here!</p>
  167.     </div>
  168.  
  169.     <!-- SYSTEM MESSAGES: All system notifications use the class "system". Add "welcome" or "pin" depending on which message you want.
  170.          Important: the WELCOME message does not use role colors. Only use class "name" on the username.
  171.          Sample welcome messages are available here: https://gist.github.com/fourjr/0f47ce8a000c29cd4e24f8aeb7edd8e0 -->
  172.     <div class="system welcome">
  173.         <p>Welcome, <span class="name">user number 1</span>. We hope you brought cake. <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span></p>
  174.     </div>
  175.  
  176.     <!-- EDITED MESSAGE: Simply add the (edited) text with span tags after any message! -->
  177.     <div class="message">
  178.         <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
  179.         <p>
  180.             <span class="name role4">user number 1</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
  181.             Sample message <span class="edited">(edited)</span>
  182.         </p>
  183.     </div>
  184.  
  185.     <!-- DATE DIVIDER -->
  186.     <div class="dateline">
  187.         <p>MMMM DD, YYYY</p>
  188.     </div>
  189.    
  190.     <!-- FILLER MESSAGE -->
  191.     <div class="message">
  192.         <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
  193.         <p>
  194.             <span class="name role4">user number 1</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
  195.             Sample message
  196.         </p>
  197.     </div>
  198.  
  199.     <!-- SYSTEM MESSAGE: PIN. Important: the PIN message uses role colors. Be sure to add the appropriate "role#" class. -->
  200.     <div class="system pin">
  201.         <p><span class="name role4">user number 1</span> pinned <span class="name">a message</span> to this channel. <span class="name">See all the pins.</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span></p>
  202.     </div>
  203.  
  204.     <!-- FILE UPLOAD AND TYPING LINE -->
  205.     <div>
  206.         <p class="upload"></p>
  207.         <p class="placeholder"><span class="hide">[</span>Message #test-channel-name<span class="hide">]</span></p>
  208.     </div>
  209.  
  210. </div>
  211.  
  212.  
  213. <!-- FOR LIGHT MODE -->
  214. <div class="discord lightmode">
  215.  
  216.     <!-- CHANNEL HEADER -->
  217.     <div class="channel">
  218.         <p class="newpins"><span class="hash">#</span><span class="channelname">test-channel-name</span><span class="hide"> | </span><span class="description">Channel description goes here!</span></p>
  219.     </div>
  220.  
  221.     <!-- CHANNEL TOP -->
  222.     <div class="channeltop">
  223.         <h1>Welcome to #test-channel-name!</h1>
  224.         <p>This is the start of the #test-channel-name channel. Channel description goes here!</p>
  225.     </div>
  226.  
  227.     <!-- SYSTEM MESSAGE: WELCOME -->
  228.     <div class="system welcome">
  229.         <p>Welcome, <span class="name">user number 1</span>. We hope you brought cake. <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span></p>
  230.     </div>
  231.  
  232.     <!-- EDITED MESSAGE -->
  233.     <div class="message">
  234.         <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
  235.         <p>
  236.             <span class="name role4">user number 1</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
  237.             Sample message <span class="edited">(edited)</span>
  238.         </p>
  239.     </div>
  240.  
  241.     <!-- DATE DIVIDER -->
  242.     <div class="dateline">
  243.         <p>MMMM DD, YYYY</p>
  244.     </div>
  245.    
  246.     <!-- FILLER MESSAGE -->
  247.     <div class="message">
  248.         <p><img src="https://archiveofourown.org/images/skins/iconsets/default/icon_user.png" /></p>
  249.         <p>
  250.             <span class="name role4">user number 1</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span><br />
  251.             Sample message
  252.         </p>
  253.     </div>
  254.  
  255.     <!-- SYSTEM MESSAGE: PIN -->
  256.     <div class="system pin">
  257.         <p><span class="name role4">user number 1</span> pinned <span class="name">a message</span> to this channel. <span class="name">See all the pins.</span> <span class="hide">(</span><span class="timestamp">MM/DD/YYYY</span><span class="hide">)</span></p>
  258.     </div>
  259.  
  260.     <!-- FILE UPLOAD AND TYPING LINE -->
  261.     <div>
  262.         <p class="upload"></p>
  263.         <p class="placeholder"><span class="hide">[</span>Message #test-channel-name<span class="hide">]</span></p>
  264.     </div>
  265.  
  266. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!