AO3 LIME

This is the source code and documentation for the AO3 LIME work skin by associate.

Create a new work skin if you haven't already. Copy or save the default LIME skin and paste it into the CSS field in your work skin. Since this one includes every character, you can reuse it easily for multiple fics with any combination of characters, so long as you don't need to make one character different in a specific fic. In that case, create another skin and edit that one to suit the needs of that fic.

implementation

The individual message template is:

<p><strong class="user_S">username</strong></p>
<p class="side character">Message goes here!</p>

Change S and side to [ L / left ] or [ R / right ].
Change character to the given name of the sender in lowercase.
Change username to the character's LIME username. Canon usernames can be found in the reference table.

All message paragraphs need to be wrapped inside <div class="LIME"></div> tags. Make sure that the quotes are "" and not “”. A very short but complete example is:

<p>A regular paragraph of the fic preceding the chat section.</p>

<div class="LIME">

<p><strong class="user_L">Sakuya</strong></p>
<p class="left sakuya">This is an example message!!</p>

<p><strong class="user_R">M.U</strong></p>
<p class="right masumi">So is this.</p>

</div>

<p>A regular paragraph of the fic following the chat section.</p>

After you save it, AO3 will turn it into something that looks like this:

<p>A regular paragraph of the fic preceding the chat section.</p>

<p></p><div class="LIME">

<p>
    <strong class="user_L">Sakuya</strong>
  </p>

<p class="left sakuya">This is an example message!</p>

<p>
    <strong class="user_R">M.U</strong>
  </p>

<p class="right masumi">So is this.</p></div>

<p>A regular paragraph of the fic following the chat section.</p>

It's nothing you have to worry about; it's just the (bad) way that the plain text editor processes HTML. You can still edit things and save it without breaking the skin, but it's not quite as easy to deal with, so I recommend testing first, then preformatting your entire fic in one go to paste. WordHTML is useful if you want to convert a rich text doc (Google Docs, Microsoft Word, etc) into HTML quickly. Inserting the templates into your fic is fairly straightforward at that point.

customization

The base of the skin is everything before #workskin .sakuya. You can edit it, if you'd like, but colors and icons are determined by everything after. Each character class comes with three rules.

#workskin .tsuzuru {
  background-color: #00e6b4;
}

#workskin .tsuzuru::before {
  background-image: url("https://i.imgur.com/dW3iEQp.png");
}

#workskin .tsuzuru::after {
  border-color: transparent #00e6b4 transparent #00e6b4;
}

The first and third rule change the color of the message from the default #4294f8. The second rule sets the icon associated with that character. Changing the url will change the icon. Character classes with no icons do not need this rule. (e.g. #workskin .izumi::before doesn't exist in the default skin)

Characters with lighter image colors have slightly different intial rules to turn the text black.

#workskin .citron {
  background-color: #ade601;
  color: #000;
}

#workskin .citron a {
  color: #000;
}

If you would like to turn the text back to the default white, delete the a rule in its entirety, as well as the color: #000; line in the initial rule. Likewise, add those lines if you would like to change a character's text to black.

If you would like icons but would like for all the text bubbles to remain the default blue instead of individual image colors, you only need the ::before sections of character classes. You can copy or save this variant of the default skin.

reference

view in google sheets

For better viewing on mobile, please click the button below to see the reference table for icons, colors, and LIME/SNS usernames.

view in google sheets

contact

Please leave a comment on the AO3 post if you have any questions! I also do like seeing where it's been used, so feel free to link me your fics after you post them! I may be a bit slow to respond, but I do still check comments so I'll get back to you for sure.