Custom Kudos Workskin

Gotta love a little black magic... ;-)

Well it does work on long fics if you choose to view it with the "Entire Work" option rather than "Chapter By Chapter" I'm not workskin expert but I think (?) because it needs a single page for working, and you would have to make a longer extensive code that would account for the chapter count as well. Hope someone tries to make one tho, my longfics are begging for sweet custom kudos 😭

When you have multiple chapters, the HTML markup is slightly different (the #workskin element is wrapped in a parent element), so the feedback box is not the direct sibling anymore. This is not supposed to work, it's an oversight on AO3s part.

The HTML structure of the page is different for a single chapter / entire work. HTML is a tree structure with parents, siblings and children. In CSS every element can be selected by its tag name (like "div"), id (#workskin), or class name (.work). You can further select children (everything inside the selected element) by simply adding a space and then add the child element selector you want. You can select directly preceding and following siblings with "+" and "~" but so far you CANNOT select an element's parent.

Very simplified you have

<div class="work">
  <div id="workskin"></div>
</div>
<div id="feedback"></div>

For the chaptered works (that don't work) and

<div id="workskin"></div>
<div id="feedback"></div>

For single chapter / entire works.

To style the kudos button you need to reference #feedback somehow.

The reason why one works but not the other is because work skins always enforce to have the #workskin id selector in front of every rule. Usually, this means you can style this and every element in the structure inside it. (Relatively) new is a so called "sibling connector" (the ~ between #workskin and #feedback) that allowes you to style a following sibling element (on the same level as #workskin).

Since the chaptered HTML structure has #workskin (our enforced element) as a child of .work and that as a direct sibling of #feedback, we can't reference #feedback because from our enforced point of entry we can't go up the HTML tree to our parent .work and reference its sibling #feedback from there.

I hope this made sense :)

I asked Charles_Rockafellor on AO3 about it and this is what he said: https://archiveofourown.org/comments/1035727151

In Chapter by Chapter view, the #feedback section is more of an aunt/uncle relationship to #workskin than a sibling like it is in one-shot/Entire Work view.

I mean, it's just a workskin, so I don't know how it would be considered a 'bug'. If you choose to hide the creator's style, you'd get the regular standard kudos message. But let's hope ao3 lets us customise the message in the future 😔🤞🏼

1. Go to {My Dashboard ► Skins ► My Work Skins ► Create Work Skin}.

2. Forgot to add: copypasta the rules into that new skin, and edit them as needed.

3. Save your work skin (you can always edit it all that you want later, as many times as you want) with whatever name you like (again: you can always change that name).

4. Go edit your fic to apply your work skin (halfway down the page to the Associations: at the bottom of this section you'll see a field named Select Work Skin; click the Edit Field's pointer and it will present you with a list of all of the Work Skins that you can choose from).

hi, sorry I have no idea who the original author is, i saw someone do the same to their fics on ao3 itself and asked them for the code, which they graciously supplied to me. I would've credited them, but they've since deleted their account. If you know who it is, please let me know and I'll credit them right away.

Again, I was not aware this is a bug. I'm not recommending anyone to apply it to their fics, but because I had previously posted about it, a lot of people were asking me for the code which I then dm'ed to tens of people. And did get requests to post it on the subreddit itself. Hope that clears things up.

This is a slightly different version from my own work skin, but here you go:

#workskin .NOTE_re_kudos_messages {

content: " /// *

Totally stolen from mackerel_cheese's work 'you were never meant for the computer screen', https://archiveofourown.org/works/64310923 😇, I only modified it with an extra :before message — edit 31 Jul 2025 mack told me just now that they'd actually stolen it from gifbot (EDIT 10 Dec 2025: who had made it with a critical assist from mystyrust... now gifbot tells me, and so now I need to edit all of my skins yet again 😭), so mine is actually a second-hand theft here.

* /// ";

}

#workskin ~ #feedback #kudos_message {

font-size: 0;

}

#workskin ~ #feedback #kudos_message.notice:before {

font-size: 12pt;

padding: 10px;

display: block;

content: "What, what, what...? Kudos?!?";

}

#workskin ~ #feedback #kudos_message.notice:after {

font-size: 12pt;

padding: 10px;

display: block;

content: "Ahh, kudos! Yes!!! Thank you, thank you, THANK YOU!!! ❤️";

}

#workskin ~ #feedback #kudos_message.kudos_error:before {

content: "Kudos error? Oh, my, that is unfortunate...";

font-size: 12pt;

padding: 10px;

display: block;

}

#workskin ~ #feedback #kudos_message.kudos_error:after {

content: "Ohh, that's so sweet of you — you dropped kudos here already, but I still love you for the thought. You can always comment, though! ❤️";

font-size: 12pt;

padding: 10px;

display: block;

}