A tutorial for a workskin that allows you to make text messages that look similar to the messages in MLQC!
I made an MLQC text message workskin for AO3! It's inspired by the text messages in the game and it looks like this:
As you can see, you can scroll through the text messages. I posted a tutorial on AO3 about how to code it for your own text fic. Feel free to check it out if you're interested! ❤️
I’ll probably be working on a LADS or Tears of Themis inspired text message workskin next! I'm looking forward to finishing them eventually. I hope you can look forward to it too :3
hi! sorry if this has already been asked, but pretty please how did you do the super cool html for the pop-up boxes in discordant that let us read translations for the eridian stuff??
im forever in awe of your formatting for this fic with all the media stuff and i loved the translation boxes, they're such a good idea for eridian / english language barrier things (and also bloodymary language barrier, which i may be trying to write..) specifically how did you get the box to extend the screen Only when the relevant text is being hovered over, then revert back to a fixed position after? and not make the fic awkward to scroll through with it sliding to the extra space on the right unnecessarily?
sincerely, a humble ao3 writer who has no idea how html and coding works <3
Oh, of course! Okay, little HTML code crash course for pop-up text boxes (that work via hovering on pc and via tapping on mobile!)
So! You want to make a little textbox to help clarify details about certain words in your writing. Let's say you want to define a word for your audience. We can do that easily, like in the example below:
And hovering:
The code for this is, thankfully, relatively simple.
If you do not already, create a workskin that you can apply to your fic. Then, into that workskin, you are going to add the following css code (included as text below the 'read more' so you can just copy-paste from there):
For customization:
The underline beneath the word that can be hovered over is colored by 'border-bottom.' If you want to change the color, find the hexcode of the color that you want (just use google's color wheel) and replace #058fff with it.
The background of the textbox is determined by 'background-color' (currently #c5d2f0)
The gradient that I use is determined by 'background: linear-gradient.' The color the gradient starts as comes first (#bff0e3) and the one it ends as comes second (#cbb6fd)
The gradient will always overpower the plain background color, which I have in my code for redundancy. If you do not want a gradient and just want a solid background color, simply remove the gradient line of code.
The color of text within the textbox is determined by 'color' (currently #1e3a2f)
For a larger or smaller textbox, adjust 'width' (now 240px)
Once this is in your workskin, you can use it within your fic. This has to be done within the HTML editor of the fic, NOT the Rich Text editor.
Find the text that you want to be able to hover over and replace it with the following:
<span class="show">Hover This Word<span class="hide">This is the hidden text that pops up inside the box.</span></span>
Then insert the appropriate information (change 'Hover This Word' to the word you want showing, change the second part to what you want in the box).
Altogether in a paragraph within the HTML editor, it might look like this:
<p>This is regular text, but <span class="show">Hover This Word<span class="hide">This is the hidden text that pops up inside the box.</span></span> the rest of the sentence continues here.</p>
Keep in mind, I am not phenomenal at code. There are as many redundancies as I could manage within this, but occasionally there will be some cutoff at the edges of the page to ensure that there isn't overflow. Ao3 can't dynamically fix this because all screen sizes are different. However, this has all worked pretty well for me thus far.
I hope this is helpful, and that you are able to use it within your own fics! Let me know if you have any more questions as to how it works or how to use it, I would happy to answer to the best of my ability!
I coded a fully interactive phone into Ao3 and it feels like my head has been bashed in at Terminal Velocity
This bad boy
-Plays a song
-Has multiple text convos for you to read
-Lets you send messages
-Gives you multiple dialogue options
-Changes notif display based on what you've already clicked
More fan art for "A Dog's Breakfast" by anyrei !!!
I really wanted to make a kind of phone WeChat app with the message exchange and I dit it !!
So I made the selfies and little quick profile picture to go with it hehe
HELLO I know you only really know me (if you do) as a commentor on your stuff but I have a um...coding question? Lmao.
How do you code your drop down arrow for your content warnings in your notes??
I never remember what warnings I need so I forget to add them but i was gonna try to go back and do so.
Hey! Of course I recognize the name from my comments (which I'm admittedly behind in replying, currently tapping away at them while I wait in the airport). Hope you're doing well!
So for anyone else seeing this, they're asking how I add my "click to reveal" content warnings in the beginning notes of my fics, which I like to do for long fics where there are elements that could do with some extra heads up or don't merit a full tag in ao3.
They look like this:
So this is actually really simple to add as I just I use the <details> tag in html. No work skins for this one! Here's a snippet of how I use it for my content warnings, the text in red is what you can replace with whatever you like:
<details>
<summary><b>Click for content warnings (possible spoilers)</b></summary>
- Warning 1
- Warning 2
- Warning 3
</details>
You can put pretty much anything in that space between the </summary> tag and the </details> tag, but that's the format I use.
It also won't read aloud for screen readers unless they actually click it, which is good. Though for whatever reason when I download the file as an epub it will read them out even though I can't click to reveal them in the file, but this might be dependent on the type of TTS used.
HI I'm a huge fan of your works and (sorry I don't) know if this has been asked before) but I'd love a tutorial on how you made a scrollable phone work skin for your ao3 fic?
heyy man!!! for the curious, i'm assuming the scrolling phone work skin is from it is love that conquers all, which used a container in the work to mimic whatsapp:
the skin is NOT mine!!! i adapted some (read: all) of the code from etc e tal / pe_pe_peperoncinocandy's work Whatsapp Workskin Template /Revamped. it is incredibly in-depth, they show you how to create that scrolling container, and how to add things like images, changing colours of the names, and even switching between light and dark modes!!!
there are ""other"" phone workskins that i've made over the years, an ao3 one and a gmail one, and they can be turned into a scrolling phone gimmick as well if you apply the code from the whatsapp workskin (it has been a while since i've coded anything for ao3 so if i get the time i might link another workskin tutorial or adapt the code myself to make it a little clearer)
