Log in

17 February 2013 @ 03:30 pm
AO3 Work Skin: "Simple Fancy"  

Full Size Image

So you want to have a custom layout for the podfics you've posted on AO3...

  1. Go your AO3 user dashboard.
  2. Click the "Skin" link (located under Preferences).
  3. Click the "Create Skin" button.
  4. For "Type." select "Work Skin."
  5. Give your skin a "Title."
  6. Copy-and-paste the following code into the CSS box:

  7. Click the "Submit" button. Congrats, you now have a custom work skin!
  8. Go to the "Work" you want to apply your new skin to and choose to "Edit" it (or create a new work, whatever floats your boat).
  9. Scroll down to the "Associations" metadata group located right before the "Work Text" field. Click the dropdown arrow next to the "Custom Stylesheet" field and select the skin you just created.
  10. Copy-and-paste the code below into the "Work Text" box and edit the contents of the table as appropriate for your needs:

Feel free to change up the color scheme and whatnot however you please. I just put this skin together today, so if there's something quirky about it, please let me know.

Default Color Scheme

Color by COLOURlovers

ETA: fire_juggler has posted an alternate color scheme here.
greedy_dancer has also tweaked the color scheme here.

Current Mood: happyhappy
chasingriver: riverchasingriver on February 17th, 2013 09:31 pm (UTC)
Oh wow!! Thanks! Off to try this now!
Eos Rose: Chibieosrose on February 17th, 2013 09:48 pm (UTC)
I just tweaked the look of the cover art credit a second ago, so be aware. :)

I hope you find this useful!
chasingriver: riverchasingriver on February 17th, 2013 09:50 pm (UTC)
Yeah, this is great! (And I'll update it, thanks.)

One sort of unrelated question, do you know how to create streaming versions of audio? (Any documents you could point me to?)

Eos Rose: Chibieosrose on February 17th, 2013 09:57 pm (UTC)
I included the code for the flash player AO3 uses in the HTML portion. You'll need a direct link to an mp3 to use it. A zip file or a link that requires you visit another page (like Box.com) won't work. Where/how do you usually upload? I can try to help find a way that works.
chasingriver: riverchasingriver on February 17th, 2013 09:59 pm (UTC)
Ah, I didn't realise they had their own - that's great. That'll work fine, as I host the files on my own site directly. Digging through the code now, thanks!
chasingriver: riverchasingriver on February 17th, 2013 10:01 pm (UTC)
Sweet! I couldn't be happier about this! You just made my afternoon. :)


I thought it would be harder, haha. I'll probably tweak it a bit more to add some other things on the right, but I didn't even know this was possible. Thanks so much!
Eos Rose: Chibieosrose on February 17th, 2013 10:03 pm (UTC)
That looks amazing! And, yes, please do tweak away! My goal was just to give people an idea ow what could be done to prettify our podfic posts. :D
chasingriver: riverchasingriver on February 17th, 2013 10:05 pm (UTC)
Oh, yes, this is sooo much nicer. Would you mind if I credited you/linked this page in a tumblr post?
Eos Rose: Chibieosrose on February 17th, 2013 10:14 pm (UTC)
Go for it! :)
Terrifyingly Friendly: tesla coil hat boyjelazakazone on February 17th, 2013 11:31 pm (UTC)
That looks awesome! I feel so overwhelmed at just posting podfics that I don't feel up to figuring out this skin business at the moment:D I'm so very happy to see eosrose offering it though!
Danielle: Amy Pondanalise010 on February 17th, 2013 09:51 pm (UTC)
You rock, bb!
Eos Rose: Chibieosrose on February 17th, 2013 09:57 pm (UTC)
Maggie: podfic: pinkphonesteas_me on February 17th, 2013 09:59 pm (UTC)
Seriously, this has to be the most awesome thing ever!

*runs off to try*
Eos Rose: Chibieosrose on February 17th, 2013 10:05 pm (UTC)
Play to your heart's content! If you do any cool tweaks, please feel free to share them. It would be cool to see other people share some possible themes. :)
Nicky Gabriel: homenickygabriel on February 17th, 2013 10:29 pm (UTC)
Wow, thank you! :)
Eos Rose: Chibieosrose on February 17th, 2013 10:32 pm (UTC)
Enjoy! I think a lot of people didn't know you could do this on AO3, so I hope this is helpful. :)
lavishsqualor: girl on toeslavishsqualor on February 17th, 2013 11:17 pm (UTC)
You know, I've actually been meaning to get in touch with you to ask you how you make these pretty skins! And then here you did this! Thank you so, so much! <3
Eos Rose: Chibieosrose on February 17th, 2013 11:53 pm (UTC)
If I make any other templates I think people might like, I'll be sure to share. Maybe I'll start a trend!
the slashy side of me ...: MCR - askpoisongreedy_dancer on February 17th, 2013 11:53 pm (UTC)
Thanks for sharing this!! :D
the slashy side of me ...: MCR - askpoisongreedy_dancer on February 18th, 2013 04:49 pm (UTC)
I also tweaked the colours and fire_juggler reminded me to post them here.

Sample image

Full CSS with colour shifts:

Fire Juggler: Firefire_juggler on February 18th, 2013 01:44 am (UTC)
I love this!!! I used it but tweaked the colors a bit. Sample is >>here<<

The full CSS (with the color shifts) is here:

mothlights: ellen_page_drew_barrymoremothlights on February 19th, 2013 01:04 am (UTC)
Thanks to both you and eosrose!!!
I tweaked your version for posting without cover art.
(I actually have art attached to the mp3 for my latest, but I don't love it enough to want to post it on AO3. I can diss it, because I made it. ;) Anyway, my redone page is here.

Full CSS is:

Eos Rose: Chibieosrose on February 19th, 2013 01:14 am (UTC)
Thanks for reminding me that I ought to make no-cover versions for any future work skins I may or may not attempt! That was an oversight on my part. I'm glad you found a way to work around it to your satisfaction.
mothlights: headphones_bookmothlights on February 19th, 2013 01:32 am (UTC)
My workaround is plain! But this way I can still take advantage of some of the colors, and the way it makes the "Inspired by" text stand out more. Thanks again!
l_niania: I love podfic!l_niania on February 23rd, 2013 11:38 pm (UTC)
This looks amazing! Just went to AO3 to see it completely and noticed you even included the summary and notes section. I didn't know this is possible... Now I'm really tempted to try this but so far I'm not offering streaming. First because I have my files on mediafire and as far as I know streaming isn't possible with mediafire. Second I'm still uncomfortable with posting recordings of my voice. It makes identifying me so easy. So I feel better knowing people have to download and not just click on the play button... Ridiculous I know, the porn is already posted... /o\
Eos Rose: Chibieosrose on February 23rd, 2013 11:43 pm (UTC)
It's easy to delete the streaming option from the template. I just included it b/c more and more people these days like the option and not everyone knows that AO3 *does* have a code that can be used to stream audio.
l_niania: I love podfic!l_niania on February 24th, 2013 06:53 pm (UTC)
Done! :D I deleted the streaming section and put a complete header in the right box. If anyone wants it here is my code for the work text.

Thank you eosrose! \o/
l_niania: Sleeping Winchestersl_niania on February 23rd, 2013 11:43 pm (UTC)
Aaaand I forgot to say the podfic looks amazing too! DOWNLOADING... Yay!
Eos Rose: Chibieosrose on February 23rd, 2013 11:52 pm (UTC)
Which one? The Middle Child? It's one of the few podfics I've made that I actually enjoy listening to (I have hang-ups about my own voice), so if you haven't come across it before I'm glad you're downloading it now. It was lots of fun to make! :-)
l_niania: Sleeping Winchestersl_niania on February 24th, 2013 01:02 pm (UTC)
Yep the middle child. I love it so far! My crappy internet connection only downloads about 10% before crashing so I tried the streaming. Ironic... ^_^ Which is quite bumpy too but I managed to listen to about 90 min. The story is adorable. And it's impressive how you balanced expressing Sam's sadness and desperation about being pushed to the side with the humourous writing style. I really, really like your podfic! Can't wait to finally download at uni tomorrow. \o/

Also cutting out the streaming section is a good idea. I only just started using CSS codes and so far they fight me every step of the way. But I will win here! :P

Oh and who doesn't have hang-ups about his voice? For me it's quite arkward to listen to my podfics too. Editing is fine and checking the final version too but as soon as I post... /o\ It gets better after a few month though.
Eos Rose: Chibieosrose on February 24th, 2013 09:57 pm (UTC)
Since you're having problems, I uploaded the mp3s as individual files at another host here. Maybe you'll have better luck?
l_niania: I love podfic!l_niania on February 24th, 2013 10:55 pm (UTC)
IT WORKED! Thank you so much, you're the best! \o/ Now I don't have to wait until tomorrow evening but can listen to a little bit more before sleeping and even more tomorrow morning in the subway. Yay! :D
Sly: Nebulasly_hostetter on February 24th, 2013 02:21 am (UTC)
Thank you for sharing these codes with the podfic community! :D

I have also tweaked the color scheme a wee bit... it can be viewed HERE at my latest AO3 post.
Luncheelunchy_munchy on February 24th, 2013 03:59 am (UTC)

I'm definitely gonna give it a go with my next AO3 upload! Thank you!
Luncheelunchy_munchy on February 28th, 2013 04:20 pm (UTC)
Got it up and working with a tweaked colour scheme here. So awesome!
Swedish for "Smith": SPN family businesscolls on March 4th, 2013 11:52 pm (UTC)
That looks so spiffy! I'm bookmarking for next time I post a podfic.
Thank you!
mothlights: whip_will_speakmothlights on March 19th, 2013 08:30 pm (UTC)
Thanks again for this! I love it, and it's so nice of you to let us use your work. One new note now that I've tried it with cover art for the first time...

On my ipod, only the cover art shows up unless I scroll right to see streaming and download. (For a second I though the downloads were missing, but I'm dense like that.) -- I wanted someone scrolling down on their mobile to see the MP3, etc. immediately, so I switched that to the left with the art on the right.

To do that, I just changed the order of the info in your "Work Text" text box so it's

I also made a small change to the CSS to bump the cover art padding to the left instead of the right, changing from "padding-right: 10 px" to "padding-left: 10 px":

/* Right (Cover Column) ****************/
#workskin .cover {
padding-left: 10px;
padding-top: 0;

Preview here

Edited at 2013-03-19 08:39 pm (UTC)
[will fuck for sex]anatsuno on April 27th, 2013 05:22 pm (UTC)
This is so COOL, thank you! I'm finally trying it today, using fire_juggler's color changes. The only weird thing is, AO3 accepted my skin creation but it is not listing the skin as available in the drop-down in Associations when I want to apply it to a work, GAH. *goes back to fiddle with things*

insert coffee to activate: Boys and Impalaheard_the_owl on May 14th, 2013 12:07 am (UTC)
I haven't posted ANYTHING to AO3 since OCTOBER 2012 OMG /0\ so, thanks so much for this!
Bunny (Amy): Bunny defaultnubianamy on June 2nd, 2013 11:31 pm (UTC)
Ooooooooh! Thank you so much! This is completely nifty. Here's my first try. http://archiveofourown.org/works/827414
Te: Merlin: Beautifulteprometo on September 7th, 2013 12:55 am (UTC)
This is so gorgeous. Thanks for sharing!
Not cops, just hicks: trashcan tentaclesglovered on October 4th, 2015 06:39 pm (UTC)
Just a note to say I finally posted my podfic to AO3 and I'm using an edited version of this. Thanks so much, it's perf!
(no subject) - tavsanlikadin on January 30th, 2017 01:51 pm (UTC) (Expand)