Hey! So I mentioned a while ago that I have a custom workskin to make my Magnus Archives fics with transcripts look more like the transcripts at The Magnus Archives Transcripts Archive, and never got around to showing how. So now I am!
With this workskin, you'll turn transcript fics that look like this:
Into this!
Link to my fic "Just a Rumour" to see the live example, no content warnings in these first two chapters, but rating may eventually change.
Here's how you can apply this to your own fic. Steps are listed below the cut:
1. Make a workskin.
For this step, I'll refer you to the ao3 guide on how to create workskins. Make a new one, or add the following code between the dashes below to your existing skins.
Once you've made your workskin, follow the steps in the included link to add that workskin to the fic you want to apply this style to.
2. Tell the fic where to apply the style
The document above also explains this, but just so you can see the actual steps here:
In your fic, under the html editor view, add
<div class "transcript">
To the front of the text that will be in this format (it may not be the entire fic! You can have it in the middle of regular prose if you like).
At the end of the section that will be in the format, close it off with
</div>
Now just save your draft and confirm that it's working! If it looks off, double check your html, make sure it took and didn't delete itself or isn't misspelled.
And btw, readers who may not like this format can turn it off themselves with the Hide Creator's Style button, so this is optional for readers! It also works well with screen readers as-is.
karma is a max, purring in my lap because he loves me
work in progress | ao3
by Ravel
Lestappen centred
Loscar already established
Potential Carlando
What if Charles, Carlos, Lando, Max, Oscar and Logan found themselves in an alternate reality with no European dates, online planning a trip to Brazil for Taylor Swift's The Eras Tour?
Follow their journey into the magic of The Eras in this cool interactive HMTL-formatted fanfiction!
If you've ever wondered how I and other writers create special work skins for certain fics, look no further! La_Temperanza has a whole library of tutorials for AO3 work skins and general tips and tricks. I've definitely made use of their code for a whole bunch of different projects, and I bet that you'll find something that'll help you in your writing journey.
Here's some of their tutorials that have helped me throughout the years:
Work-Skins:
How to Mimic Letters, Fliers, and Stationery Without Using Images
How to Mimic Author's Notes and Kudos/Comment Buttons
How to Mimic Email Windows
How to Make iOS Text Messages on AO3
How to Create Notebook Lined Paper on AO3
Sticky Notes on AO3 Without Using Images
How to Make Deadpool's Thinking Boxes on AO3
How to Make Newspaper Articles on AO3
Tips and Tricks:
How To Make Images Fit in Mobile Browsers
How to Make Linked Footnotes on AO3
How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile)
How to Wrap Text around Images
How to Make Customized Page Dividers
How to Make Invisible Text (That Can Be Highlighted)
Hello, I am 36 and I don't like reading stuff in small text because my eyes have deteriorated over many years of staring at screens.
With no obvious way to share AO3 work skins, I figured I'd share mine here.
The purpose is to make the text a good size, be more legible, and not go all the way across wide screens - it limits the width of the text area, and shouldn't break with the major site skins.
I do change the text to serif, which I find easier for long blocks of text, so if you don't want that you'll need to make your own adapted version that doesn't use the same font family.
I also added in a few extra pieces, so if you use the following:
<p class="divider">***</p>
It will put a nice division in to separate two scenes or a time/perspective shift.
And using:
<div class="title-image">IMAGE HERE</div>
Will make whatever image you put in have a width 95% of the text area, which is good for title images, and it will reduce if the screen shrinks.
I also included 5 different highlight classes, so using:
<span class="highlight-1">TEXT HERE</span>
will highlight that text in the colour scheme specified. Change the one to anything up to five for different colours. <Span> tags can be used at any point inside paragraphs or other blocks.
Ashe Easy Readin'
I have no idea if anyone but me can view the link, so I'll post the CSS below.
I also have a version up in the Stylish user styles gallery (Stylish is a browser plugin that lets you change website style sheets):
Easier Reading Ao3
Easier Reading Ao3 - Dyslexic Edition
These are useful if you want any unstyled works on the site to change to this style. I use it because it improves my Ao3 experience.
I recently spent a bunch of time creating and tweaking a custom workskin for a fic, and the process annoyed me enough that I built a tool that makes it easier.
The AO3 Workskin Sandbox makes it simple to:
1. import an AO3 draft/posted work and any related workskin
2. edit the workskin's contents and observe the changes in real time
3. export the modified workskin back to AO3
All importing and exporting is manual, so the tool doesn't require any AO3 credentials. It also doesn't save the content anywhere; nothing leaves your web browser on your local computer.
The sandbox is intended to support any AO3 work, whether it makes use of a workskin or not. I would be very interested to learn how the tool's instructions could be improved!
Consider this the v1 release of the AO3 Workskin Sandbox—it does exactly what I need in the most basic way! If you have ideas for how it could be more helpful or useful, I'd love to hear them.
