On AO3, it's very common to use skins to format podfic.
AO3 has two different types of skins.
- A site skin changes how every page looks to one AO3 user. For example, one that makes the site dark, with white lettering.
- A work skin changes how specific works look to all AO3 users. This is the kind you want to use for podfic. (Important!!)
HTML & CSS
HTML is the kind you use in posting a work. CSS is more behind-the-scenes, and what you use to make skins.
CSS is complicated, and kind of a mess. It's something I'm still learning, and it's more than I want to get into here. But there are lots of other websites and tutorials that can help you with CSS. The main issue is that AO3 is very stringent about which bits of CSS/HTML they allow on AO3, and many things will just be removed from your code when you try to save it.
Some podfic skins
- Eos Rose made a series of lovely podfic skins. These all have specific color schemes, be aware that if someone is using a site skin that changes AO3's main colors (for example, dark mode) it might not look good with that.
If you've got another skin you use, please link it in the comments!
My podfic skin
This is my podfic skin. It takes the same basic structure as Eos Rose's (cover art on the left, details on the right) but without the colors, fonts, or frills. This way it will look good with any cover art, regardless of its color or style. It's also compatible with night modes/dark themes.
The skin is here.
On a screen that's wide enough (900px or more) it has the art on the left and the info on the right. On a smaller screen (ie. phones) the art goes above and the info goes below.
Making your own
Maybe you like one of the skins I showed, and you're happy to use it as it is right now. Great!
More likely you're thinking, "I mostly like that one, but there are a couple things I want to change..."
The good news: you can take any of these codes as a base, and then edit them to fit your tastes. The bad news: this might take some trial and error, and playing around with code.
So go create a work skin. Name it "[username]'s Podfic Skin" or whatever you want. Copy in the code from the skin you liked best. Figure out which parts are doing what. Add, remove, splice, and—if you figure out something you really like—comment down below and share it with all of us.
Or don't use a skin at all. That's perfectly ok too.