AO3 Goodies
An ongoing a dump of my favorite AO3 tools, skins & tutorials.
AO3 SKINS
Juno Skin for AO3
Juno is a dark theme that's easy on the eyes and focuses on readability.
Dark theme, easy on the eyes
Larger fonts for improved readability on mobile
Focus on minimal design
Auto-resizes images to fit screen
Uniform button styling on mobile
Fixes issues with drop-downs going off-screen on mobile
How to add this skin
AO3 no longer permits public user skins, but you can manually add the skin's code to "My Site Skins".
Note: browser extensions and plugins that alter AO3's appearance may not be compatible.
Highlight and copy the entirety of the code below. (It's long, sorry.)
Login to AO3, and visit Dashboard > Skins > My Site Skins.
Click the 'Create a Skin' button.
Ensure 'Site Skin' is selected from the dropdown. Give your skin a unique name.
Paste the code below into the "CSS" text field, and click the 'Submit' button.
You'll now see your new skin under "My Skins". Click the 'Use' button to apply.
Here's the Code:
Click the button below,
...then copy ALL of the code on the page.
(This might be tricky on mobile, sorry.)
Current version: 2022.06.15.0 | Updated June 15, 2022
Updating to the latest version?
Unfortunately, the code doesn't update itself. You'll have to copy the updated code, and paste it into your account manually. But it's easy to do!
Copy the code located within the link above.
Login to AO3, and visit Dashboard > Skins > My Site Skins.
Click the 'Edit' button beside the custom skin you previously created.
Delete all of the existing text in the "CSS" text field, paste the new code in there, then click the 'Submit' button.
Change Log
Revision 2022.06.15.0
No changes, just moved code to a different host.
Revision 2021.05.14.0
Fixed color of kudos warning.
Fixed moving buttons issue present on some devices.
Revision 2021.02.21.0
Blocked that one fic with hundreds of tags that's crashing everyone's browsers.
Revision 2020.12.26.0
Added subtle highlighting on relationship tags within lists of works.
Expanded width of Summaries that appear within lists of works in Collections.
Desaturated the yellow cream color.
Revision 2020.12.19.0
Fixed the appearance if header images in collections.
Revision 2020.11.19.0
Reduced horizontal margins beginning and end notes within works for easier reading.
Improved sizing of heading tags (h1, h2, etc) within works.
Revision 2020.09.24.0
Changed background color of draft previews.
Revision 2020.09.19.0
Removed highlighting of previously-visited tag links.
Revision 2020.09.07.a
Ensures consistent display of larger font sizes.
Revision 2020.09.06.a
Fixes issue with Inbox checkboxes not appearing or working.
Fixes text color on yellow warning boxes.
Fixes bookmark text alignment.
AO3 Formatting
Easy, Bordered Text Boxes for AO3
Bordered text boxes are a great way to feature items like news articles or special sections in your works. With a bit of code, you can create text boxes that look like post-its, notebook paper, recipe cards, etc.The challenge, however, is that even it appears nicely on your screen, it may not appear correctly for those using skins or screen readers. The solution is to use simple formatting that does not rely on changes in text or background color.
How to do it? First, create a "Work Skin"
In AO3, visit your Dashboard > Skins > My Work Skins > Create a Work Skin
Give your skin a title (i.e. MySpecialWorkSkin)
Copy-and-paste the code below into the "CSS" field.
Click "Submit" at the bottom of the screen.
Next, put that Work Skin to work!
Visit your Edit Work page.
From the "Select Work Skin" dropdown, choose the name of the custom Work Skin you just created.
Above your body text, ensure you're working in "HTML" mode, rather than "Rich Text" mode.
Lastly, simply wrap the text you'd like to place in a text box with the following code:
<div class="specialbox">
YOUR TEXT GOES HERE </div>
That's it! Here's how it looks on various skins:
— — — — — — — —
Even if you use the code above, I still recommend that you mark the beginning and end of any special sections with a few symbols or dashes. That way, users with plugins that strip formatting will still be able to recognize that the section is "special". (Similar to what you see above and below this paragraph).
— — — — — — — —
AO3 Writing Tools
Easy Em Dashes (—) for Windows
Em dashes (—) are a great way to feature a "pregnant pause", but they're not a default element of most PC keyboards. As a shortcut, you can type Alt + 0150, but this is cumbersome and requires spare brainpower I don't possess.In this tutorial, I'll show you how to install a script that will automatically replace two dashes (--) with an em dash (—). Once installed, it'll work with any program on your computer, including web browsers and Google Docs.
Install the Script (Windows)
Download AutoHotKey from this site: autohotkey.com
Install the program.
Download the EmDashScript.ahk script file from my Google Drive. Save it to your Desktop. (Note, some antivirus programs may flag this as suspicious. It is not.)
Select the file, right-click, and choose "Copy".
Right-click the Windows Start Button, and choose "Run".
Type the following text into the field, then press Enter: shell:startup
Paste the script file into the folder that appears by pressing Ctrl + V on your keyboard.
Restart your computer.
That's it! Now when you type 2 dashes, it'll automatically switch to an em dash.
Twitter Tips for Creators
How to Use Red Block on Twitter
(Chrome Desktop Browser Version)
Red Block is an extension for Google Chrome that lets you block visible users in bulk.
You can also 'skip' mutuals or followers.With Red Block, you can:
Block or mute all of a user's followers or followings.
Block or mute people who liked or retweeted a post. §
Block or softblock protected followers from your account.
Import/export block lists. (Blocking only works on public accounts that haven't blocked you first. But, if you have an alt account, you can use Red Block to export a list of a user's followers, and then import that list as a "blocklist" into your main account.)
§ Note: You'll only be able to block interactions you can see. And unfortunately, in early 2021, Twitter changed it's app so that we can only see a limited number of likes or retweets on a single post—meaning we can no longer block everyone who interacted with a post using Red Block.
⚠️⚠️⚠️CRITICAL WARNINGS ⚠️⚠️⚠️
DO NOT SKIP
You can only block 500 users per session before Twitter will lock you out of your account. You'll know when this occurs because the timeline won't appear for you, or you'll receive an error during blocking.
When you get locked out, you'll need to do three things to continue: (1) clear your browser's cookies using the 'wrench' icon on Red Block, (2) log back into twitter from the twitter.com home page, and (3) reset Red Block's built-in "Block Counter".
You might also be asked to verify your account via text message or CAPTCHA. Do not use on unverified accounts.
Use at your own risk! I'm not responsible for any results.
Let's get started!
Install Chrome and the Red Block Extension
We'll be using the Google Chrome browser (desktop version). There's a mobile version for Android, but this tutorial will cover the desktop browser version.
Install the Red Block extension.
Restart Chrome.
Select A Block Mode:
Time to start blocking! Visit a twitter profile (if you want to block followers), or visit a specific tweet if you want to block users who reacted.
Click the red "X" icon in the upper-right corner of your browser to select a block mode:
Select a block mode: Block by Followers, Tweet Reactions, or Import a List (less common).
Next, Select Your Targets:
Your targeting options will be slightly different, depending on which mode you choose. But pay careful attention when blocking followers to ensure you're not accidently blocking follow-INGS.
When blocking tweet reactions, selecting Likes and Retweets is typically enough.
Next, Scroll Down to Decide What to Do With Them:
There's six (6) chainblocking options to choose from, but chainblock is the most commonly used one.
Chainblock: Blocks users from your account.
Unchain-Block: Unblocks all users.
Chain-Unfollow: Unfollows all users.
Chain-Mute: Mutes all users.
Unchain-Mute: Unmutes all users.
Export: Exports a list of users that can be used by Red Block at a later time.
Next, select how you want Red Block to handle users that may be your followers or mutuals:
Once you've selected all of your options, click the Run Chain-Block button to start to the process.
Keep an eye on that "Block Counter." Once you hit 500, Twitter will lock your account, and you'll need to follow the steps in the "Critical Warnings" section above to unlock and continue.
Twitter Tips for Creators
Get Notified When Your AO3 Fics is Mentioned on Twitter
Do you enjoy pain? Want to get notified when someone tweets a link to your AO3 work?Install the free IFTTT app (If This, Then That). You can set the app to regularly search twitter for your fic URLs, and notify you whenever it finds a new post.Full guide below ⤵️
First, install the Free IFTTT app: https://ifttt.com/
Next click Create to make a new “applet”. The free version lets you create up to 3 applets, so if you like, you can create one for each fic. But if you’re a cheap-ass like me, you can create a single applet that scans for multiple fics. (Note: each applet will only search for a maximum of 10 fics.) I’ll show you both ways.
Next, we’re gonna create a trigger. Click “If This” and search for “Twitter”. Select the blue Twitter icon.
Next, choose a Trigger type. Choose “New tweet from search”.
Next, we’ll tell the app what to search for. This is where you’ll decide if you want to search for a single fic URL, or multiple URLs.
⚠️Note: No matter which method you choose, be sure you NEVER include https:// or a slash at the end of your URLs.
✅ Here’s a single URL example:
archiveofourown.org/works/27586973
❌ Do not include https:// or slashes at the end:
❌https://archiveofourown.org/works/27586973/
✅ Here’s a multiple URL example:
(archiveofourown.org/works/27586973 OR archiveofourown.org/works/33940855)
Type OR between each url, and
Wrap the whole thing in parentheses. (see example)
⚠️THE OR MUST BE IN CAPS.
Remember, you're limited to 10 URLs in a single string.
If you go with multiple URLs, I recommend typing it out in Notepad first, cause the space in-app is tiny.
After you’ve inserted the URL(s), tap “Create Trigger”.
Next, tap “Then That” to tell the app what happens when your trigger is activated:
Tap “Notifications” from the Choose a Service screen.
Then, choose “Send a rich notification from the IFTTT app”.
Next, we’ll choose what we want our Notifications to look like. I typically only edit the Title, and leave the rest as-is.
Next, press “Create Action”, and then “Continue” on the screen that follows.
Next, let’s give the applet we just created a title.
This just differentiates it from other triggers (applets) you might create in the future.
Then click the big X on the screen that follows to exit.
That’s it! Whenever someone tweets your fic URL going forward, you’ll get a phone notification. It’ll run approximately every 30 minutes.
You can also use this to search for fic titles, but only IF the name of your fic is extremely unique.
Enjoy! 💜
Please do not republish without permission. Use tutorials at your own risk. Thank you!