Actions

Work Header

A Newbie's Guide to Podficcing

Chapter Text

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

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.

Not skin

Or don't use a skin at all. That's perfectly ok too.

For example, this layout by Kess is one possible way of formatting your posts without a skin.