ao3skin

[ao3skin]

So I thought this was commonly known internet navigation (but apparently it might just be those of us who have been using the internet since the 90’s who still know it). Or so it seems based on… a grumpy comment I got.

When you see an arrow like this:

It means you click it to expand out a hidden section.

It’s an accordion section/menu! It’s useful in web design to hide information that may be overwhelming under specific headers so people can only see what they need.

Here I’m using it for people who need the content warnings to be able to check, but for those who don’t need them and don’t want to be spoiled to just move right past without accidentally reading anything.

It’s still the user’s responsibility to click the arrow and read things as they need! But it is all warned. (And, yes, the all encompassing issues are already a tag on the fic, I’m just providing additonal warnings per chapter.)

[ao3skin]

Introducing: LCAoRs!

Or... "What if they had Ao3 on the Enterprise-D?"

GitHub repository | Instructions

Because I'm a giant nerd with too many hobbies, I made an Ao3 site skin based off of the computer interface in Star Trek TNG! This was my first attempt at an entire skin, so I hope people like it :)

[ao3skin]

I made an AO3 work skin! This is a modified version of a skin by @electricalice / @ao3skin, which can be found here. The example I created for the skin can be found here. I don't care if you credit me but it would be very nice if you could credit ElectricAlice!

[ao3skin]

i keep trying to find a way to do this but i am very new to any sort of css-ing to know wtf is going on. so, do you know how to make the textbox black on other themes just like how it is in reversi? sorry if this has been answered before i tried poking around your blog but nothing related came up :(

this should change the vast majority of it:

textarea, input, textarea:focus, input:focus, select, select:focus {    background: #1f1f1f;    color: #ebebeb; }

I haven’t betatested it for all cases tho...

[ao3skin]

hi! your tide skin is amazing!!! i was wondering if there was any CSS coding that could be done to make the text of all fics left aligned as justified text is hard for me to process

thank you!!!

yes! add this:

#chapters .userstuff p[align="justify"] {   text-align: left; }

[ao3skin]

hi there! is there a way to remove the "add to collection" button in your bookmarks? i want my dasboard to be as minimalistic as possible and i just don't use collections at all :c thank u in advance!!

yes!

#bookmark-form fieldset dt:nth-of-type(3) {    border-bottom: none; } #bookmark-form fieldset dt label[for="bookmark_collection_names_autocomplete"], input[id="bookmark_collection_names_autocomplete"] {    display: none; }

[ao3skin]

hey! is there a way to make the bookmarker's tags bold?

yesss!

.bookmark li .meta.tags {    font-weight: bold; }

[ao3skin]

Permanently Block tags on AO3 - Site Skin

Tutorial on how to do it: https://archiveofourown.org/works/41214669

[ao3skin]

for the last few months I’ve used this bookmarklet here by reisling: https://archiveofourown.org/works/33825019

it allows me to save all the filters I want and then apply them with a click to any tag page I’m onto. And it works on mobile. Really really recommended.

possibly adding "always exclude this warning tag" on ao3 wouldn't be as time-intensive as the blocking features? Since it'd reuse whatever code they've got for the "Show me adult content without checking" preference and just apply up to five filter tags. If they wanted to make it more complex than just the archive warnings it'd get heavy pretty fast though, and I don't know enough about the search function to know how many other things it'd affect bc touching code on big projects is always hell

--

Would that actually be the same code?

But yes, perma-exclude would be nice.

[ao3skin]

hi!! i'm trying to do two things with site skins, and i was wondering if you could help with that? c:

is it possible to (and if so, how to)

1. force left alignment Only If the text is justified? i'd like to keep center aligned scene dividers if i can

2. switch certain words to other ones in fics? hopefully while taking capitals and accents into consideration

thank you!

oh, I was about to say 1 is not doable but you can definitely do it:

#chapters .userstuff p[align="justify"] {    text-align: left; }

(I’ll probably update the dyslexia skin with this when I have the time)

2 is not really doable on someone else’s fics, but you can do it on your own with a workskin...? https://archiveofourown.org/works/39385251 

[ao3skin]

Hi! Good day. Sorry for intruding! I'm not good with CSS but I just want to know if it's possible to be able to use a bootstrap panel or bootstrap collapse on ao3 work skin?

a collapse is doable, some genius managed to use javascript from ao3 itself for personal skins: https://ao3skin.tumblr.com/post/679704460883329024/hi-kind-css-skin-creator-i-have-a-question-and-a

you need the bootstrap panel you can probably go ahead and take the code from bootstrap itself (it’s free...)

this should be it:

.panel {    margin-bottom: 20px;    background-color: #fff;    border: 1px solid transparent;    border-radius: 4px;    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);    box-shadow: 0 1px 1px rgb(0 0 0 / 5%); }

and then they add a border color:

.panel-default {    border-color: #ddd; }

the heading is done like this:

.panel-default>.panel-heading {    color: #333;    background-color: #f5f5f5;    border-color: #ddd; } .panel-heading {    padding: 10px 15px;    border-bottom: 1px solid transparent;    border-top-left-radius: 3px;    border-top-right-radius: 3px; }

but you’ll have to add the .collapsed and .hidden (like I explain in the link) to make the collaps work

[ao3skin]

the ao3 comment skin is the raddest thing ever omg, thank you so much for sharing!!!

:D thank you!

[ao3skin]

Do you have any skins that either put more space between tags or alternate the text/background colour so they’re easier to tell apart? thank you

yes, I have this one: https://archiveofourown.org/works/34928095

you can change the colors of the tags the way you want (the changes in my example are subtle but you can use bolder colors)

if you want more space than the example you can add this code at the end:

.commas li:after {  margin-right: 5px; }

you can change the 5px to any other number

[ao3skin]

Is there a skin that hides stats and, once youre inside a work, also hides comments and the list of people who left kudos?

This should do it:

.blurb dl.stats, .meta .stats, #kudos, #comments_placeholder, #show_comments_link, #show_comments_link_top {  display: none; }

It also removes the buttons to see the comments. But it doesn’t remove the box to leave a comment or to leave kudos!

[ao3skin]

hi there! how do you make the tag background a light gray (without the underline at the bottom?) i can't seem to figure it out :(

This should do it:

a.tag {    border-bottom: none;    background-color: #ededed; }

the underline at the bottom is tricky because it is not an underline but a border. which is probably why you were having problems!

[ao3skin]

hi!! i'm trying to do two things with site skins, and i was wondering if you could help with that? c:

is it possible to (and if so, how to)

1. force left alignment Only If the text is justified? i'd like to keep center aligned scene dividers if i can

2. switch certain words to other ones in fics? hopefully while taking capitals and accents into consideration

thank you!

oh, I was about to say 1 is not doable but you can definitely do it:

#chapters .userstuff p[align="justify"] {    text-align: left; }

(I’ll probably update the dyslexia skin with this when I have the time)

2 is not really doable on someone else’s fics, but you can do it on your own with a workskin...? https://archiveofourown.org/works/39385251 

[ao3skin]

update on how it works on various browsers as of august 2022:

Desktop browsers:

it works fine on safari both on mac and on iphone

on chrome it works in the beta pre-release version. They are going to be shipping it in the next version (105, which should go out at the end of the month.) but you can also enable it by going here: chrome://flags/#enable-experimental-web-platform-features and select ‘enabled’ to the Experimental Web Platform features

on edge and opera it is scheduled in the pre-release version. still in development. it will come eventually.

on Firefox you’ll need to go in the advanced config and enable the flag

layout.css.has-selector.enabled

Mobile Browsers:

according to canIuse only safari on iphone has it fully functioning.

And Chrome for Android has it in the pre-release version which should be out soon.

I can’t find infos on firefox for android (but that one allows extensions, so you can use userscripts to hide tags)

Additional stuff to remember

the class selector a[href*=“whatever”] looks at the url of the link. so if you have two words you’ll need to add %20 where the space should be and *s* where the / should be (for ships). so like: a[href*=“Colin%20Bridgerton*s*Penelope%20Featherington”] (the simplest way is to go to the page of the tag you want to block and copy the text)

a “i” at the end will make it non case-sensitive (which helps btw) a[href*=“whatever” i]

tumblr always changes “” in the curly ones. but you’ll need to use the straight ones in css if you want them to work properly

it will search even part of the word. so “tick” will catch “ticket” “ticking” “tickling” “ticks” 

this won’t catch all the syns of the tags unfortunately. if you want a clean exlusion of a particular tag you still should use the filters

Permanently Block tags on AO3 - Site Skin

Tutorial on how to do it: https://archiveofourown.org/works/41214669