This Is Magic - Tumblr Posts

i had a request to share the ao3 skin i created for my wangxian college au (shameless plug), but ao3 no longer allows public skins, so if you're a fic writer who includes text conversations and wants them to look like this:

here's how you can make it happen!

go to your ao3 dashboard > skins > work skins > create

add all of this css to the doc, then save it:

#workskin .phone-wrap img { max-width: 200px; }

#workskin .phone-wrap { max-width: 400px; padding: 1em 1.5em; margin: 60px auto; border: 1px solid black; border-left-color: transparent; border-right-color: transparent; border-radius: 15px; background-color: #FFFFFF; display: flex; flex-direction: column; align-items: flex-end; }

#workskin .phone-wrap p { margin: 0em 0em 1em; max-width: 75%; line-height: 1.25; position: relative; padding: 0.5em .875em; border-radius: 1.15em; }

#workskin .phone-wrap p.sender { opacity: 0.7; font-size: 0.8em; font-weight: bold; align-self: flex-start; margin-bottom: 0; }

#workskin .phone-wrap p.outgoing { background-color: #2a96f5; border-color: #2a96f5; color: white; text-align: left; }

#workskin .phone-wrap p.incoming { background-color: #e2e1e6; border-color: #e2e1e6; align-self: flex-start; }

#workskin .phone-wrap p.outgoing:after { content: ""; position: absolute; right: -0.5em; bottom: 0; width: 0.5em; height: 1em; border-left: 0.5em solid; border-color: inherit; border-bottom-left-radius: 1em 0.5em; }

#workskin .phone-wrap p.incoming:after { content: ""; position: absolute; left: -0.5em; bottom: 0; width: 0.5em; height: 1em; border-right: 0.5em solid; border-color: inherit; border-bottom-right-radius: 1em 0.5em; }

#workskin .phone-wrap p.title { font-size: 0.8em; color: #616161; text-align: center; max-width: 100%; line-height: 1em; }

#workskin .phone-wrap .chaticon p { width: auto; text-align: center; margin: 0; }

#workskin .chaticon { background-color: #e2e1e6; border-color: #e2e1e6; font-size: 1.5em; border-radius: 50%; margin: auto; margin-bottom: 1em; height: 60px; width: 60px; display: flex; align-items: center; justify-content: center; }

----------------

3. then, when writing your fic, wrap all text convos in a <div> tag with class="phone-wrap". that will create the phone screen-sized wrapper with borders. (wrapping it means that it opens with <div class="phone-wrap"> and everything else happens here, and then when you want the convo to end, you add </div>)

for every incoming message, add class="incoming" to the <p> and for every outgoing message, add class="outgoing" to the <p>. if you want your chat to still be distinguishable via alignment by someone who chooses not to use your skin, you should also add align="right" to every outgoing <p>.

for the chat icon on top of a chat, wrap the initials of the receiver in a <p> tag and wrap that in a <div> with class="chaticon".

for group chats, to add the name of a sender, wrap that in a <p> with class="sender". optionally, inside of that tag, wrap it in a <strong> tag. this will make sure it's bolded even without your skin.

to add a gif/image, wrap it inside the <p> tag with the outgoing or incoming class with <img class=“chat-gif” src=“[url goes here]” alt=“[description of image]”/>

example for a regular text:

<div class="phone-wrap"> <div class="chaticon"> <p>LWJ</p> </div> <p class="outgoing" align="right">hi</p> <p class="incoming">Who is this?</p> </div>

example for a group chat:

<div class="phone-wrap"> <p class="outgoing" align="right">hi chat</p> <p class="sender"><strong>Wen Ning:</strong></p> <p class="incoming">yoooo</p> <p class="outgoing" align="right"> <img class="chat-gif" src="https://64.media.tumblr.com/b33161ba62441664ecf3ad647e8c980c/caff55261bba6810-25/s100x200/d8aa0dc5c68a7c22d3fd519687901536f51f38fb.gifv" alt="Oprah GIF" /> </p> </div>