Archive of Our Own

Chapter Text

One of the strangest powers of workskins is the ability to change how a fic appears for different readers. The webpage contains all sorts of information, such as the user's language, whether they're logged in, and how they interact with your work.

Language

This is achieved by having markup:

<p>You are viewing this page in <u class="english hidden">English</u><u class="french hidden">French</u><u class="other-lang hidden">another language</u>.</p>

And CSS based on the lang attribute of the html page, which will always be a standard 2 letter language code.

#workskin:is(html[lang="en"] *) .english {
  display: unset;
}

#workskin:is(html[lang="fr"] *) .french {
  display: unset;
}

#workskin:not(html[lang="fr"] *):not(html[lang="en"] *) .other-lang {
  display: unset;
}

User Logged In

Want to show something in your work only to logged in users? You can based on the class logged-in applied to the page.

If you have this work's workskin enabled, this should tell you whether you're logged in or not:

Specifically, the word not is hidden by default using the class hidden. If the page does not have class=logged-in, then it gets shown.

Work

<p>You are <u class="user-not-logged-in hidden">not</u> logged in.</p>

Workskin

#workskin:not(:is(body.logged-in *)) .user-not-logged-in {
  display: unset;
}

Bookmarking

While ao3 automatically generates a thank you message for kudos, bookmarkers don't get one. I find bookmarks much more flattering. Bookmark this fic & refresh the page to see my thank you message.

You can do this with the following markup:

<p class="ty-bookmark hidden">Thanks for bookmarking!</p>

With this in the workskin:

#workskin:is(html:has(#bookmark-form input[value="Update"]) *) .ty-bookmark {
  display: unset;
}

OR have the message just appear at the end of your work with this in the workskin:

#workskin:is(html:has(#bookmark-form input[value="Update"]) *)::after {
  content:"Thanks for bookmarking my work! Subscribe for more like this.";
}

Both are based on detecting whether someone has already bookmarked based on whether their bookmark form says Update vs. Create.

Note, the class hidden has been used to hide things because its inherent to the site itself. This means it does not need to be included in your workskin, and it won't be overridden even if the reader turns off the creator's style. Almost no site skin, even a custom one, would choose to show the class hidden. Doing so would reveal all sorts of random, meaningless stuff like the authenticity token.

The alternative is using the ::before or ::after in the CSS selector and the property content:"Your text here."; The main differences are:

1. text that's in your workskin does not copiable and can't be downloaded
2. you can't apply styling to part of the text