API tools faq
paste
wovenstarlight

System Window HTML

wovenstarlight
Sep 18th, 2020 (edited)
155
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.90 KB | None | 0 0
raw download clone embed print report
  1. <!-- Companion paste to my CSS for the System Window AO3 work skin. Be sure to credit @wovenstarlight when using this.
  2. Notable features are annotated in comments, so that you can find and modify them.
  3.  
  4. HOW TO USE:
  5. - Create the associated work skin with the CSS from the following link: pastebin.com/m0vbKHQp
  6. - Create a new work/chapter, or edit an existing one (if trying to add this to a multi-chapter work, edit the entire work).
  7. - 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 two <div> tags, one with the class "window" and one with "windowcontent".)
  8. - Preview the work to ensure it works as expected, then Update. (Double-check for any <p></p> tags, which should be removed. *See HTML note 1 for an exception.)
  9.  
  10. WORK SKIN NOTES:
  11. - This work skin is made for the "The S-Ranks That I Raised" fandom, but you can adapt it for other fandoms, with appropriate credit given.
  12. - All text is replaceable.
  13.  
  14. HTML NOTES:
  15. 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. ***EXCEPTION:*** The only case where you should leave in an instance of a <p></p> in is if you decided NOT to add a heading such as "Message Window".
  16. 2. AO3 removes comments and often adds rel="nofollow" to links when saving a work. Don't worry about either of these.
  17. 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.
  18.  
  19. ONCE AGAIN, THIS WORKSKIN ONLY WORKS IN COMBINATION WITH ITS COMPANION CSS, AVAILABLE HERE: pastebin.com/m0vbKHQp
  20.  
  21. Have fun, and be sure to credit @wovenstarlight! -->
  22.  
  23.  
  24.  
  25. <!-- Message Windows: used for most miscellaneous system notifications, including level up messages, "skill has been activated", "skill cannot be activated", stuff like that -->
  26. <div class="window">
  27.     <p class="message"></p> <!-- the menu bar. the "message" class can be replaced another window type, as seen below, or left out altogether to give no heading to the window -->
  28.  
  29.     <div class="windowcontent"> <!-- Make sure to include the hidden "[" in the first paragraph, and a hidden "]" in the last paragraph for when creator's styles are turned off. -->
  30.         <p><span class="hide">[</span>Target’s keyword influence is incomplete.</p>
  31.         <p>Optimized Awakening for a target with completed Awakening is impossible.<span class="hide">]</span></p>
  32.     </div>
  33. </div>
  34.  
  35.  
  36.  
  37. <!-- Announcement Window: only translated occurrence is the below example. Seems to overlap with Message Window? I put it in just in case -->
  38. <div class="window">
  39.     <p class="announce"></p>
  40.  
  41.     <div class="windowcontent">
  42.         <p><span class="hide">[</span>The Title “Caregiver” is in effect.</p>
  43.         <p>Caregiver Supplementary Skill - Last Repayment</p>
  44.         <p>The skills and abilities of Awakened Person “Han Yoohyun” will double in efficiency.</p>
  45.         <p>Duration time - 1:00<span class="hide">]</span></p>
  46.     </div>
  47. </div>
  48.  
  49.  
  50.  
  51. <!-- Status Windows: used to display name/titles/stats/skills, both of self and of others. Example 1: -->
  52. <div class="window">
  53.     <p class="status"></p>
  54.  
  55.     <div class="windowcontent">
  56.         <p class="wintitle"><span class="hide">[</span>Awakened Person – Han Yoojin</p>
  57.         <p>Title: <strong>Dragon Slayer</strong> <span class="skillrank">(L)</span>, <strong>Perfect Caregiver</strong> <span class="skillrank">(L)</span></p>
  58.         <p>Level 1</p>
  59.         <div class="stat">
  60.             <p><strong>Stamina:</strong> 6</p>
  61.             <p><strong>Strength:</strong> 4</p>
  62.             <p><strong>Agility:</strong> 5</p>
  63.             <p><strong>Mental:</strong> 4</p>
  64.             <p><strong>Mana:</strong> 2<span class="hide">]</span></p>
  65.         </div>
  66.     </div>
  67. </div>
  68.  
  69. <!-- Status Windows, example 2: -->
  70. <div class="window">
  71.     <p class="status"></p>
  72.  
  73.     <div class="windowcontent">
  74.         <p class="wintitle"><span class="hide">[</span>Awakened Person – Kim Sunghan</p>
  75.         <p>Current stat rank A</p>
  76.         <p>Possible Awakening stat rank A~S</p>
  77.         <p>Optimized Initial Skills</p>
  78.         <p><strong>Indomitable Body</strong> <span class="skillrank">(S)</span> Acquisition failure</p>
  79.         <p><strong>Regeneration</strong> <span class="skillrank">(S)</span> Acquisition failure</p>
  80.         <p><strong>The Earth’s Shield</strong> <span class="skillrank">(A)</span> Acquired<span class="hide">]</span></p>
  81.     </div>
  82. </div>
  83.  
  84.  
  85.  
  86. <!-- Reward Windows: used when an achievement is earned, i'm guessing also when a dungeon attack is completed and the like -->
  87. <div class="window">
  88.     <p class="reward"></p>
  89.  
  90.     <div class="windowcontent">
  91.         <p><span class="hide">[</span>Impossible Achievement! You’ve hunted a dragon by yourself!</p>
  92.         <p>Legendary Grade Title <strong>‘Dragon Slayer’</strong> granted!<span class="hide">]</span></p>
  93.     </div>
  94. </div>
  95.  
  96.  
  97.  
  98. <!-- Information Windows: used for descriptions of skills, titles, and items. Example 1: -->
  99. <div class="window">
  100.     <p class="info"></p>
  101.     <div class="windowcontent">
  102.         <p class="wintitle"><span class="hide">[</span>Dragon Slayer <span class="skillrank">(L)</span></p>
  103.         <p>The proof of a warrior who has hunted a 1st Rank dragon type alone.</p>
  104.         <p>Title Supplementary Skills</p>
  105.         <p><strong>Poison Resistance</strong> <span class="skillrank">(L)</span></p>
  106.         <p><strong>Curse Resistance</strong> <span class="skillrank">(L)</span></p>
  107.         <p><strong>Fear Resistance</strong> <span class="skillrank">(L)</span></p>
  108.         <p><strong>Lauchtas’ Natural Enemy</strong> <span class="skillrank">(S)</span><span class="hide">]</span></p>
  109.     </div>
  110. </div>
  111.  
  112. <!-- Information Windows, example 2: -->
  113. <div class="window">
  114.     <p class="info"></p>
  115.  
  116.     <div class="windowcontent">
  117.         <p class="wintitle"><span class="hide">[</span>Wish Stone – Myth Rank</p>
  118.         <p>Grants one wish for the user.</p>
  119.         <p>※Exception: a dead person cannot be revived<span class="hide">]</span></p>
  120.     </div>
  121. </div>
  122.  
  123.  
  124.  
  125. <!-- Inventory: what it says on the tin -->
  126. <div class="window">
  127.     <p class="inventory"></p>
  128.  
  129.     <div class="items">
  130.         <p class="hide">[Inventory:</p>
  131.         <!-- It is MANDATORY that, for each <p> item, you split the <p> tag from the actual text, the same way it's done here. So <p> on a single line, then hit enter and write (itemname, itemcount), then enter again and close the </p> tag. If this isn't done, the spacing fucks up in a major way. -->
  132.         <p>
  133.             <span class="itemname">Red Dragon's Greatsword</span><span class="hide"> (</span><span class="itemcount">x1</span><span class="hide">)</span>
  134.         </p>
  135.         <p>
  136.             <span class="itemname">Gate Stone</span><span class="hide"> (</span><span class="itemcount">x20</span><span class="hide">)</span>
  137.         </p>
  138.         <p>
  139.             <span class="itemname">Wish Stone</span><span class="hide"> (</span><span class="itemcount">x1</span><span class="hide">)]</span>
  140.         </p>
  141.     </div>
  142. </div>
  143.  
  144.  
  145.  
  146. <!-- Item Windows: used when describing list of item rewards or looking at a specific item's description -->
  147. <div class="window">
  148.     <p class="itemwin"></p>
  149.  
  150.     <div class="items">
  151.         <p> <!-- As with Inventory, be sure to space out the <p> tags from their content. -->
  152.             <span class="hide">[</span><span class="itemname">Gate Stone</span><span class="hide"> (</span><span class="itemcount">x10</span><span class="hide">)</span>
  153.         </p>
  154.         <p>
  155.             <span class="itemname">1<sup>st</sup> rank Granting Potion</span><span class="hide"> (</span><span class="itemcount">x5</span><span class="hide">)</span>
  156.         </p>
  157.         <p>
  158.             <span class="itemname">Red Dragon Supreme Sword</span><span class="hide"> (</span><span class="itemcount">x1</span><span class="hide">)</span>
  159.         </p>
  160.         <p>
  161.             <span class="itemname">Wish Stone</span><span class="hide"> (</span><span class="itemcount">x1</span><span class="hide">)]</span>
  162.         </p>
  163.     </div>
  164. </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!