API tools faq
paste
Advertisement
wovenstarlight

Homestuck Workskin (extended): HTML

wovenstarlight
Jun 20th, 2021 (edited)
1,635
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.16 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!