AO3 Workskin FLEX!!!
Mar. 11th, 2024 08:10 am![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
jajalalaPlease I need everyone to clap at this little Worksin/CSS/HTML magic I have wrought unto my latest fic, even if you don't share the fandom or have any interest in the fic, if you enjoy AO3 then pretty please click this link and scroll down towards the bottom of this final chapter: https://archiveofourown.org/works/52556548/chapters/137774764
OKAY SO please click on the link above and scroll to the bottom of the fic.... and notice.... ADMIRE..... the little trickery I have employed..... And if you keep scrolling down through the comments displayed.... please click the "link" at the very bottom and be EVEN MORE amazed.
A fake ending bit, fake kudos, fake buttons, a fake comment-leaving box, a whole comments section, a "link" that reveals A FIC WITHIN A FIC complete with the meta/tag info at top etc etc... Mwahahaha!!!
I have been not talking about this for MONTHS even though I worked out (most) the kinks in the code before I started posting the first chapter of the fic. Since then, I have been doddling around with it, but I've held back on discussing it publicly bc I wanted it to be out there and accessible before I chat about it. Here are some more detailed notes about putting together the code and where my struggles mostly lay:
Fic Within A Fic: I found several different guides on AO3 on how to achieve this effect. This one ended up having some helpful css/worksin stuff that definitely helped to create the title, author, summary, and author's notes section. However, the header thing at the top with tags etc was formatted specifically for light mode. Light/Dark mode cross compatibility is something I wanted to make certain of, since they're the two most popular, and I didn't want to break immersion by assuming/imposing one or the other. I eventually found THIS guide which had similar info BUT the header bit in that specifically DIDN'T require any workskin/CSS shenanigans, which was an ADDITIONAL bonus. In other words, even if someone turned off Creator's Style, they would STILL see that fun formatting :D. This also included how to create a fake kudos section, AND very importantly: A fake comments section.
The Comments Section: This one was tricky. The code I got from that guide was clearly intended for specifically default/light-mode users. I had to go in and wrangle some stuff to make it not only compatible with dark mode, but ALSO light mode. This is especially tricky because the comment boxes of light/dark mode do NOT behave exactly the same. Specifically, for light-mode the header with the username is a gray rectangle, while the content of the comment is in a white box. Meanwhile for dark mode they're all the same color. Additionally, for both light+dark, every other comment has a slightly darkened background. I ended up doing some trickery by making the header's be the exact color of dark-mode's background, but at a transparency that made it a believable gray for light mode. There are still imperfections, when there's "every other comment" darkening of the background that creates an odd lighter-colored header in dark mode, and so I purposefully made the darkening not as strong as it should be in dark mode to make that imperfection less noticeable. Light mode is also not perfect--dark mode has a shadow around the edges I decided to make standard even tho light mode is "flat", but it's subtle. I think overall it passes on a first glance.
Leave A Comment Box: This one was me! Once again there was trickiness with light vs dark mode--Light mode has a substantial greying around the content area of the comment box, while dark mode has none. Once again I used dark-modes background color at a precise transparency to be invisible on dark mode but create an appropriate grey on light mode. If you directly compare the box to a TRUE leave comment box, whether light or dark mode, you can see some slight imperfections/differences especially in the edges, but I think it's passable at a glance. Additionally, I had fun learning how to create the little blue question mark (luckily built into Ao3's HTML, I reverse-engineered it by inspecting an authentic AO3 page) AND also making it so that if your cursor hovers over the portion where you would leave your comment, it turns into the typing shape that implies you SHOULD be able to click and type in there (you cannot... sadly).
"Link" to Reveal the true final chapter: THIS ONE BEAT ME UP AND TOOK MY MONEY. I ended up trying several different guides, especially ones that were based around choose-your-own-adventure (tho I unsuccessfully also tried to adapt one about changing spellings with a button press that was def not designed for my purpose), since I thought those would have helpful stuff for revealing text with a click. However, many of them would create a bunch of weird white space at the bottom of the screen or required scrolling. For the effect, I wanted to make it so there wasn't a ton of scrolling-space, so as a reader you wouldn't be like "This is DEFINITELY a fakeout, I can see I'm only half-way down the fic". Even though the comment section ended up taking up space, I wanted readers to feel the pressure of "Oh this fic is truly getting to the end, this is the end, isn't it???" (I considered hiding the comments as another trick and forcing readers to click the "comments" button to see and reveal, but then I decided that'd be too cruel and might ACTUALLY be missed by readers lol)
So I failed spectacularly at adapting every piece I found UNTIL I realized.... lots of the guides were written BEFORE Ao3 started supporting the summary/details HTML tags. And I was like "No way, that's gotta be TOO easy... isn't it????" BUT THEN... I tested it out.... and VOILA!
I did still have to employ some finangling. Doing a details tag INSIDE the comment box would cause the whole rest of the fic to be constrained to being inside that comment box, which is obviously not ideal, so I ended up making a funky class in my workskin that would like... make it so (1) the details tag wouldn't have it's usual triangle and (2) I made it move to a weird spot outside of it's typical boundary: AKA I ACTUALLY put the details tag at the bottom AFTER the comments and outside the comments div, BUT I also told it to go up and to the right a bunch away from its "anchor", making it so it'll appear exactly where it would go if it were a part of the comment.
The big bonus here is ALSO that it still appears fairly sensible and maintains most of the effect even if you turn the creator's skin off, since it's HTML the base AO3 code supports... I honestly think most of this except the comments section holds up, though I think the comments section is still legible, even if ugly.
Overall I'm proud of myself for putting all this together and choosing/editing things in order to be believable in both light AND dark mode. Obviously if someone has a more custom theme things might look funky, but I feel like I'll cover 95% of readers. As I mentioned in my notes, some of the guides I looked at assumed a light mode, and as someone who always uses dark mode... I instantly was like "Huh this looks broken??" so I wanted to avoid that WITHOUT alienating light mode users. I also wanted to keep things legible in case of people not having creator skin on for any reason, and although the effect is not as good, some parts still work and the parts that don't are plenty legible.
ANYWAYS EVERYONE PLEASE CLAP!!! I also officially finished posting that fic, which I'm also really happy to have done! I might do more reflections on the content of that fic and my feelings about it later, but right now I just want to BRAG and SHOW OFF what I did for the final chapter :D
Technically will mention spoilers for my fic Revolutionary Girl Ochako so if you happen to be a reader and/or want to be unspoiled don't poke around here but everyone else here are details
OKAY SO please click on the link above and scroll to the bottom of the fic.... and notice.... ADMIRE..... the little trickery I have employed..... And if you keep scrolling down through the comments displayed.... please click the "link" at the very bottom and be EVEN MORE amazed.
A fake ending bit, fake kudos, fake buttons, a fake comment-leaving box, a whole comments section, a "link" that reveals A FIC WITHIN A FIC complete with the meta/tag info at top etc etc... Mwahahaha!!!
I have been not talking about this for MONTHS even though I worked out (most) the kinks in the code before I started posting the first chapter of the fic. Since then, I have been doddling around with it, but I've held back on discussing it publicly bc I wanted it to be out there and accessible before I chat about it. Here are some more detailed notes about putting together the code and where my struggles mostly lay:
Fic Within A Fic: I found several different guides on AO3 on how to achieve this effect. This one ended up having some helpful css/worksin stuff that definitely helped to create the title, author, summary, and author's notes section. However, the header thing at the top with tags etc was formatted specifically for light mode. Light/Dark mode cross compatibility is something I wanted to make certain of, since they're the two most popular, and I didn't want to break immersion by assuming/imposing one or the other. I eventually found THIS guide which had similar info BUT the header bit in that specifically DIDN'T require any workskin/CSS shenanigans, which was an ADDITIONAL bonus. In other words, even if someone turned off Creator's Style, they would STILL see that fun formatting :D. This also included how to create a fake kudos section, AND very importantly: A fake comments section.
The Comments Section: This one was tricky. The code I got from that guide was clearly intended for specifically default/light-mode users. I had to go in and wrangle some stuff to make it not only compatible with dark mode, but ALSO light mode. This is especially tricky because the comment boxes of light/dark mode do NOT behave exactly the same. Specifically, for light-mode the header with the username is a gray rectangle, while the content of the comment is in a white box. Meanwhile for dark mode they're all the same color. Additionally, for both light+dark, every other comment has a slightly darkened background. I ended up doing some trickery by making the header's be the exact color of dark-mode's background, but at a transparency that made it a believable gray for light mode. There are still imperfections, when there's "every other comment" darkening of the background that creates an odd lighter-colored header in dark mode, and so I purposefully made the darkening not as strong as it should be in dark mode to make that imperfection less noticeable. Light mode is also not perfect--dark mode has a shadow around the edges I decided to make standard even tho light mode is "flat", but it's subtle. I think overall it passes on a first glance.
Leave A Comment Box: This one was me! Once again there was trickiness with light vs dark mode--Light mode has a substantial greying around the content area of the comment box, while dark mode has none. Once again I used dark-modes background color at a precise transparency to be invisible on dark mode but create an appropriate grey on light mode. If you directly compare the box to a TRUE leave comment box, whether light or dark mode, you can see some slight imperfections/differences especially in the edges, but I think it's passable at a glance. Additionally, I had fun learning how to create the little blue question mark (luckily built into Ao3's HTML, I reverse-engineered it by inspecting an authentic AO3 page) AND also making it so that if your cursor hovers over the portion where you would leave your comment, it turns into the typing shape that implies you SHOULD be able to click and type in there (you cannot... sadly).
"Link" to Reveal the true final chapter: THIS ONE BEAT ME UP AND TOOK MY MONEY. I ended up trying several different guides, especially ones that were based around choose-your-own-adventure (tho I unsuccessfully also tried to adapt one about changing spellings with a button press that was def not designed for my purpose), since I thought those would have helpful stuff for revealing text with a click. However, many of them would create a bunch of weird white space at the bottom of the screen or required scrolling. For the effect, I wanted to make it so there wasn't a ton of scrolling-space, so as a reader you wouldn't be like "This is DEFINITELY a fakeout, I can see I'm only half-way down the fic". Even though the comment section ended up taking up space, I wanted readers to feel the pressure of "Oh this fic is truly getting to the end, this is the end, isn't it???" (I considered hiding the comments as another trick and forcing readers to click the "comments" button to see and reveal, but then I decided that'd be too cruel and might ACTUALLY be missed by readers lol)
So I failed spectacularly at adapting every piece I found UNTIL I realized.... lots of the guides were written BEFORE Ao3 started supporting the summary/details HTML tags. And I was like "No way, that's gotta be TOO easy... isn't it????" BUT THEN... I tested it out.... and VOILA!
I did still have to employ some finangling. Doing a details tag INSIDE the comment box would cause the whole rest of the fic to be constrained to being inside that comment box, which is obviously not ideal, so I ended up making a funky class in my workskin that would like... make it so (1) the details tag wouldn't have it's usual triangle and (2) I made it move to a weird spot outside of it's typical boundary: AKA I ACTUALLY put the details tag at the bottom AFTER the comments and outside the comments div, BUT I also told it to go up and to the right a bunch away from its "anchor", making it so it'll appear exactly where it would go if it were a part of the comment.
The big bonus here is ALSO that it still appears fairly sensible and maintains most of the effect even if you turn the creator's skin off, since it's HTML the base AO3 code supports... I honestly think most of this except the comments section holds up, though I think the comments section is still legible, even if ugly.
Overall I'm proud of myself for putting all this together and choosing/editing things in order to be believable in both light AND dark mode. Obviously if someone has a more custom theme things might look funky, but I feel like I'll cover 95% of readers. As I mentioned in my notes, some of the guides I looked at assumed a light mode, and as someone who always uses dark mode... I instantly was like "Huh this looks broken??" so I wanted to avoid that WITHOUT alienating light mode users. I also wanted to keep things legible in case of people not having creator skin on for any reason, and although the effect is not as good, some parts still work and the parts that don't are plenty legible.
ANYWAYS EVERYONE PLEASE CLAP!!! I also officially finished posting that fic, which I'm also really happy to have done! I might do more reflections on the content of that fic and my feelings about it later, but right now I just want to BRAG and SHOW OFF what I did for the final chapter :D
no subject
Date: 2024-03-11 01:17 pm (UTC)no subject
Date: 2024-03-12 01:23 pm (UTC)no subject
Date: 2024-03-11 01:27 pm (UTC)no subject
Date: 2024-03-12 01:24 pm (UTC)no subject
Date: 2024-03-11 02:30 pm (UTC)So impressive that when I first looked I couldn't spot what you were talking about! \o/
no subject
Date: 2024-03-12 01:24 pm (UTC)no subject
Date: 2024-03-11 10:53 pm (UTC)and congratulations on finishing the fic!! very exciting :D
no subject
Date: 2024-03-12 01:30 pm (UTC)Thank you, I'm really happy to have finished it!!!!!!
no subject
Date: 2024-03-12 08:41 pm (UTC)no subject
Date: 2024-03-11 11:10 pm (UTC)Very cool 👏👏👏
no subject
Date: 2024-03-12 01:30 pm (UTC)no subject
Date: 2024-03-12 03:16 pm (UTC)OH MY GOD AT FIRST I THOUGHT THEY WERE LEGITIMATE COMMENTS UNTIL MY BRAIN CAUGHT UP WITH MY EYES THAT WERE PROCESSING THE NAMES OF THE COMMENTERS AND I WAS LIKE OH MY GOD
AND THEN I STARTED CLICKING because a lizard lives in my internet addled brain of course and the SEROTONIN. I GOT. WHEN THE LINKS WORKED. AHHHHHHHHH
dude. once i finish watching utena. i am COMING for this fic.
no subject
Date: 2024-03-13 12:09 pm (UTC)Also THANK YOU for clicking around on things, there are some "dummy" links/buttons but a majority are functional!!! I spent a lot of time putting in many functional (or joke) links so I'm glad they're being appreciated
no subject
Date: 2024-03-13 03:09 pm (UTC)you bet those buttons/links deserve appreciation i love clicky things. i see something press-able? i PRESS.
no subject
Date: 2024-03-12 03:42 pm (UTC)no subject
Date: 2024-03-13 12:09 pm (UTC)no subject
Date: 2024-03-13 08:45 am (UTC)You're right to brag and show off!
no subject
Date: 2024-03-13 12:15 pm (UTC)no subject
Date: 2024-03-13 12:50 pm (UTC)OMG??? That's so cool! This is so cool!! I have lost all the English in my brain, my neurons are just going "!!!"
I love, love whenever people incorporate workskins into their storytelling and OMGGG!!
no subject
Date: 2024-03-14 12:48 am (UTC)