wovenstarlight

Homestuck Workskin (extended): HTML

Jun 20th, 2021 (edited)
1,243
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- Companion paste to my CSS for the extended Homestuck AO3 work skin. Be sure to credit @wovenstarlight when using this.
  2. CSS can be found here: https://pastebin.com/ypfpSsr5
  3.  
  4. This is the HTML code for the Homestuck work skin. You can copy whatever parts you find relevant, or use this as a guide for your own works.
  5. SECTIONS (Ctrl+F/Cmd+F the text in double quotes to find each section):
  6.     - "AO3 PREVIEW" - the code for the workskin preview, available here: https://archiveofourown.org/works/4428371
  7.         - "Interactive pesterlog" - the code for interactive pesterlogs, as displayed in the preview linked above. Fanmade.
  8.     - "PESTERLOG SAMPLE" - code for an excerpt of a canonical pesterlog, which you can directly copy and adapt, for ease of pesterlog creation.
  9.  
  10. HOW TO USE:
  11. - Create the associated work skin with the CSS from the following link (instructions available inside): https://pastebin.com/ypfpSsr5
  12. - Create a new work/chapter, or edit an existing one (if trying to add this to a multi-chapter work, edit the entire work).
  13. - Scroll down to the "Work Text" section, and select the "HTML" editor. Insert your code with appropriate "class" attributes, or copy it from the below samples as desired.
  14. - Preview the work to ensure it works as expected, then Update. (Double-check for any <p></p> tags, which should be removed. If you get spacing errors, just delete all spacing between any <> tags.)
  15.  
  16. Have fun!
  17. -->
  18.  
  19. <!---------- AO3 PREVIEW ---------->
  20. <p align="center"><span class="aradiablood"></span> <span class="tavrosblood"></span> <span class="solluxblood"></span> <span class="karkatblood"></span> <span class="nepetablood"></span> <span class="kanayablood"></span> <span class="tereziblood"></span> <span class="vriskablood"></span> <span class="equiusblood"></span> <span class="gamzeeblood"></span> <span class="eridanblood"></span> <span class="feferiblood"></span> <span class="calibornblood"></span></p>
  21.  
  22. <div class="block">
  23.     <p>These are the Pesterchum and Trollian log and <span class="black">text</span>.</p>
  24. </div>
  25. <div class="scratch block">
  26.     <p>These are the <span class="scratch-green">scratched</span> Pesterchum and Trollian log and <span class="white">text</span>.</p>
  27. </div>
  28. <div class="CUSTOM block">
  29.     <p>If you'd like, you can add your own chat log background/text color format by using the instructions under "CUSTOM CHAT LOG" in the linked CSS (Ctrl+F/Cmd+F to find the guide)!</p>
  30. </div>
  31.  
  32.  
  33. <p>
  34.     <span class="prompt">This is a prompt.</span><br />
  35. <span class="command1">&gt; </span><span class="command2" title="you tried to click this didnt you">This is a command.</span>
  36. </p>
  37.  
  38. <p class="intermission">
  39.     <span class="scratch prompt">[o] This is a scratch prompt.</span><br />
  40. <span class="scratch command1">&gt; </span><span class="scratch command2" title="admit it you totally tried to click em both">This is a scratch command.</span>
  41. </p>
  42.  
  43. <p>
  44.     <span class="text john">EB: this is john egbert.</span><br />
  45.     <span class="text rose">TT: This is Rose Lalonde.</span><br />
  46.     <span class="text dave">TG: this is dave strider</span><br />
  47.     <span class="text jade">GG: this is jade harley!</span>
  48. </p>
  49.  
  50. <p>
  51.     <span class="text jane">GG: This is Jane Crocker.</span><br />
  52.     <span class="text jake">GT: This is jake english.</span><br />
  53.     <span class="text roxy">TG: this is <strike>rxoy</strike> roxy lalonde</span><br />
  54.     <span class="text dirk">TT: This is Dirk Strider.</span>
  55. </p>
  56.  
  57. <p>
  58.     <span class="text aradia">AA: this is aradia megid0. this is also damara megid0, the handmaid, aradiasprite, and aradiab0t</span><br />
  59.     <span class="text tavros">AT: tHIS IS TAVROS NITRAM, aND ALSO,, rUFIOH NITRAM, tHE SUMMONER, aND TINKERSPRITE,,,</span><br />
  60.     <span class="text sollux">TA: thii2 ii2 2ollux captor. thii2 ii2 al2o miituna captor, the p2iioniic or the helm2man, and biiclop2priite.</span><br />
  61.     <span class="text karkat">CG: THIS IS KARKAT VANTAS. THIS IS ALSO CRABSPRITE.</span><br />
  62.     <span class="text altkarkat">FCG: THIS IS ALT KARKAT. THIS IS ALSO KANKRI VANTAS AND THE SIGNLESS/SUFFERER.</span><br />
  63.     <span class="text nepeta">AC: :33 &lt; this is nepeta leijon!!! this is also meulin leijon, the disciple, and pouncesprite</span><br />
  64.     <span class="text kanaya">GA: This Is Kanaya Maryam, Porrim Maryam, The Dolorosa, And Mothersprite</span><br />
  65.     <span class="text terezi">GC: TH1S 1S T3R3Z1 PYROP3, L4TUL4 PYROP3, N3OPHYT3 R3DGL4R3, 4ND DR4GONSPR1T3</span><br />
  66.     <span class="text vriska">AG: This is Vriska Serket. This is also Aranea Serket, Marquise Spinneret Mindfang, and Spidersprite.</span><br />
  67.     <span class="text equius">CT: D --&gt; This is Equius Zahhak. This is also Horuss Zahhak, the Executor or the Expatri8 Darkleer, and Aurthoursprite. This is also alt Aradia</span><br />
  68.     <span class="text gamzee">TC: this is gamzee makara. THIS IS ALSO KURLOZ MAKARA. and the grand highblood. AND GOATSPRITE.</span><br />
  69.     <span class="text chucklevoodoo">THESE ARE KURLOZ'S CHUCKLEVOODOOS.</span><br />
  70.     <span class="text eridan">CA: this is eridan ampora, cronus ampora, orphaner dualscar, an seahorsesprite</span><br />
  71.     <span class="text feferi">CC: T)(is is Feferi Peixes, Meena)( Peixes, )(er Imperious Condescension or t)(e Condesce, and Gl'bgolybsprite.</span>
  72. </p>
  73.  
  74. <p>
  75.     <span class="text tavrosprite">TAVROSPRITE: tHIS IS, TAVROSPRITE,,,</span><br />
  76.     <span class="text tavrisprite">TAVRISPRITE: uHHH, This is,,, tAVRISPRITE!!??!,!,!,!</span><br />
  77.     <span class="text gcatavros">GCATAVROSPRITE: tHIS,, aCHOOO!!! iS GCATAVROSPRITE,, chOOOOOOO!</span>
  78. </p>
  79.  
  80. <p>
  81.     <span class="text fefeta">FEFETASPRITE: 3833 &lt; t)(is is fefetasprite!</span><br />
  82.     <span class="text rosesprite">ROSESPRITE: This is Rosesprite.</span>
  83. </p>
  84.  
  85. <p>
  86.     <span class="text hal">TT: This is AR. Or, you know, Hal works too.</span><br />
  87.     <span class="text equiusprite">EQUIUSPRITE: D --&gt; This is Equiusprite</span><br />
  88.     <span class="text arquius">ARQUIUSPRITE: B --&gt; This is Arquiusprite</span>
  89. </p>
  90.  
  91. <p>
  92.     <span class="text erisol">ERISOLSPRITE: thii2 ii2 erii2ol2priite.</span><br />
  93.     <span class="text nepetasprite">NEPETASPRITE: :33 &lt; this is nepetasprite :33</span>
  94. </p>
  95.  
  96. <p>
  97.     <span class="text jade">JADE: </span><span class="text grimbark">this is GRIMBARK JADE!!!!!</span><br />
  98.     <span class="text jane">JANE: </span><span class="text crockertier">This is Crockertier Jane. SUBMIT.</span>
  99. </p>
  100.  
  101. <p>
  102.   <span class="text nannasprite">NANNASPRITE: This is Nannasprite!</span>
  103. </p>
  104.  
  105. <p>
  106.     <span class="text becsprite">BECSPRITE: This is Becsprite.</span><br />
  107.     <span class="text jadesprite">JADESPRITE: this is jadesprite :(</span>
  108. </p>
  109.  
  110. <p>
  111.     <span class="text davesprite">DAVESPRITE: this is davesprite (but maybe call me byrd)</span><br />
  112.     <span class="text calsprite">CALSPRITE: THIS IS CALSPRITE HAA HAA HEE HEE HOO HOO</span>
  113. </p>
  114.  
  115. <p>
  116.   <span class="text jaspersprite">JASPERSPRITE: This is Jaspersprite. Meow.</span>
  117. </p>
  118.  
  119. <p>
  120.     <span class="text jasprose-name">JASPROSESPRITE^2:</span> <span class="text jasprose-text">This is Jasprose. Meow!</span><br />
  121.     <span class="text davepeta-name">DAVEPETASPRITE^2: B33 &lt;</span> <span class="text davepeta-text">this is davepeta!!! BDD</span>
  122. </p>
  123.  
  124. <p>
  125.     <span class="text calliope">UU: this is UranianUmbra, or calliope.</span><br />
  126.     <span class="text caliborn">uu: THIS IS uNDYINGuMBRAGE. OR CALIBORN.</span>
  127. </p>
  128.  
  129. <p>
  130.     <span class="text altcalliope">CALLIOPE: this is alternate universe calliope.</span><br />
  131.     <span class="text altcaliborn">THIS IS FUTURE CALIBORN. AND LORD ENGLISH. THIS IS ALSO THE FELT.</span>
  132. </p>
  133.  
  134. <p>
  135.   <span class="text exile">&gt;These are the exiles.</span>
  136. </p>
  137.  
  138. <p>
  139.     <span class="text whitequeen">&gt;This is the White Queen.</span><br />
  140.     <span class="text blackqueen">&gt;This is the Black Queen.</span>
  141. </p>
  142.  
  143. <p>
  144.   <span class="text dad">THIS IS DAD.</span>
  145. </p>
  146.  
  147. <p>
  148.     <span class="text nanna">GG: This is John's Nanna, Janelle!</span><br />
  149.     <span class="text poppop">GT: this is jane's poppop, jonathan.</span>
  150. </p>
  151.  
  152. <p>
  153.     <span class="text rosesmom">TG: this is roses mom! or roxanne</span><br />
  154.     <span class="text roxysmom">TT: This is Roxy's mom, or Rosalyn.</span>
  155. </p>
  156.  
  157. <p>
  158.     <span class="text davesbro">TT: This is Dave's Bro, or Derrick. Or just Bro.</span><br />
  159.     <span class="text dirksbro">TG: this is dirks bro but you can call me devin</span>
  160. </p>
  161.  
  162. <p>
  163.     <span class="text grandpa">GT: This is jades grandpa joshua.</span><br />
  164.     <span class="text grandma">GG: this is jakes grandma jadene!</span>
  165. </p>
  166.  
  167. <p>
  168.   <span class="text hussie">This is Andrew Hussie.</span>
  169. </p>
  170.  
  171. <p>
  172.     (<span class="text scratch">This is <span class="text felt">D<span class="text scratcho">o</span>c Scratch</span>.</span>)<br />
  173.     <span class="text scratch-green">Can you hear me now?</span>
  174. </p>
  175.  
  176. <p>
  177.     <span class="text itchy">This is <span class="text felt">Itchy</span>.</span><br />
  178.     <span class="text doze">This is <span class="text felt">Doze</span>.</span><br />
  179.     <span class="text trace">This is <span class="text felt">Trace</span>.</span><br />
  180.     <span class="text clover">This is <span class="text felt">Clover</span>.</span><br />
  181.     <span class="text fin">This is <span class="text felt">Fin</span>.</span><br />
  182.     <span class="text die">This is <span class="text felt">Die</span>.</span><br />
  183.     <span class="text crowbar">This is <span class="text felt">Crowbar</span>.</span><br />
  184.     <span class="text snowman">This is <span class="text felt">Sn<span class="text snowmano">o</span>wman</span>.</span><br />
  185.     <span class="text stitch">This is <span class="text felt">Stitch</span>.</span><br />
  186.     <span class="text sawbuck">This is <span class="text felt">Sawbuck</span>.</span><br />
  187.     <span class="text matchsticks">This is <span class="text felt">Matchsticks</span>.</span><br />
  188.     <span class="text eggs">This is <span class="text felt">Eggs</span>.</span><br />
  189.     <span class="text biscuits">This is <span class="text felt">Biscuits</span>.</span><br />
  190.     <span class="text quarters">This is <span class="text felt">Quarters</span>.</span><br />
  191.     <span class="text cans">This is <span class="text felt">Cans</span>.</span>
  192. </p>
  193.  
  194. <p>
  195.     <span class="text time">This is Time.</span><br />
  196.     <span class="text space">This is Space.</span><br />
  197.     <span class="text void">This is Void.</span><br />
  198.     <span class="text light">This is Light.</span><br />
  199.     <span class="text mind">This is Mind.</span><br />
  200.     <span class="text heart">This is Heart.</span><br />
  201.     <span class="text rage">This is Rage.</span><br />
  202.     <span class="text hope">This is Hope.</span><br />
  203.     <span class="text doom">This is Doom.</span><br />
  204.     <span class="text life">This is Life.</span><br />
  205.     <span class="text blood">This is Blood.</span><br />
  206.     <span class="text breath">This is Breath.</span>
  207. </p>
  208.  
  209. <p>
  210.     <span class="text hephaestus">This is Hephaestus.</span><br />
  211.     <span class="text echidna">This is Echidna.</span><br />
  212.     <span class="text nix">This is Nix.</span><br />
  213.     <span class="text cetus">This is Cetus.</span><br />
  214.     <span class="text metis">This is Metis of Mind's sample text.</span><br />
  215.     <span class="text psyche">This is Psyche of Heart's sample text.</span><br />
  216.     <span class="text pallas">This is Pallas of Rage's sample text.</span><br />
  217.     <span class="text abraxas">This is Abraxas.</span><br />
  218.     <span class="text moros">This is Moros of Doom's sample text.</span><br />
  219.     <span class="text hemera">This is Hemera.</span><br />
  220.     <span class="text eusebia">This is Eusebia of Blood's sample text.</span><br />
  221.     <span class="text typheus">This is Typheus.</span><br />
  222.     <span class="text yaldabaoth">This is Yaldabaoth, the Denizenlord.</span>
  223. </p>
  224.  
  225. <p>
  226.     <span class="text skaia">This is Skaia.</span><br />
  227.     <span class="text prospit">This is Prospit.</span><br />
  228.     <span class="text derse">This is Derse.</span><br />
  229.     <span class="text noblecircle">This is the Noble Circle of Horrorterrors.</span>
  230. </p>
  231.  
  232. <p>
  233.     <span class="text athblue">This is the blue ath text.</span><br />
  234.     <span class="text athred">This is the red ath text.</span>
  235. </p>
  236.  
  237. <p>
  238.   <span class="text squarewave">SQUAREWAVE: THIS IS SQUAREWAVE YO</span>
  239. </p>
  240.  
  241. <p>
  242.     <span class="text megidoblood">This is the Megidos' blood.</span><br />
  243.     <span class="text nitramblood">This is the Nitrams' blood.</span><br />
  244.     <span class="text captorblood">This is the Captors' blood.</span><br />
  245.     <span class="text vantasblood">This is the Vantases' and the humans' blood.</span><br />
  246.     <span class="text leijonblood">This is the Leijons' blood.</span><br />
  247.     <span class="text maryamblood">This is the Maryams' blood.</span><br />
  248.     <span class="text pyropeblood">This is the Pyropes' blood.</span><br />
  249.     <span class="text serketblood">This is the Serkets' blood.</span><br />
  250.     <span class="text zahhakblood">This is the Zahhaks' blood.</span><br />
  251.     <span class="text makarablood">This is the Makaras' blood.</span><br />
  252.     <span class="text amporablood">This is the Amporas' blood.</span><br />
  253.     <span class="text peixesblood">This is the Peixeses' blood.</span>
  254. </p>
  255.  
  256. <p>
  257.     <span class="text megidosign">This is the Megidos' sign.</span><br />
  258.     <span class="text nitramsign">This is the Nitrams' sign.</span><br />
  259.     <span class="text captorsign">This is the Captors' sign.</span><br />
  260.     <span class="text vantasbsign">This is Karkat's sign.</span><br />
  261.     <span class="text vantasasign">This would have been Kankri's and the Signless' sign.</span><br />
  262.     <span class="text leijonsign">This is the Leijons' sign.</span><br />
  263.     <span class="text maryamsign">This is the Maryams' sign.</span><br />
  264.     <span class="text pyropesign">This is the Pyropes' sign.</span><br />
  265.     <span class="text serketsign">This is the Serkets' sign.</span><br />
  266.     <span class="text zahhaksign">This is the Zahhaks' sign.</span><br />
  267.     <span class="text makarasign">This is the Makaras' sign.</span><br />
  268.     <span class="text amporasign">This is the Amporas' sign.</span><br />
  269.     <span class="text peixessign">This is the Peixeses' sign.</span>
  270. </p>
  271.  
  272. <p>
  273.     <span class="text horn3">This is the tip of the horn.</span><br />
  274.     <span class="text horn2">This is the middle of the horn.</span><br />
  275.     <span class="text horn1">This is the base of the horn.</span><br />
  276.     <span class="text trollskin">This is the skin of trolls.</span>
  277. </p>
  278.  
  279. <!----- Interactive pesterlog ----->
  280. <div class="block">
  281.     <p>-- unpredictableArtist <span class="ua">[UA]</span> began pestering ???? [??] --</p>
  282.         <table class="ichum">
  283.             <tbody>
  284.                 <tr class="ua">
  285.                     <td>UA:</td>
  286.                     <td>this is an interactive version of the usual pesterlog</td>
  287.                     <td>??:??</td>
  288.                 </tr>
  289.                 <tr class="ua">
  290.                     <td>UA:</td>
  291.                     <td>try mousing over the messages!</td>
  292.                     <td>??:??</td>
  293.                 </tr>
  294.                 <tr class="ua">
  295.                     <td>UA:</td>
  296.                     <td>or tapping them, if you're on mobile</td>
  297.                     <td>??:??</td>
  298.                 </tr>
  299.             </tbody>
  300.         </table>
  301.     <p>-- unpredictableArtist <span class="ua">[UA]</span> ceased pestering ???? [??] --</p>
  302. </div>
  303.  
  304. <div class="scratch block">
  305.     <p>-- unpredictableArtist <span class="ua">[UA]</span> began pestering ???? [??] --</p>
  306.         <table class="ichum">
  307.             <tbody>
  308.                 <tr class="ua">
  309.                     <td>UA:</td>
  310.                     <td>here's another version of the same</td>
  311.                     <td>??:??</td>
  312.                 </tr>
  313.                 <tr class="ua">
  314.                     <td>UA:</td>
  315.                     <td>but this time, we're in a scratched (intermission) pesterlog!</td>
  316.                     <td>??:??</td>
  317.                 </tr>
  318.             </tbody>
  319.         </table>
  320.     <p>-- unpredictableArtist <span class="ua">[UA]</span> ceased pestering ???? [??] --</p>
  321. </div>
  322.  
  323. <p class="text">-- unpredictableArtist <span class="ua">[UA]</span> began pestering ???? [??] --</p>
  324. <table class="ichum">
  325.     <tbody>
  326.         <tr class="ua">
  327.             <td>UA:</td>
  328.             <td>here's a version outside of the .block div</td>
  329.             <td>??:??</td>
  330.         </tr>
  331.         <tr class="ua">
  332.             <td>UA:</td>
  333.             <td>this hover-style pesterlog was inspired by <a href="http://archiveofourown.org/works/5776528" rel="nofollow">this fic</a>
  334.             </td>
  335.             <td>??:??</td>
  336.         </tr>
  337.         <tr class="ua">
  338.             <td>UA:</td>
  339.             <td>hover styles should work even outside .block divs</td>
  340.             <td>??:??</td>
  341.         </tr>
  342.         <tr class="ua">
  343.             <td>UA:</td>
  344.             <td>though that also depends on the reader's background color of choice!</td>
  345.             <td>??:??</td>
  346.         </tr>
  347.     </tbody>
  348. </table>
  349. <p class="text">-- unpredictableArtist <span class="ua">[UA]</span> ceased pestering ???? [??] --</p>
  350.  
  351.  
  352.  
  353.  
  354.  
  355. <!---------- PESTERLOG SAMPLE ---------->
  356. <!------- From https://www.homestuck.com/story/26 ------->
  357. <!----- Regular ----->
  358. <div class="block">
  359.     <p class="dave">TG: did you get the beta yet</p>
  360.     <p class="john">EB: no.<br />
  361.                     EB: did you?</p>
  362.     <p class="dave">TG: man i got two copies already<br />
  363.                     TG: but i dont care im not going to play it or anything the game sounds boring</p>
  364. </div>
  365.  
  366. <!----- Interactive ----->
  367. <div class="block">
  368.     <table class="ichum">
  369.         <tr class="dave">
  370.             <td>TG:</td>
  371.             <td>did you get the beta yet</td>
  372.         </tr>
  373.         <tr class="john">
  374.             <td>EB:</td>
  375.             <td>no.</td>
  376.         </tr>
  377.         <tr class="john">
  378.             <td>EB:</td>
  379.             <td>did you?</td>
  380.         </tr>
  381.         <tr class="dave">
  382.             <td>TG:</td>
  383.             <td>man i got two copies already</td>
  384.         </tr>
  385.         <tr class="dave">
  386.             <td>TG:</td>
  387.             <td>but i dont care im not going to play it or anything the game sounds boring</td>
  388.         </tr>
  389.     </table>
  390. </div>
RAW Paste Data