Local Menace

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!

CSS Code for Workskin Below (for copy-pasting):

WIP

___________________________________

“Get up!”

And he was up, hands above his head and everything. The guy in all black proceeded to pat him down along his pockets while pointing a gun at him otherwise. 

“How do you not have a wallet on you?”

“I’m a college student, I can barely afford tuition.”

That’s a lie, he was on a full ride scholarship, but they didn’t need to know that. 

“Oh you too?”

Did this bitch just say ‘you too’ ? No way.

“‘You too?’ Are you doing this to pay for college???”

Ancients, the school system sucked if he had to resort to crime for this.

“Yeah- you wouldn’t believe how expensive my major is, the textbooks alone cost more than my rent!”

“Holy shit, no kidding. Yeah, why are textbooks so expensive? Why am I paying hundreds of dollars for something that could have been a 2 dollar pdf?”

“Right! I tried asking my professor instead, but he said he’d fail me if I didn’t have the right materials! It’s driving me nuts. Like how am I supposed to pay for all this?”

How Dannt started making conversation with his own robber, he didn’t know, but he was happy to finally complain with someone. He hadn’t exactly made friends since he got here.

“Personally I buy used books, and the more trashed they are, the cheaper. Then, you can just use the pdf version but still have the textbook in class. It’s honestly so much easier. Or you can see if you can borrow it from the library and just bring it in for the classes he checks it, then return it after to avoid the fees. That option is a bit more troublesome though.”

“Oh shit, no way! That’s awesome, I never thought of that, thanks man! Man, I wish I talked to you sooner.” 

“Yeah, it’s all good, maybe just avoid the crime after this? There’s tons of online jobs you can do during class and stuff. I don’t know, there’s always another option than crime. You sound like a good guy, just desperate.”

The robber turned friend (?) lowered his gun and sighed before returning the items in the bag to everyone. He then apologized to the cashier and then to everyone else before giving Danny a hug (how long had it been since he’d gotten one of those?) and leaving. Danny was so proud of him he almost cried (again). 

______________

I know it's a bit weird and out of place, but that's bcs its a snippet from a fic I'm writing on ao3 😭

The bats are in awe. Eventually the Joker hears about this and comes to pick a fight. Everyone freezes, wondering how this will play out. Will he "tame" the Joker too? Gotham holds its breath...

Danny kicks him in the dick

Then peppersprays him while he's down. Then he uses the super nasa space travel level spray on glue he had developed as a science project tomake sure Joker can't move before calling the police.

Red Hood shows up at the next Rogue game session with snacks

The art is absolutely beautiful

I'm trying to guess who's who

Danny is the capybara

Two face is the rabbit?

Penguin is well yk penguin

Is the bird on top of his head is red hood?

I'm gonna go out on a limb here and say the croc is killer croc

Okay so, i got my dm permissions set "everyone" rn cuz of the truce and the weirdest thing just happened.

I got a messege saying they had accidetally reported my account instead of someone elses, and that they got their friends to do it too. I looked at the account and they didnt seem like a bot so i talked a bit.

When i didnt seem worried about it they messaged again and told me to also contact this guy to do an apeal or something. Googled the guy, hes real and works for tumblr the discord tag didnt show shit, also the first picture of the guy that shows up is also aperently what he uses as a discord pfp.

Anyway i sent him a friend request on dc because im not in the business of giving random people my phone nr.

First of all he had one of those note thought bubbles that anyone can add to their profile that said "trusted tumblr staff member" which in not only sketchy but also a weird way to say that?? Anyway i talked to him too and he sent me a photo of his "certificate" when i told him i thoight this was a scam. And after i told him anyone could make a digital image with the tumblr logo on it he fucking blocked me.

Now some of you might be wondering "if its a scam then why is the account that messeged you so normal?" Well my tech suport friend says that the peron who messeged me probably had their account stolen in the same way. Now i for one have no clue why someone would steal tumblr accounts but tech support says that theyll probs start promoting crypto or something.

I had a fucked up situation at con today