Site skins can be tricky and intimidating to tackle, but it is also super fun to personalise your AO3s look. Here's what mine looks like v.s the basic look:
Much nicer isn't it? (maybe it's not to your tastes, but that's ok I'm gonna show you how to make it exactly what you want to see)
This is where you go to start:
You will be brought here, and the first thing you need to do is give your site skin a unique name (a keyboard smash works fine if you can't think of anything right away), you can also give your skin a description if you want. This is my testing skin. Next click the use wizard button:
This is where you can input font/text size/e.c.t. (I just leave the other things alone because I don't really care about them). And for colour you can simply look through the handy list provided, there is no real substitute for trying them out and seeing what suites your needs best. I have included my site skin settings incase you already like what I've got going on:
Once you are happy with the colours, text, and layout of your custom site skin you can click submit (this is basically saving it, you can do this earlier in the process if you want as long as all the required* fields are filled out). Once your skin has been saved it should show up under My Site Skins on your dashboard, simply click use and you're good!!!:
You can edit your skin any time simply using the same steps.
HTML and CSS on Ao3 is an awesome tool that allows for some amazing fandom applications. I have made a habit of collecting these resources, but one of the coolest types of fics I've found are actual interactive games in Ao3, and me being the html tryhard's self-appointed librarian, I've decided to compile these together in both my resource doc and on this tumblr post.
But can it run Doom? by gifbot: Play Doom with every ao3 user on the page!
TropĂŠmon by gifbot : an Ao3 based pokemon game!
Nethack Sokoban by gifbot: a puzzle game
I Donât Think Weâre Ready for the Takeoff by gifbot : besides being a phone with interactive bits, you can play flappy bird
Conwayâs game of life by gifbot
I Crush Everything by gifbot: play as squid that crushes things!
Five Times Luna Saw Snape Die (and One Time She Didnât) by gifbot: Harry Potter Point and click adventure
Changing the game by mackerel_cheese: A really cool Game Changer mini-game style fanfic
New Roman Times Games by mackerel_cheese: play percy jackson themed word games
Mythomagic, 1st Edition: Battle of Olympus by mackerel_cheese : percy jackson card game simulation fic
do you believe in coincidences? by mystyrust: danny phantom phone fic
Romance Route DLC by jihnari: a The Hundred Line -Last Defense Academy Dating Sim hosted IN ao3!
Thousand Illusions by BurntMochicha: Dr. Stone Visual novel
Makoto Calls Byakuya a Bitch: An Interactive Fic by solace_at_last: Dangan Ronpa Visual Novel
Project Sekai Ao3 edition by polyneedpilled: Rhythm game IN ao3
Tower of Hanoi by the_untamed_poet25
Simon Sequence Game by the_untamed_poet25
Several Hangman games: X X X X X X X X X X by the_untamed_poet25 Hangman collection
Who Stole the Treasure on the Sunny by the_untamed_poet
Hunt the Whumpus by Charles_Rockafellor
Bubble-pop! Game by Charles_Rockafellor
Hearkâs character creator by hearkÂ
Closed Loop System by One_of_Them (greenbean_paste) Murderbot diaries fic with PLAYABLE minesweeper
spare time by One_of_Them (greenbean_paste) sad bowling game
Sudoku in Heart Flutter Against the Stars by WordsofWilderness: Sudoku in a Harry Potter Fanfic
Snao3ke by taxen99 : Snake!
windows9ao3 by taxen99: donât know if this technically counts since its a computer but its very cool
Figured You Out - by Suzukitich multiple logic puzzles
Logic Grid Puzzle Work Skin & Tutorial by BookKeep
The Case Of The Clickable Murdle by VThinksOn
Special thanks to @gifbot for both making a bunch of these games, but also making me aware of more games I had missed when making this.
I just copied and pasted a CSS code from somewhere earlier this year, completely forgot where from, but this is my favourite site skin.
The only problem is that when I went on ao3 today, there was suddenly a new "button" at the top (the Mark for Later/Mark as Read) as you can see, they're the only buttons that aren't blue. At the bottom of a work that I've "marked for later", there's also a new button (Mark as Read).
It's really bothering me, but since I simply copied and pasted the CSS originally, I don't know how the coding actually works to update/include these new buttons into the CSS.
Could I please have some advice from people who actually understand all this coding stuff?
How I added "instant translation" to the non-english text on my fic: a very easy 3 step guide
Hello!
I recently posted a Wolfstar fanfic called Instance of Happenstance and received a lot of compliments on a small piece of code I used. Both @marigold-hills and @leavesthatarebrown suggested I share how I did it, so here I am, finally explaining it in a Tumblr post!
Before diving into the details, I want to clarify that I didn't write this code myself.
Initially, I tried following this tutorial, but I stumbled upon a better solution in the comments of that post. The code on the tutorial itself does work, but a) it's harder to use and b) it doesn't work as well if you're planing to have multiple paragraphs that you need to show the translation on the same fic.
The solution someone presented on the comments, however, is very simple and easy to use for as many paragraphs as you need, but the explanation there wasnât too clear, so I decided to expand on it to make it easier for others to implement.
All credit to Ao3 users La_Temperaza (who wrote the orginal post) and Nikkie2571 (who posted this code on the comments).
What Does This Code Do?
This code adds an interactive feature to your fanfic, allowing readers to hover over a specific paragraph (or tap on it if theyâre on mobile) to instantly change the text to something else â also set by you.
While this can be used for various purposes, I think it's particularly useful to display instant translations of non-English dialogue/text directly in the story. The code offers a much smoother alternative to the clunky âsee end notes for translationâ thingâwhich, let's be honest, can be a pain for readers, especially in long chapters.
For example, in instance of happenstance, Sirius discovers an old journal written entirely in French. I wanted to maintain the sense of mystery and intrigue that would be lost if I simply said the journal was in French, but wrote the text in English.
This solution let me keep the best of both worldsâretaining the authenticity and the immersion of the French, while still making the story easy to follow for the readers.
Now, I know this sounds complicated, but I assure you, it's not!
Down bellow is a quick, 3 steps tutorial on how to do it. I hope this is helpful! (:
(I'm doing this on the computer, if you're doing it on mobile, the layout of the website might be different from my printscreens)
Step 1 - Create The Work Skin
I'm gonna go right to the point here, but if you want to know about Work Skins in detail, I suggest this Ao3 Article.
On your Ao3 Dashboard, click on the fourth link on the sidebar, which is "Skins".
Then, on the page that opens up, click on "My Work Skins"
Then, on the top of the page, select "Create Work Skin"
Now, you'll see the form to create your skin, which looks like this:
Leave the "Type" as "Work Skin". On the Title, you can give any name you want to your skin, but I suggest you choose the same title as your fic or something like "instant translation", so you'll know what it's about later.
You don't have to worry about any of the other fields, except for the CSS one, where you should copy and paste exactly what I'll put bellow:
... and you just have to click "save" on the bottom of the page, and this step is done.
Step 2 - Apply the Skin you created to your fic
For a new work, click on "New Work" as usual. If it's a fic you're already posting, you can add this as well, just click the "Edit" button.
Now, on the form of your fic, on the "Associations" tab, right under the menu where you select the language of your fic, you'll see a "select a work skin" option.
On this field, you should select the workskin you just created on the previous step, searching by the name you gave it on the "Title" field.
Step 3 - Insert the text
The code we're gonna use is this one:
<p class="change_on_hover">
<span class="off"> paragraph in foreing language </span>
<span class="on"> paragraph in english </span>
</p>
If you have no idea what this means, hold my hand, we're gonna get through it together!
First, copy your ficâs text into the AO3 text box as you normally would. Then, switch the text box to HTML mode so you can see the underlying code.
Now, scroll down until you find the paragraph you want to translate. After pasting, it will likely look something like this:
Note how each paragraph in HTML starts with <p> and ends with </p>. These tags indicate where a paragraph begins and ends.
Our goal is to modify that first <p> tag so it tells the browser, âHey, this paragraph is different from those other ones. It should change when hovered over or clicked.â
To do this, weâll change <p> to <p class="change_on_hover">. This marks the paragraph as specialâone that should switch text when interacted with.
Now note how instead of having a single paragraph, we need two versions of the text:
In blue, the original (non-English) text, which will be shown by default.
In red, the translated (English) text, which will appear when the reader hovers over or clicks on it.
For the original text, wrap it inside a <span class="off"> tag, ending with </span> like this:
<span class="off"> insert here the whole text of the paragraph in the foreign language </span>
For the translated text, wrap it inside a <span class="on"> tag, also ending with </span>. This will replace the original text when hovered over or clicked:
<span class="off"> insert here the whole text of the paragraph in english </span>
And don't forget to end the whole thing again with </p>
Again, here's how it looks on my fic:
With the paragraphs that come before and after the translated text, just leave them as they are. They should still start with <p> and end with </p>. No changes needed!
You can use this method for as many paragraphs as you want, whether in the same chapter or across different chapters. As long as the Work Skin is active, the effect will work seamlessly throughout your fic.
When I tell you I am fighting for my life right now on AO3, just trying to get this silly HTML code to work, I mean it. I feel like I might die before this is done.
Listen, I love the Hover To See More code on AO3, but itâs sucks ass as someone who only reads fanfiction on their phone. I canât hover, so I canât reveal what sort of translation is hidden from us for immersive reasons of reading as the character. And that makes me not want to read the fic anymore out of frustration.
Unless someone has a way to have the hidden hovering text be âhoveredâ over on phone, please just use the spoiler bar code that all I have to do is tap it to be revealed.
